![Creating Smarter Interfaces with jQuery Amit Asaravala www.returncontrol.com [email_address]](https://image.slidesharecdn.com/jqueryintro03-1223738304707408-8/85/Smarter-Interfaces-with-jQuery-and-Drupal-1-320.jpg)
![In nice_menus.module * function nice_menus_init() { drupal_set_html_head(' <!--[if IE]> <script type="text/javascript" src="'. check_url(base_path() . 'misc/jquery.js') .'"></script> <script type="text/javascript" src="'. check_url(base_path() . 'misc/drupal.js') .'"></script> <script type="text/javascript" src="'. check_url(base_path() . drupal_get_path('module', 'nice_menus') .' /nice_menus.js ') .'"></script> <![endif]--> '); … } * simplified](https://image.slidesharecdn.com/jqueryintro03-1223738304707408-8/85/Smarter-Interfaces-with-jQuery-and-Drupal-8-320.jpg)
![Thanks! Amit Asaravala www.returncontrol.com [email_address]](https://image.slidesharecdn.com/jqueryintro03-1223738304707408-8/85/Smarter-Interfaces-with-jQuery-and-Drupal-37-320.jpg)
Smarter Interfaces with jQuery (and Drupal)
- 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="text/javascript" src="'. check_url(base_path() . 'misc/jquery.js') .'"></script> <script type="text/javascript" src="'. check_url(base_path() . 'misc/drupal.js') .'"></script> <script type="text/javascript" src="'. check_url(base_path() . drupal_get_path('module', 'nice_menus') .' /nice_menus.js ') .'"></script> <![endif]--> '); … } * simplified
- 9. 2. Write the JavaScript In nice_menus.js * * simplified $(document).ready(function() { $(" ul.nice-menu li.menuparent "). hover ( function() { $(this).addClass("over").find("> ul"). show() ; }, function(){ $(this).removeClass("over").find("> ul"). hide() ; } ); });
- 10. What if we modify this? Make font bigger, fade in and out $(document).ready(function() { $("ul.nice-menu li.menuparent").hover( function() { $(this).addClass("over"). css("font-size", "16px") .find("> ul"). show(‘slow’) ; }, function(){ $(this).removeClass("over"). css("font-size", "13px") .find("> ul"). 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="text/javascript"> $(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="text/javascript"> $(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="text/javascript"> $(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="display:none"><?php print l('less', '', array('attributes' => array('class' => 'toggle'))); ?></li>' ); }); </script>
- 20. Example 2: More or Less Finally, handle the “click” event <script type="text/javascript"> $(document).ready(function() { $('#nice-menu-2 li:nth-child(5) ~ li').hide(); $('#nice-menu-2').append( '<li class=""><?php print l('more', '', array('attributes' => array('class' => 'toggle'))); ?></li>' + '<li class="" style="display:none"><?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(" //something goes here ", '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=\"chars\">characters: 0</div>' ); });
- 24. Example 3: Dynamic Form Components Step 2: Write the Code $(document).ready(function() { $('#edit-title'). after( '<div id=\"chars\">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() { $("#edit-title").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(); $("#edit-submit").val("Next").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("Submit"); $("#edit-body-wrapper").show(); $("#edit-title-wrapper").hide(); page = 2; return false; } else { return true; } } Huzzah!
- 37. Thanks! Amit Asaravala www.returncontrol.com [email_address]