• Choose a category
• All
• Classic-Fiction

3. In the init() function, specify the list as a selectable node.

Use the standard jQuery syntax: selectable().

$(“#selectable”).selectable();

The ui-selected class is attached to all elements when they have been selected. Be sure to add some kind of CSS to this class, or you won’t be able to tell that items have been selected.

If you want to do something with all the items that have been selected, just create a jQuery group of elements with the ui-selected class:

var selectedItems = $(“.ui-selected”);

Building a sortable list

Sometimes you want the user to be able to change the order of a list. This is easily done with the sortable widget. Figure 5-9 shows the sortable list in its default configuration.

Figure 5-9: This looks like an ordinary list.

The user can grab members of the list and change their order, as shown in Figure 5-10.

Making a sortable list is really easy. Follow these steps:

1. Build a regular list.

Sortable elements are usually lists. The list is a regular list, but with an ID:

2. Turn it into a sortable node.

Add the following code to the init() method:

$(“#sortable”).sortable();

Creating a custom dialog box

JavaScript supplies a few dialog boxes (the alert and prompt dialog boxes), but these are quite ugly and relatively inflexible. The jQuery UI includes a technique for turning any div into a virtual dialog box. The dialog box follows the theme and is resizable and movable. Figure 5-11 shows a dialog box.

Figure 5-10: The user can drag the elements into a different order.

Figure 5-11: This dialog box is actually a jQuery UI node.

Building the dialog box is not difficult, but you need to be able to turn it on and off with code, or it will not act like a proper dialog (which mimics a window in the operating system):

1. Create the div you intend to use as a dialog box.

Create a div and give it an ID so that you can turn it into a dialog box node. Add the title attribute, and the title shows up in the dialog box’s title bar.

2. Turn the div into a dialog box.

Use the dialog() method to turn the div into a jQuery dialog box node in the init() function:

$(“#dialog”).dialog();

3. Hide the dialog box by default.

Usually you don’t want the dialog box visible until some sort of event happens. In this particular example, I don’t want the dialog box to appear until the user clicks a button. I put some code to close the dialog box in the init() function so that the dialog box will not appear until it is summoned.

4. Close the dialog box.

To close a dialog box, refer to the dialog box node and call the dialog() method on it again. This time, send the single value “close” as a parameter, and the dialog box will immediately close:

//initially close dialog

$(“#dialog”).dialog(“close”);

5. The x automatically closes the dialog box.

The dialog box has a small x that looks like the Close Window icon on most windowing systems. The user can close the dialog box by clicking this icon.

6. You can open and close the dialog box with code.

My Open Dialog and Close Dialog buttons call functions that control the behavior of the dialog box. For example, here is the function attached to the Open Dialog button:

function openDialog(){

$(“#dialog”).dialog(“open”);

} // end openDialog

Chapter 6: Working with AJAX