Drupal theming + jQuery basics (including Drupal behaviors)

This tutorial shows a toggle effect with jQuery behaviors to implement use, how you within your Drupal theme, while Drupal.

The finished effect can be seen in this Drupal jQuery demo.

The toggle is accomplished through a two-step process:

Practices that allow the switch to work content and adding markup implement step 1 - NodeStep 2 - jQuery, use of Drupal

Step 1: Add content and markup to a node

First add the following code to your node body (remember, the full HTML input format set, to avoid the DIV tags that always ignored):

Click this link to the below contents switch

Toggles this content, open and closed with jQuery.
Blah, blah, blah.

There are two important elements within your code:

The item when clicked, will toggle (in this case the link with an ID of "Togg Link") the element that will hide (in this case the div with an ID of 'Togg')

Step 2 - implement jQuery to work behaviors that enable the switch using Drupal

In this tutorial we will our jQuery on a new ' script. js '-file implement sitting in our theme folder.

Drupal 6 helps big when it comes to including jQuery topics as follows:

This new ' script. js '-automatically to find file and including it (source - structure of the .info file - scripts) car including the main ' jquery.js ' and ' drupal.js ' files for us if it detects that a specific page, you require

Meaning that all we have to do is short, the jQuery code required for the toggle in our new ' script. js '-file to write and it works!

So, to start, create a new JS file named ' script.js ', and save it within your topic root folder.IE:

/Sites/All/themes/mytheme/Script.js

(replace ' S ' with your theme actual name such as' My_great_theme ')

Please note: the file will be not found automatically, if you place it in a different location (e.g. / sites/all/themes/mytheme/otherfiles/script.js). also if you file must declare other JS files via your theme .info you to declare this new file.

Then add the following code to the ' script. js '-file:

//togg
Drupal.Behaviors.togg = function (context) {}
($('a#togg-Link:Not(.togg-processed)', context) .addClass .each(function_() ('Togg processed') {})
$(this).Click(Function() {}
$ ("div#togg").toggle(400);
return false;
});
});
};

Nice huh! uh, but what does mean the hell all? Let's break it down:

Drupal.Behaviors.togg = function (context) {}

};

Build a Drupal behavior (which is simply a function), close to the ' drupal. behaviors '-object and pass the context-object.

($('a#togg-Link:Not(.togg-processed)', context) .addClass .each(function_() ('Togg processed') {})

});

Loop through all instances of ' a # togg link ' that do not already have a class of "Togg processed", add a class of Togg processed and...

$(this).Click(Function() {}

});

...attach of a click function will be executed if ' $ (this) ' (i.e. our link is clicked.

The click balance tool is running, switch the div with an ID of 'Togg' at a speed of 400 milliseconds...

... and prevent that work the link (usually click on a link, which aimed at a pound sign ' # is ' would jump the user to the top of the page).

Empty cache

If not empty the cache still done and enjoy your new Drupal jQuery toggle goodness!
See "Empty cache" in the 'create custom scopes in drupal 6 themes' post for two ways to do this in the section marked.

Restrictions

As indicated in the title, this is a basic Beispiel.In of a more complex scenario, where, for example, you want switch, that is applied to multiple elements within a node, it would be practical to do so by... dynamically assigning IDs, although this is a discussion for another post...

Drupal jQuery book

Drupal 6 JavaScript and jQuery
by Matt butcher

Useful jQuery links
jQuery.com
visualjquery.com
Working with JavaScript and jQuery

View the original article here