Drupal 6 JavaScript and jQuery - Ebook-Cours.com

[ 215 ]
Chapter 7
Since we just want the items from the feed, we can use the jQuery find() function,
which takes a CSS selector to query the DOM. The query that we just saw, will return
all of the elements. WebClips.items, a variable that belongs
to our main WebClips object, is a jQuery object wrapping a list of the
elements.
Why do we store the items in WebClips.items? We do that since we want this list
to be accessible to other WebClips functions. Here, we will make the list globally
available. Other functions will retrieve data from this list of items.
Next, we begin building the display for our web clips area:
var clip = Drupal.theme('webclipArea', 'webclips');
$('#main').addClass('webclips-processed').prepend(clip);
First, we use Drupal.theme() to create the web clips area. This function, which
we will look at in just a moment, takes one argument. The argument is the ID
(webclips) for the web clips area. We will use that later to find the area and
exchange the clip (the RSS feed item) displayed in that area.
Before moving on to the rest of this function, let's take a quick look at the Drupal.
theme.prototype.webclipArea() theming function. This function is responsible
for defining the region where the web clips will be displayed. However, individual
web clips will be themed separately as seen here:
Drupal.theme.prototype.webclipArea = function (id) {
var tpl = '';
return tpl;
};
This function simply builds some HTML that looks like this:
';
There is a with the class webclip-area. Inside of this is an empty
tag. Above, I've used ID as a placeholder for the ID that is passed
into the theming function. Ours will have the ID webclips.
The theme is executed in the behavior and the results are stored in clip.
Once we have a themed the clip area, we insert that into the DOM at the top of the
main content area (the element with the ID main). To make sure the behavior doesn't
run again, we need to add the webclips-processed class to the element with the
main ID. Then, using the prepend() jQuery function, we add the web clip section
directly inside the main section before any other content.
This material is copyright and is licensed for the sole use by Richard Ostheimer on 18th June 2009
2205 hilda ave., , missoula, , 59801