Smarter Interfaces with jQuery (and Drupal)

11,915 views

Published on

Slides from Amit Asaravala's portion of intro to jQuery session at BADCamp 08

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
11,915
On SlideShare
0
From Embeds
0
Number of Embeds
188
Actions
Shares
0
Downloads
122
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide
  • Smarter Interfaces with jQuery (and Drupal)

    1. 1. Creating Smarter Interfaces with jQuery Amit Asaravala www.returncontrol.com [email_address]
    2. 2. What We’ll Cover <ul><li>Examples: </li></ul><ul><ul><li>Dynamic navigation </li></ul></ul><ul><ul><li>More dynamic nav (or less?) </li></ul></ul><ul><ul><li>Dynamic form components </li></ul></ul><ul><ul><li>Popup calendars </li></ul></ul><ul><ul><li>Multipart forms </li></ul></ul><ul><li>Learn: </li></ul><ul><ul><li>How jQuery works with Drupal </li></ul></ul><ul><ul><li>Tips / techniques / tools </li></ul></ul>
    3. 3. Example 1: Dynamic Nav <ul><li>Expanding / Collapsing Nav Menus </li></ul><ul><ul><li>Nice Menus module </li></ul></ul>
    4. 4. Tip 1: Look for Existing Modules First <ul><li>LOTS o’ options for dynamic menus: </li></ul><ul><ul><li>Nice Menus </li></ul></ul><ul><ul><li>Simple Menu </li></ul></ul><ul><ul><li>Active Menus </li></ul></ul><ul><ul><li>DHTML Menu </li></ul></ul><ul><ul><li>Lucid Menu </li></ul></ul><ul><ul><li>Quick Menu </li></ul></ul>CC-Remix-NC http://www.flickr.com/photos/b-tal/163450213/
    5. 5. Back to Example 1: Nice Menus <ul><li>Mostly CSS </li></ul><ul><li>But uses jQuery to provide IE6 support </li></ul>
    6. 6. Technique: The Process <ul><li>Let Drupal know about JavaScript / jQuery </li></ul><ul><ul><li>In a module </li></ul></ul><ul><ul><li>Or in a theme (template / function) </li></ul></ul><ul><li>Write the JavaScript </li></ul><ul><ul><li>Find the component(s) you want to modify </li></ul></ul><ul><ul><li>Determine what actions to apply </li></ul></ul>
    7. 7. 1. Let Drupal Know <ul><li>Nice Menus notifies Drupal in the module </li></ul><ul><ul><li>uses drupal_set_html_head() http://api.drupal.org/api/function/drupal_set_html_head </li></ul></ul><ul><ul><li>Other option is drupal_add_js() http://api.drupal.org/api/function/drupal_add_js </li></ul></ul>
    8. 8. In nice_menus.module * <ul><li>function nice_menus_init() { </li></ul><ul><li>drupal_set_html_head(' </li></ul><ul><li><!--[if IE]> </li></ul><ul><li><script type=&quot;text/javascript&quot; src=&quot;'. check_url(base_path() . </li></ul><ul><li>'misc/jquery.js') .'&quot;></script> </li></ul><ul><li><script type=&quot;text/javascript&quot; src=&quot;'. check_url(base_path() . </li></ul><ul><li>'misc/drupal.js') .'&quot;></script> </li></ul><ul><li><script type=&quot;text/javascript&quot; src=&quot;'. check_url(base_path() . </li></ul><ul><li>drupal_get_path('module', 'nice_menus') .' /nice_menus.js ') .'&quot;></script> </li></ul><ul><li><![endif]--> </li></ul><ul><li>'); </li></ul><ul><li>… </li></ul><ul><li>} </li></ul>* simplified
    9. 9. 2. Write the JavaScript <ul><li>In nice_menus.js * </li></ul>* simplified $(document).ready(function() { $(&quot; ul.nice-menu li.menuparent &quot;). hover ( function() { $(this).addClass(&quot;over&quot;).find(&quot;> ul&quot;). show() ; }, function(){ $(this).removeClass(&quot;over&quot;).find(&quot;> ul&quot;). hide() ; } ); });
    10. 10. What if we modify this? <ul><li>Make font bigger, fade in and out </li></ul>$(document).ready(function() { $(&quot;ul.nice-menu li.menuparent&quot;).hover( function() { $(this).addClass(&quot;over&quot;). css(&quot;font-size&quot;, &quot;16px&quot;) .find(&quot;> ul&quot;). show(‘slow’) ; }, function(){ $(this).removeClass(&quot;over&quot;). css(&quot;font-size&quot;, &quot;13px&quot;) .find(&quot;> ul&quot;). hide(‘slow’) ; } });
    11. 11. Tool: Visual jQuery <ul><li>http://visualjquery.com/ </li></ul>
    12. 12. Example 2: More or Less <ul><li>Modify Nice Menus to hide some elements </li></ul>
    13. 13. Example 2: More or Less <ul><li>Remember the Process: </li></ul><ul><ul><li>Step 1: Let Drupal know about our JavaScript </li></ul></ul><ul><ul><ul><li>In this case, theme (page.tpl.php) </li></ul></ul></ul><ul><ul><ul><li>jQuery not loaded by default if no other scripts… </li></ul></ul></ul><ul><ul><ul><li>So, need to make one change first… </li></ul></ul></ul>
    14. 14. Making Sure jQuery Gets Loaded <ul><li>In page.tpl.php, find this: </li></ul><ul><ul><li><head> </li></ul></ul><ul><ul><li><title><?php print $head_title ?></title> </li></ul></ul><ul><ul><li><?php print $head ?> </li></ul></ul><ul><ul><li><?php print $styles ?> </li></ul></ul><ul><ul><li><?php print $scripts ?> </li></ul></ul><ul><ul><li>… </li></ul></ul><ul><ul><li></head> </li></ul></ul>
    15. 15. Making Sure jQuery Gets Loaded <ul><li>Replace with: </li></ul><ul><ul><li><head> </li></ul></ul><ul><ul><li><title><?php print $head_title ?></title> </li></ul></ul><ul><ul><li><?php print $head ?> </li></ul></ul><ul><ul><li><?php print $styles ?> </li></ul></ul><ul><ul><li><?php </li></ul></ul><ul><ul><li>drupal_add_js('misc/jquery.js', 'core', 'header'); </li></ul></ul><ul><ul><li>print drupal_get_js(); </li></ul></ul><ul><ul><li>?> </li></ul></ul><ul><ul><li>… </li></ul></ul><ul><ul><li></head> </li></ul></ul><ul><li>Or in Drupal 6, put an empty script.js file in your theme directory </li></ul>
    16. 16. Example 2: More or Less <ul><li>Step 2 of Process: Write the JavaScript </li></ul><ul><ul><li>Tip: Start from the outside and work inward </li></ul></ul><script type=&quot;text/javascript&quot;> $(document).ready(function() { }); </script>
    17. 17. Example 2: More or Less <ul><li>Step 2.1 of Process: Select the component you want to modify. </li></ul><ul><li>Tool: Firebug Firefox add-on </li></ul><ul><ul><li>Allows you to inspect page structure (among other things) </li></ul></ul>
    18. 18. Example 2: More or Less <ul><li>Tip: Start from the outside and work inward </li></ul><ul><ul><li>We want to hide everything beyond the fifth menu item </li></ul></ul><script type=&quot;text/javascript&quot;> $(document).ready(function() { $('#nice-menu-2 li:nth-child(5) ~ li').hide(); }); </script>
    19. 19. Example 2: More or Less <ul><li>Tip: Start from the outside and work inward </li></ul><ul><ul><li>Now append “more” and “less” links </li></ul></ul><script type=&quot;text/javascript&quot;> $(document).ready(function() { $('#nice-menu-2 li:nth-child(5) ~ li').hide(); $('#nice-menu-2').append( '<li><?php print l('more', '', array('attributes' => array('class' => 'toggle'))); ?></li>' + '<li style=&quot;display:none&quot;><?php print l('less', '', array('attributes' => array('class' => 'toggle'))); ?></li>' ); }); </script>
    20. 20. Example 2: More or Less <ul><li>Finally, handle the “click” event </li></ul><script type=&quot;text/javascript&quot;> $(document).ready(function() { $('#nice-menu-2 li:nth-child(5) ~ li').hide(); $('#nice-menu-2').append( '<li class=&quot;&quot;><?php print l('more', '', array('attributes' => array('class' => 'toggle'))); ?></li>' + '<li class=&quot;&quot; style=&quot;display:none&quot;><?php print l('less', '', array('attributes' => array('class' => 'toggle'))); ?></li>' ); $('.toggle').click(function() { $('#nice-menu-2 li:nth-child(5) ~ li').toggle(); return false; //important! }); }); </script> Voila!
    21. 21. Example 3: Dynamic Form Components <ul><li>Show character count as user is typing? No problem! </li></ul>
    22. 22. Example 3: Dynamic Form Components <ul><li>Step 1: Let Drupal Know… </li></ul><ul><ul><li>Forms involved, so hook_form_alter (so module) </li></ul></ul><ul><ul><li>jqintrochars.module: </li></ul></ul>function jqintrochars_form_alter(&$form, $form_state, $form_id) { drupal_add_js(&quot; //something goes here &quot;, 'inline'); } We can use drupal_add_js() instead of drupal_set_html_head() because we’re inserting straight JavaScript code -- not any HTML…
    23. 23. Example 3: Dynamic Form Components <ul><li>Step 2: Write the Code </li></ul>$(document).ready(function() { $('#edit-title'). after ( '<div id=&quot;chars&quot;>characters: 0</div>' ); });
    24. 24. Example 3: Dynamic Form Components <ul><li>Step 2: Write the Code </li></ul>$(document).ready(function() { $('#edit-title'). after( '<div id=&quot;chars&quot;>characters: 0</div>' ). keyup(updateCount); }); function updateCount() { $('#chars'). html ( 'characters: ' + $(this).val().length ); } Ka-pow!
    25. 25. <ul><li>Could take additional action after some number of characters… </li></ul><ul><li>function updateCount() { </li></ul><ul><li>$('#chars').html( 'characters: ' + $(this).val().length ); </li></ul><ul><li>if($(this).val().length > 20) { </li></ul><ul><li>$('#edit-body').parent('.resizable-textarea').hide('slow'); </li></ul><ul><li>} else { </li></ul><ul><li>$('#edit-body').parent('.resizable-textarea').show('slow'); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>Example 3: Dynamic Form Components Sha-zam!
    26. 26. Example 4: Popup Calendars <ul><li>Remember to check if module already exists? </li></ul><ul><ul><li>CCK Date Module </li></ul></ul>
    27. 27. Example 4: Popup Calendars <ul><li>But what if… </li></ul><ul><ul><li>You want to use the datepicker on other fields, not the Date CCK field? </li></ul></ul><ul><ul><li>You’re on Drupal 5 and want to use jQuery UI datepicker? </li></ul></ul><ul><ul><li>http://docs.jquery.com/UI/Datepicker </li></ul></ul>
    28. 28. Tool: jQuery Update Module <ul><li>Brings Drupal up to date with jQuery 1.2.6 http://drupal.org/project/jquery_update </li></ul>
    29. 29. Example 4: Popup Calendars <ul><li>Create a new module </li></ul><ul><li>Get the ui.datepicker.js and ui.datepicker.css files and put them in the module directory </li></ul><ul><li>Here’s your hook_form_alter() code: </li></ul><ul><li>function testdate_form_alter($form_id, &$form) { </li></ul><ul><li>if($form_id == ‘presentation_node_form') { </li></ul><ul><li>drupal_add_css (drupal_get_path('module', 'testdate') . '/ui.datepicker.css'); </li></ul><ul><li>drupal_add_js (drupal_get_path('module', 'testdate') . '/ui.datepicker.js'); </li></ul><ul><li>drupal_add_js (' </li></ul><ul><li>$(document).ready(function() { </li></ul><ul><li>$(&quot;#edit-title&quot;).datepicker({ closeAtTop: false }); </li></ul><ul><li>}); </li></ul><ul><li>', 'inline'); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
    30. 30. Example 4: Popup Calendars
    31. 31. Example 5: Multipart Forms <ul><li>An alternative to doing it in Drupal on the backend </li></ul>www.dublit.com
    32. 32. Example 5: Multipart Forms <ul><li>The game plan: </li></ul><ul><ul><li>Turn “Page” type into a two-part form </li></ul></ul><ul><ul><ul><li>“ Title” is on part 1 </li></ul></ul></ul><ul><ul><ul><ul><li>Body is hidden </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Next button </li></ul></ul></ul></ul><ul><ul><ul><li>“ Body” is on part 2 </li></ul></ul></ul><ul><ul><ul><ul><li>Title is hidden </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Submit button </li></ul></ul></ul></ul>
    33. 33. Example 5: Multipart Forms <ul><li>Step 1: Let Drupal Know… </li></ul><ul><ul><li>Where’s the best place in this case? </li></ul></ul><ul><ul><ul><li>Module, hook_form_alter() if($form_id == ' page_node_form ') { drupal_add_js(' $(document).ready(function() { }); ', 'inline'); } </li></ul></ul></ul>
    34. 34. Example 5: Multipart Forms <ul><li>Find the first component, take action… </li></ul><ul><ul><ul><li>Hide #edit-body-wrapper if($form_id == 'page_node_form') { drupal_add_js(' $(document).ready(function() { $(“#edit-body-wrapper”).hide(); }); ', 'inline'); } </li></ul></ul></ul>
    35. 35. Example 5: Multipart Forms <ul><li>What’s the next thing you want to do? </li></ul><ul><ul><ul><li>Change the button to say “Next” if($form_id == 'page_node_form') { drupal_add_js(' $(document).ready(function() { $(“#edit-body-wrapper”).hide(); $(&quot;#edit-submit&quot;).val(&quot;Next&quot;).click(pageMng) }); ', 'inline'); } </li></ul></ul></ul>
    36. 36. Example 5: Multipart Forms <ul><li>What should the pageMng function do when button is clicked? </li></ul><ul><ul><ul><li>Change the button to say “Submit” </li></ul></ul></ul><ul><ul><ul><li>Show title, hide body var page = 1; function pageMng() { if(page == 1) { $(this).val(&quot;Submit&quot;); $(&quot;#edit-body-wrapper&quot;).show(); $(&quot;#edit-title-wrapper&quot;).hide(); page = 2; return false; } else { return true; } } </li></ul></ul></ul>Huzzah!
    37. 37. Thanks! Amit Asaravala www.returncontrol.com [email_address]

    ×