Smarter Interfaces with jQuery (and Drupal)

  • 11,363 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
11,363
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
118
Comments
0
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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