Javascript in Drupal by sofiaie

VIEWS: 39 PAGES: 16

									Javascript in Drupal
   An introduction to jQuery
    Before we begin...

1. Download Firefox (http://www.getfirefox.com)
2. Download Firebug (http://www.getfirebug.com)
3. Locate examples on workshops.lullabot.com
   attached to “jQuery Fun” post
       What’s jQuery?

• “Javascript Query”
• Significantly reduces javascript code
• Circumvents browser incompatibilities
• Provides visual effects and wow factor
            jQuery vs. javascript
Get Elements By Class Name
 1. document.getElementsByClassName = function(className, parentElement) {
 2. if (Prototype.BrowserFeatures.XPath) {
 3. var q = ".//*[contains(concat(' ', @class, ' '), ' " + className + " ')]";
 4. return document._getElementsByXPath(q, parentElement);
 5. } else {
 6. var children = ($(parentElement) || document.body).getElementsByTagName('*');
 7. var elements = [], child;
 8. for (var i = 0, length = children.length; i < length; i++) {
 9.     child = children[i];
10.      if (Element.hasClassName(child, className))
11.        elements.push(Element.extend(child));
12. }
13. return elements;
14. }
15. };
            jQuery vs. javascript
Get Elements By Class Name
1. $(“.classname”);
     jQuery Selectors
• CSS Selectors
 • $(‘.title’);
 • $(‘#main’);
 • $(‘input[@type=text]’);
 • More at http://docs.jquery.com/Selectors
• XPath
 • $('/html/body/div/div/div/div/h1');
        jQuery Effects

• $(‘h1’).hide();
• $(‘h1’).hide(‘slow’);
• $(‘h1’).hide(3000);
• $(‘h1’).fadeOut(‘slow’);
• $(‘h1’).slideUp(‘slow’);
• More at http://docs.jquery.com/Effects
        jQuery Events
• Click, blur, change, hover, etc.
• Inline function declarations common
      $(‘a’).click(function() {
        $(this).parent().slideUp(‘slow’);
        return false;
      });
   On Document Ready
• Better than inserting javascript in $closure
• Essential for degrading gracefully (works
  without javascript)

        if (Drupal.jsEnabled) {
          $(document).ready(function() {
            // Put jQuery in here.
            $(‘h1’).hide();
          }
        }
      jQuery Chainability
 • Multiple Operations on the Same Element
$('h1').prepend('Hello').append('!').fadeOut().fadeIn();


 • All operations will occur on the h1 tag
      drupal_add_js()

• The proper way to add JS files
• Both modules and themes should use this
 • ensures proper cascading order
 • can be aggregated & compressed (in D6)
 • easier to manipulate
                  Add a JS file
drupal_add_js($data, $type);


• $data is path to js file
• $type, either ‘module’ (default) or ‘theme’
drupal_add_js(drupal_get_path(‘module’, ‘my_module’) . ‘/myjs.js’);

drupal_add_js(drupal_get_path(‘theme’, ‘my_theme’) . ‘/myjs.js’, ‘theme’);
                Add inline JS
 drupal_add_js("
   $(document).ready(function() {
      $(‘a’).click(function() {
        return false;
      });
   });
 ", 'inline', ‘header’);


• $data is actual JS code
• $type is ‘inline’
• $scope ‘header’ or ‘footer’
 Send PHP variables to JS

drupal_add_js(array('basePath' => base_path()), 'setting');


• $data is an array of PHP variables
 • drupal_to_js() converts to JSON
• $type is ‘setting’
• Drupal.settings.basePath to access variable
                 Examples
• my_module.module
 function theme_my_module_x() {
    $module_path = drupal_get_path(‘module’, ‘my_module’);
    $settings = array(
      ‘my_module’ = array(
         ‘basePath’ => base_path(),
         ‘message’ => t(‘Thank you for clicking’),
       )
    );
    drupal_add_js($settings, 'setting');
    drupal_add_js($module_path .'/scripts/general.js');
 }

 • Use theme_ functions to add javascript (/css)
Questions?

								
To top