HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [306]
The basic jQuery library provides all the functionality necessary to make as many copies of an element as you want. Copying an element is a simple matter of using the jQuery clone() method.
The more elaborate code is used to ensure that the various elements display properly:
function cloneDragMe(){
for (i = 1; i <=4; i++){
zValue = (101 + i) + “”;
yPos = 100 + (i * 20) + “px”;
$(“div:first”).clone()
.insertAfter(“div:first”)
.css(“top”, yPos)
.css(“zIndex”, zValue)
.append(“ #” + i);
} // end for loop
} // end cloneDragMe
Here are the steps:
1. Create a for loop.
Anytime you’re doing something repetitive, a for loop is a likely tool. In this case, I want to make four clones numbered 1 through 4, so I have a variable named i that can vary from 1 to 4.
2. Create a zValue for the element.
The CSS zIndex property is used to indicate the overlapping of elements. Higher values appear to be closer to the user. I give each element a zOrder of over 100 to ensure that it appears over the target. (If you don’t specify the zIndex, dragged elements might go under the target and become invisible.) The zValue variable is mapped to the zIndex.
3. Determine the y position of the element.
I want each successive copy of the dragMe element to be a bit lower than the previous one. Multiplying i by 20 ensures that each element is separated from the previous one by 20 pixels. Add 100 pixels to move the new stack of elements near the original.
4. Make a clone of the first element.
Use the clone() method to make a clone of the first div. (Use the :first filter to specify which div you want to copy.)
5. Remember to insert the newly cloned element.
The cloned element exists only in memory until it is somehow added to the page. I chose to add the element right after the first element.
6. Set the top of the element with the yPos variable.
Use the yPos variable you calculated earlier to set the vertical position of the newly minted element. Use the css() method to apply the yPos variable to the element’s left CSS rule.
7. Set the zIndex.
Like the y position, the zValue variable you created is mapped to a CSS value. In this case, zValue is mapped to the zIndex property.
8. Add the index to the element’s text.
Use the append() method to add the value of i to the element’s HTML. This way you can tell which element is which.
Chapter 5: Improving Usability with jQuery
In This Chapter
Working with scroll bars
Building a sorting mechanism
Managing selectable items
Using the dialog tool
Creating an accordion page
Building a tab-based interface
The jQuery UI adds some really great capabilities to your Web pages. Some of the most interesting tools are widgets, which are user interface elements not supplied in standard HTML. Some of these elements supplement HTML by providing easier input options. For example, it can be quite difficult to get the user to enter a date in a predictable manner. The datepicker widget provides an easy-to-use calendar for picking dates. The interface is easy for the programmer to add and makes it hard for the user to enter the date incorrectly. Another important class of tools provided by the jQuery UI helps manage complex pages by hiding content until it is needed.
Multi-element Designs
Handling page complexity has been a constant issue in Web development. As a page gets longer and more complex, navigating the page becomes more difficult. The early versions of HTML had few solutions to this problem. The use of frames was popular for a time, because it allows the programmer to place navigation information in one frame and content in another. However, frames added additional usability problems and have fallen from favor. Dynamic HTML and AJAX seem like perfect replacement technologies, but they can be difficult