Subject Tool Remarks What is JQuery. Slide Javascript Library

Size: px

Start display at page:

Download "Subject Tool Remarks What is JQuery. Slide Javascript Library"

Teresa Stafford
8 years ago
Views:

1 Subject Tool Remarks What is JQuery Slide Javascript Library Picture John Resig Tool for Searching the DOM (Document Object Model) Created by John Resig Superstar Very Small (12k) Browser Independent Not Drupal Bound Examples of Effects - Lullabot Search Box Sites (wenn Internet Verbindung da) - Sagapix Bilder wechseln - Brandnew Referenzen - Stielundco automatisch - Drupal selbst, Menueinstellungen - JqueryUI Examples in D7 What do we need - The library - Firebug Lets Play - Hide, show, fade, toggle Datei jquery.js Firebug Demo - Konsole/HTML/Debug Localhost/JQuery/Start Jquery.com für Referenz <html xmlns=" xml:lang="en"> <head> <script type = "text/javascript" src="jquery.js"></script> </head> <body> <div id= piclist > <div id="pic1" class="pict"> <img src="pic1.jpg" width="200"/> <div id="pic2" class="pict"> <img src="pic3.jpg" width="200"/> <div id="pic3" class="pict"> <img src="pic5.jpg" width="200"/> </body> </html>

Menueinstellungen - JqueryUI Examples in D7 What do we need - The library - Firebug Lets Play - Hide, show, fade, toggle Datei jquery.

2 2 Methods Konsole - Change CSS Properties - Change DOM CSS File $("#pic1 img").animate({"height": "700px"); $("#pic1 img").animate({"height": "500px","width" : "700px",2000); <link rel="stylesheet" type="text/css" href="start.css"> $("#pic1").addclass('frame'); $("#pic1 img").attr('src','pic9.jpg'); Siehe nettuts.com Activate Do with class and image $('.pict img').hover(function(){ $(this).toggleclass('frame');,function(){ $(this).toggleclass('frame'); ); Add a Button $("#pic3").after('<button id="mybutton">click here</button>'); $('#mybutton').click(function() {$('#pic3').toggle(1000)); Add my own JS File Start.js $(document).ready(function(){ alert('hello Munich); ); Add Button and Click $("#pic3").after('<button id="mybutton">click here</button>'); $('#mybutton').click(function() { $('.pict').toggle(1000); ); Change the Text in the Button 8-tung: vor toggle!!! if($('#pic3').is(':hidden')){ $('#mybutton ').attr('textcontent','hide'); else{ $('#mybutton ').attr('textcontent','show');

com Activate Do with class and image $('.pict img').hover(function(){ $(this).toggleclass('frame');,function(){ $(this).toggleclass('frame'); ); Add a Button $("#pic3").

3 Synchronize! Change Source -> wrong! Change Source -> right! Cycle Library Enlarge and make them cycle Cycle.js $('#pic1').hide(); $('#pic2').hide(); $('#pic3 img').animate({"height": "500px","width" : "700px"); $("#pic3").after('<button id="mybutton">click here</button>'); $('#mybutton').click(function() { $('#pic3').fadeout(100); $('#pic3 img').attr('src','pic9.jpg'); $('#pic3').fadein(1000); ); $('#mybutton').click(function() { $('#pic3').fadeout(1000,function(){ $('#pic3 img').attr('src','pic9.jpg'); $('#pic3').fadein(1000); ); ); <script type = "text/javascript" src="cycle.js"></script> $('#piclist').cycle('fade'); Move them manually Add <a href= # ></a> $('#piclist').cycle({ fx: 'turndown', next: '#forward', timeout: 0 ); Sortable Jqueryui.js $(function() { $("#piclist").sortable(); ); Resizable Jqueryui.js Pic2 und 3 löschen #pic1 { border: solid red 2px; width: 200px; $("#pic1").resizable({ stop: function(event, ui) { widthstr=this.clientwidth.tostring()+"px"; heightstr=this.clientheight.tostring()+"px"; $("#pic1 img").animate({"width": widthstr, "height": heightstr); );

attr('src','pic9.jpg'); $('#pic3').fadein(1000); ); $('#mybutton').click(function() { $('#pic3').fadeout(1000,function(){ $('#pic3 img').attr('src','pic9.jpg'); $('#pic3').fadein(1000); ); ); <script type = "text/javascript" src="cycle.

4 Drupal How to add js files 1) Inline on Page 2) One file for all PHP Filter on page scripts[]=jqdemo.js in garland.info <?php drupal_add_js(' $(document).ready(function(){ alert("drupal Seite ist geladen"); )','inline');?> Drupal.behaviors.start = function(context){ $('h2').hide(3000); 3) Load in a module (or node_api) Module jqdemo <?php function jqdemo_menu(){ $items['jquery'] = array( 'page callback' => jqdemo _jquery', 'access callback' => TRUE, 'type' => MENU_CALLBACK, ); return $items; function jqdemo _jquery(){ drupal_add_js(drupal_get_path('module', jqdemo). '/ jqdemo _module.js'); $pic1=theme('imagecache', 'small_pic', 'sites/default/files/pic7.jpg'); $pic2=theme('imagecache', 'small_pic', 'sites/default/files/pic8.jpg'); $pic3=theme('imagecache', 'small_pic', 'sites/default/files/pic10.png'); $page_contents=' <div id="piclist"> <div id="pic1" class="pict">'. $pic1. ' <div id="pic2" class="pict">'. $pic2. ' <div id="pic3" class="pict">'. $pic3. '

$php function jqdemo_menu(){ $items['jquery'] = array( 'page callback' => jqdemo _jquery', 'access callback' => TRUE, 'type' => MENU_CALLBACK, ); return $items; function jqdemo _jquery(){$

5 return $page_contents; jqdemo _module.js Drupal.behaviors.start = function(context){ $('.imagecache-small_pic').hover(function(){ $(this).animate({"width":"600");,function(){ $(this).animate({"width":"150"); ); Evtl Demo D7 Ajax Extend Module Seite mit 3 Titeln function jqdemo _ajax_ask(){ drupal_add_css(drupal_get_path('module', jqdemo). '/ jqdemo.css'); drupal_add_js(drupal_get_path('module', jqdemo). '/ jqdemo _ajax.js'); $page_contents= '<div>choose a picture to be loaded'; $result = db_query('select * FROM {node where type="pictures"'); while($data = db_fetch_object($result)){ $the_node= node_load($data->nid); $page_contents.= '<a href = "#"><div class="clickable"><p>'. $the_node- >title. '</p><img src=""/></a>'; return $page_contents; Prepare Click and Call function jqdemo _ajax.js Drupal.behaviors.ajax_ask = function(context){ $('.clickable').click(function(context){get_data(context)); function get_data(context) { //JSon Call var callname='ajax_answer/'+context.currenttarget.textcontent; $.ajax({ type: 'POST',

$js'); $page_contents= '<div>choose a picture to be loaded'; $result = db_query('select * FROM {node where type="pictures"'); while($data = db_fetch_object($result)){ $the_node= node_load($data->nid);$

6 url: callname, datatype: 'json', success: function(datareturned){ context.currenttarget.firstchild.nextsibling.src=datareturned; Prepare Answer context.currenttarget.firstchild.nextsibling.width= 300;, data: 'js=1' ); function jqdemo _ajax_answer($title=''){ $page_contents='nothing'; $sql='select node.nid AS nid FROM node INNER JOIN content_type_pictures ON node.nid = content_type_pictures.nid where node.title="'. $title. '"'; $result = db_query($sql); while($data = db_fetch_object($result)){ $node= node_load($data->nid); $page_contents = $node->field_one_pic[0][filepath]; if (!empty($_post['js'])) { drupal_json($page_contents); exit(); return $page_contents;

$width= 300;, data: 'js=1' ); function jqdemo _ajax_answer($title=''){ $page_contents='nothing'; $sql='select node.$

JAVASCRIPT, TESTING, AND DRUPAL

JAVASCRIPT, TESTING, AND DRUPAL Rob Ballou @rob_ballou 1 JS, TESTING, AND DRUPAL What is the current state of JS in Drupal 7? JavaScript testing Drupal 8 2 ABOUT ME I work for Aten Design Group in Denver,