Smarter Interfaces with jQuery (and Drupal)

Creating Smarter Interfaces with jQuery Amit Asaravala www.returncontrol.com [email_address]

What We’ll Cover ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Example 1: Dynamic Nav ,[object Object],[object Object]

Tip 1: Look for Existing Modules First ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],CC-Remix-NC http://www.flickr.com/photos/b-tal/163450213/

Back to Example 1: Nice Menus ,[object Object],[object Object]

Technique: The Process ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

1. Let Drupal Know ,[object Object],[object Object],[object Object]

In nice_menus.module * ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],* simplified

2. Write the JavaScript ,[object Object],* simplified $(document).ready(function() { $(" ul.nice-menu li.menuparent "). hover ( function() { $(this).addClass("over").find("> ul"). show() ; }, function(){ $(this).removeClass("over").find("> ul"). hide() ; } ); });

What if we modify this? ,[object Object],$(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’) ; } });

Tool: Visual jQuery ,[object Object]

Example 2: More or Less ,[object Object]

Example 2: More or Less ,[object Object],[object Object],[object Object],[object Object],[object Object]

Making Sure jQuery Gets Loaded ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Making Sure jQuery Gets Loaded ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Example 2: More or Less ,[object Object],[object Object],<script type="text/javascript"> $(document).ready(function() { }); </script>

Example 2: More or Less ,[object Object],[object Object],[object Object]

Example 2: More or Less ,[object Object],[object Object],<script type="text/javascript"> $(document).ready(function() { $('#nice-menu-2 li:nth-child(5) ~ li').hide(); }); </script>

Example 2: More or Less ,[object Object],[object Object],<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>

Example 2: More or Less ,[object Object],<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!

Example 3: Dynamic Form Components ,[object Object]

Example 3: Dynamic Form Components ,[object Object],[object Object],[object Object],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…

Example 3: Dynamic Form Components ,[object Object],$(document).ready(function() { $('#edit-title'). after ( '<div id=amp;quot;charsamp;quot;>characters: 0</div>' ); });

Example 3: Dynamic Form Components ,[object Object],$(document).ready(function() { $('#edit-title'). after( '<div id=amp;quot;charsamp;quot;>characters: 0</div>' ). keyup(updateCount); }); function updateCount() { $('#chars'). html ( 'characters: ' + $(this).val().length ); } Ka-pow!

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Example 3: Dynamic Form Components Sha-zam!

Example 4: Popup Calendars ,[object Object],[object Object]

Example 4: Popup Calendars ,[object Object],[object Object],[object Object],[object Object]

Tool: jQuery Update Module ,[object Object]

Example 4: Popup Calendars ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Example 5: Multipart Forms ,[object Object],www.dublit.com

Example 5: Multipart Forms ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Example 5: Multipart Forms ,[object Object],[object Object],[object Object]

Example 5: Multipart Forms ,[object Object],[object Object]

Example 5: Multipart Forms ,[object Object],[object Object],[object Object],Huzzah!

Thanks! Amit Asaravala www.returncontrol.com [email_address]

Smarter Interfaces with jQuery (and Drupal)

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (8)

Similar to Smarter Interfaces with jQuery (and Drupal)

Similar to Smarter Interfaces with jQuery (and Drupal) (20)

Recently uploaded

Recently uploaded (20)

Smarter Interfaces with jQuery (and Drupal)