Drupalcon notes: jQuery for Designers and Themers

Code from this session is at http://drupal.org/Project/jQ4DaT
Slides are at http://tinyurl.com/jQuery-Designers - fingers crossed I'm typing all of this right.

• jQuery: a selector engine. Supports CSS & XPath. Example: $('body .view a.read_more');
• A library for anipulating DOM (DOM is like live-and-manipulatable HTML but not persistent)

Demo: altering the user register form

• In your module's .info file, add a line to declare a script. scripts[] = namehere.js
• Get the element's ID. IDs are unique — guarantees no collisions. Don't forget to clear your cache; otherwise it won't do anything!

Drupal.behaviors.myHacks = function(context) {
   $(#user-register #edit-name-wrapper').hide();
}


// look into why the 'context' is important here
// I think it has something to do with catching user input
// after the page is loaded
Drupal.behaviors.myHacks = function(context) {
   $('#user-register #edit-mail-wrapper', context).slideUp(1000);
}

Check http://http://visualjquery.com/ for good visual examples of what jQuery can do.

// Only show the
Drupal.behaviors.myHacks = function(context) {
   $('#user-register #edit-mail-wrapper', context).slideUp(1000);
   $('#user-register input#edit-name', context).focus(function() {
      $('#user-register #edit-mail-wrapper').fadeIn();
  }
);
}

The 'context' parameter - when to use it, when not? Bevan said it was outside the scope of this discussion.

console.debug can be used to see what values we're getting.

You can call Drupal.checkPlain() to do a check_plain() on user-supplied text

jQuery UI is not jQuery - but jQuery UI requires jQuery - see http://jqueryui.com to see examples.

Add a jQuery UI script to your custom module by:

function modulenamehere_page_preprocess(&$vars) {
  jquery_ui_add(array(ui.draggable', 'ui.droppable));
  $vars['scripts'] = drupal_get_js();
}

• ‹ previous
• 1548 of 1709
• next ›