JavaScript the Smart Way - Getting Started with jQuery

JavaScript the Smart Way Getting Started with jQuery Drupal User Group presentation

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

Introduction to jQuery • What can jQuery do for me? “FLASH”Y STUFF AJAX TABS

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

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! });

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’)

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()

Chaining • $(‘#someElement’) .parent().parent() .find(‘div.green’) .hide().end() .siblings().find(‘div.blue’) .show().end() .parent().next() .addClass(‘redBorder’);

Show/Hide Example $(document).ready(function() { $('a.showhide').click(function() { $(this).parent().parent() .find('div.view-data-body') .slideToggle(); return false; }); }); see example

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

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)

Ajaxifying Drupal with jQuery 12

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 )); }

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; });

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

Quick Tabs Create blocks of tabbed views! http://drupal.org/project/quicktabs

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

http://katbailey.net	61
http://www.katbailey.net	33
http://www.slideshare.net	25
http://www.netola.net	4

JavaScript the Smart Way - Getting Started with jQuery

by katbailey

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 123

Statistics