• Choose a category
• All
• Classic-Fiction

By Root 1498 0

with an index greater than 0 is a clone, so it needs to go away. The remove() method removes all jQuery nodes associated with the current selector.

2. Remove all divs but the original content.

I could have used the :gt selector again, but instead I use another interesting selector — :not. This removes every div that isn’t the primary content div. This removes all divs added through the wrap function.

3. Reset the original content div to its default text.

Set the default text back to its original status so that the page is reset.

All I really need here is the last line of code. Changing the HTML of the content div replaces the current contents with whatever is included, so the first two lines aren’t entirely necessary in this particular context. Still, it’s useful to know how to remove elements when you need to do so.

More fun with selectors and filters

The jQuery selectors and filters are really fun and powerful. Table 3-2 describes a few more filters and indicates how they might be used.

Note that this is a representative list. Be sure to check out the official documentation at http://docs.jquery.com for a more complete list of filters.

Table 3-2 Selected jQuery filters

Filter

Description

:header

Any header tag (h1, h2, h3).

:animated

Any element that is currently being animated.

:contains(text)

Any element that contains the indicated text.

:empty

The element is empty.

:parent

This element contains some other element.

:attribute=value

The element has an attribute with the specified value.

Chapter 4: Using the jQuery User Interface Toolkit

In This Chapter

Exploring the jQuery UI

Installing the UI and templates

Adding datepickers, dialog boxes, and icons

Dragging and dropping

Working with scroll bars

Building a sorting mechanism

Creating an accordion page

Building a tab-based interface

The jQuery library is an incredible tool for simplifying JavaScript programming. It’s so popular and powerful that developers began adding new features to make it even more useful. Among the most important of these is a framework called jQuery UI (User Interface), sometimes also called the UI toolkit. That’s what this chapter’s all about.

What the jQuery User Interface Brings to the Table

This tool adds some very welcome features to Web development, including new visual elements (widgets), a uniform icon set, and a mechanism for easily generating attractive CSS styles:

♦ New user interface elements: As a modern user interface tool, HTML is missing some important tools. Most modern visual languages include built-in support for such devices as scroll bars, dedicated datepickers, and multiple tab tools. jQuery UI adds these features and more.

♦ Advanced user interaction: The jQuery widgets allow new and exciting ways for the user to interact with your page. With the UI toolkit, you can easily let users make selections by dragging and dropping elements, and expand and contract parts of the page.

♦ Flexible theme templates: jQuery UI includes a template mechanism that controls the visual look and feel of your elements. You can choose from dozens of prebuilt themes or use a tool to build your own particular look. You can reuse this template library to manage the look of your other page elements, too (not just the ones defined by the library).

♦ A complete icon library: The jQuery UI has a library of icons for use in your Web development. It has arrows, buttons, and plenty of other doodads that can be easily changed to fit your template.

♦ A very clean, modern look: It’s very easy to build forward-looking visual designs with jQuery UI. It supports rounded corners and plenty of special visual effects.

♦ The power of jQuery: Because jQuery UI is an extension of jQuery, it adds on to the incredible features of the jQuery language.

♦ Open-source values: The jQuery UI (like jQuery itself) is an open-source project with a very active community. This means the library is free to use and can be modified to suit your needs.

The jQuery toolkit