![Page 1: JavaScript the Smart Way - Getting Started with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051111/554f45b6b4c905423f8b48d6/html5/thumbnails/1.jpg)
JavaScript the Smart WayGetting Started with jQuery
Drupal User Group presentation
![Page 2: JavaScript the Smart Way - Getting Started with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051111/554f45b6b4c905423f8b48d6/html5/thumbnails/2.jpg)
Introduction to jQuery
• JavaScript / jQuery / AJAX - what’s the difference?– JavaScript is a scripting language that adds
interactivity to web pages– jQuery is a JavaScript Framework– AJAX is a particular type of functionality
• JavaScript is to jQuery as PHP is to Drupal
![Page 3: JavaScript the Smart Way - Getting Started with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051111/554f45b6b4c905423f8b48d6/html5/thumbnails/3.jpg)
Introduction to jQuery• What can jQuery do for me?
TABS
AJAX
“FLASH”Y STUFF
![Page 4: JavaScript the Smart Way - Getting Started with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051111/554f45b6b4c905423f8b48d6/html5/thumbnails/4.jpg)
Introduction to jQuery• Advantages of jQuery over plain JavaScript
– Simplifies cross-browser issues– You don’t have to write the same code over and
over again
• Advantages of jQuery over other JS frameworks– Very concise code– Small file size– completely open source– Plugin architecture
![Page 5: JavaScript the Smart Way - Getting Started with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051111/554f45b6b4c905423f8b48d6/html5/thumbnails/5.jpg)
jQuery Basics• What do I need to get started?
– An understanding of CSS and the DOM– Basic understanding of JS syntax (ideally!)– jQuery itself
http://docs.jquery.com/Downloading_jQuery• $(document).ready(function(){
//let’s get started!});
![Page 6: JavaScript the Smart Way - Getting Started with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051111/554f45b6b4c905423f8b48d6/html5/thumbnails/6.jpg)
Selectors• CSS$(‘a’), $(‘#container’), $(‘div.ajaxContainer’),$(‘li:first-child’)
• X-Path:$(‘a[title]’), $(‘div[ul]’),$(‘a[href^=“mailto:”]’)
• Custom:$(‘li:eq(1)’),$(‘tr:not([th]):odd’)
![Page 7: JavaScript the Smart Way - Getting Started with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051111/554f45b6b4c905423f8b48d6/html5/thumbnails/7.jpg)
Some Useful Methods
• DOM Traversal– .parent(), .siblings(), .next()
• Manipulation– .html(), .empty(), .append(content)
• Events– .ready(fn), .hover(fn1, fn2), .click(fn)
• Effects– .slideToggle(), .show(), .hide()
![Page 8: JavaScript the Smart Way - Getting Started with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051111/554f45b6b4c905423f8b48d6/html5/thumbnails/8.jpg)
Chaining
• $(‘#someElement’).parent().parent().find(‘div.green’).hide().end().siblings().find(‘div.blue’).show().end().parent().next().addClass(‘redBorder’);
![Page 9: JavaScript the Smart Way - Getting Started with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051111/554f45b6b4c905423f8b48d6/html5/thumbnails/9.jpg)
Show/Hide Example
$(document).ready(function() { $('a.showhide').click(function() {
$(this).parent().parent() .find('div.view-data-body') .slideToggle();
return false; });}); see example
![Page 10: JavaScript the Smart Way - Getting Started with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051111/554f45b6b4c905423f8b48d6/html5/thumbnails/10.jpg)
jQuery in Drupal• drupal_add_js($data, $type)
– Add a JavaScript file, setting or inline code to the page, for example:
• drupal_add_js(drupal_get_path(‘module’, ‘mymodule’) .'/myjs.js');
• drupal_add_js(array(‘myjs’=>$mysettings), ‘setting’);• Drupal_add_js(‘var myVar = “foo”;’, ‘inline’);
• Where do I put my code?– themers: put your .js file in your theme directory and call
drupal_add_js(drupal_get_path(‘theme’, ‘mytheme’) . ‘myjs.js’) from a tpl file
– module developers: put your .js file in your module directory and call drupal_add_js() before you output content
![Page 11: JavaScript the Smart Way - Getting Started with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051111/554f45b6b4c905423f8b48d6/html5/thumbnails/11.jpg)
Ajaxifying Drupal with jQuery
• Basic essentials:– jQuery’s .ajax() or .get() method– drupal/path– callback function
• drupal_to_js($var)– Converts a PHP variable into its JavaScript
equivalent.• Drupal.parseJSON(data)
![Page 12: JavaScript the Smart Way - Getting Started with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051111/554f45b6b4c905423f8b48d6/html5/thumbnails/12.jpg)
12
Ajaxifying Drupal with jQuery
![Page 13: JavaScript the Smart Way - Getting Started with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051111/554f45b6b4c905423f8b48d6/html5/thumbnails/13.jpg)
Ajaxifying Drupal with jQuery
‣$items[] = array('path' => 'ajax/path', 'type' => MENU_CALLBACK, 'access' => TRUE, 'callback' => 'get_ajax_image');‣function get_ajax_image($nid) { //some code to retrieve the image print drupal_to_js(array( ‘title’ => $image_title, ‘path’ => $image_path ));}
![Page 14: JavaScript the Smart Way - Getting Started with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051111/554f45b6b4c905423f8b48d6/html5/thumbnails/14.jpg)
Ajaxifying Drupal with jQuery
‣ $(‘a.ajax-button’).click(function() { $.get(this.href, function(data){ var result = Drupal.parseJSON(data); $('div.title').html(result['title']); $('div.image').html(result['path']); }); return false;});
![Page 15: JavaScript the Smart Way - Getting Started with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051111/554f45b6b4c905423f8b48d6/html5/thumbnails/15.jpg)
Resources
• http://jquery.com• Book: Learning jQuery
» PACKT Publishing
• Cheat sheets:» http://colorcharge.com/jquery
• Other online resources» http://www.learningjquery.com» http://15daysofjquery.com» http://visualjquery.com
![Page 16: JavaScript the Smart Way - Getting Started with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051111/554f45b6b4c905423f8b48d6/html5/thumbnails/16.jpg)
Quick Tabs
Create blocks of tabbed views!
http://drupal.org/project/quicktabs
![Page 17: JavaScript the Smart Way - Getting Started with jQuery](https://reader033.vdocument.in/reader033/viewer/2022051111/554f45b6b4c905423f8b48d6/html5/thumbnails/17.jpg)
Key Takeaways• jQuery is a framework for writing JavaScript• It is extremely concise and therefore easy to
learn• It has a robust and efficient CSS-based
selector mechanism for precise selection of DOM elements
• It is modular, so non-standard features are available as plugins
• AJAX is a piece of cake with jQuery• Drupal ships with jQuery already built in