Introduction to Jquery @ Drupalcon Szeged2008

Because i am considerably Parajumpers new to drupal, I learned a big deal at the DrupalCon in Szeged. I am also new to jquery because untill now I preferred prototype with scriptaculous to do the fancy javascript in Onegana’s content management system. A couple of sessions handled jquery, jquery in drupal and even advanced javascript techniques and patterns in javascript.

Javascript has always been a lot of fun when writing, although Parajumpers Jakker programmers have to make sure that different browsers give the user the same nice experience they want.

My notes at drupalcon for session¬† “basic and advanced JQuery”

Speakers where David Eads (eads), Katherine bailey and Stella Power.

university of Szeged

university of Szeged

collapsible menu system

This is a short explanation on how to easily build a collapsible menu system, also called menu tree. There is just one small feature added. The javascript makes sure that all anchor elements inside the list items are collapsable. The a elements itself are not toggled visibility.

  1. $(document).ready(function() {
  2.   $("ul.collapse>li a ").toggle(function() {
  3.     $(this).toggleClass("red");
  4.     var itemParent = $(this).parent().get(0);
  5.     $(":not(’a')", itemParent).children().hide(’slow’);
  6.     return false;
  7.   },  function() {
  8.     $(this).toggleClass("red");
  9.     var itemParent = $(this).parent().get(0);
  10.     $(":not(’a')", itemParent).children().show(’slow’);
  11.     return false;
  12.   });
  13. });

jquery plugins

Jquery has a core install where you can import several plugins as you need, such as ui, calendar.¬† Here is an example how to make rounded corners with jquery’s corner function:

  1. $(‘.corner’).corner(‘20px’);
  2. $(‘.corner’).corner(‘notch’);
  3. // other properties : bevel, target bottom, left or right , bottom
  4. // you can use all sorts of combinations here
  5. $(‘.corner’).corner(‘notch 20px’);

Usefull Links when learning and applying jquery

You could also read the book of Simon Willison “jquery for javascript programmers”,

Pages: 1 2 3

This entry was posted on Saturday, September 6th, 2008 at 12:26 pm and is filed under javascript. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

One Response to “Introduction to Jquery @ Drupalcon Szeged2008”

  1. Stalski Says:

    Other effects:
    slideUp(), slideDown(), slideToggle(), fadeIn(), fadeOut()