Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Apress.Pro.Drupal.7.Development.3rd.Edition.Dec.2010.pdf
Скачиваний:
73
Добавлен:
14.03.2016
Размер:
12.64 Mб
Скачать

C H A P T E R 1 8

■ ■ ■

Using jQuery

JavaScript is ubiquitous. Every mainstream web browser ships with a JavaScript interpreter. Apple’s Dashboard widgets are written with JavaScript. Mozilla Firefox uses JavaScript to implement its user interface. Adobe Photoshop can be scripted with JavaScript. It’s everywhere.

It’s easy to be embittered by the clunky JavaScript of yesteryear. If you’ve had a bad run-in with JavaScript, it’s time to let bygones be bygones and say hello to jQuery. jQuery makes writing JavaScript intuitive and fun, and it’s also part of Drupal! In this chapter, you’ll find out what jQuery is and how it works with Drupal. Then you’ll work through a practical example.

What Is jQuery?

jQuery, created by John Resig, responds to the common frustrations and limitations that developers might have with JavaScript. JavaScript code is cumbersome to write and verbose, and it can be difficult to target the specific HTML or CSS elements you wish to manipulate. jQuery gives you a way to find these elements quickly and easily within your document.

The technical name for targeting an object is DOM traversal. DOM stands for Document Object Model. The model provides a tree-like way to access page elements through their tags and other elements through JavaScript, as shown in Figure 18-1.

Note You can learn more about jQuery from the official jQuery web site at http://jquery.com/, and from http://visualjquery.com/.

When writing JavaScript code, you usually have to spend time dealing with browser and operating system incompatibilities. jQuery handles this for you. Also, there aren’t many high-level functions within JavaScript. Common tasks such as animating parts of a page, dragging things around, or having sortable elements don’t exist. jQuery overcomes these limitations as well.

Like Drupal, jQuery has a small and efficient codebase, weighing in at just under 30 kilobytes. At the heart of jQuery is an extensible framework that JavaScript developers can hook into, and hundreds of jQuery plug-ins are already available at http://plugins.jquery.com/.

389

Download from Wow! eBook <www.wowebook.com>

CHAPTER 18 USING JQUERY

Figure 18-1. The DOM representation of http://jquery.com, using the Mozilla DOM Inspector tool, which installs with the Firefox browser

The Old Way

Let’s first do a quick review of the pure JavaScript way of DOM traversal. The following code shows how Drupal used to find elements within a page (in this case, the legend element within all collapsible fieldsets) before jQuery came along:

var fieldsets = document.getElementsByTagName('fieldset'); var legend, fieldset;

for (var i = 0; fieldset = fieldsets[i]; i++) { if (!hasClass(fieldset, 'collapsible')) {

continue;

}

legend = fieldset.getElementsByTagName('legend'); if (legend.length == 0) {

continue;

}

legend = legend[0];

...

}

And here’s the updated code within Drupal after jQuery entered the scene:

jQuery('fieldset.collapsible > legend:not(.collapse-processed)', context).each(function() {

... });

390

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]