Introduction to Jquery @ Drupalcon Szeged2008
Because i am considerably 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 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
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.
-
$(document).ready(function() {
-
$("ul.collapse>li a ").toggle(function() {
-
$(this).toggleClass("red");
-
var itemParent = $(this).parent().get(0);
-
$(":not(’a')", itemParent).children().hide(’slow’);
-
return false;
-
}, function() {
-
$(this).toggleClass("red");
-
var itemParent = $(this).parent().get(0);
-
$(":not(’a')", itemParent).children().show(’slow’);
-
return false;
-
});
-
});
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:
-
$(‘.corner’).corner(‘20px’);
-
$(‘.corner’).corner(‘notch’);
-
// other properties : bevel, target bottom, left or right , bottom
-
// you can use all sorts of combinations here
-
$(‘.corner’).corner(‘notch 20px’);
Usefull Links when learning and applying jquery
You could also read the book of Simon Willison “jquery for javascript programmers”,
website
November 25th, 2008 at 5:39 pm
Other effects:
slideUp(), slideDown(), slideToggle(), fadeIn(), fadeOut()