HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [300]
2. Download the theme.
The themeRoller has a download button. Click this when you’re ready to download your theme.
3. Pick the elements you want.
When you’re first starting on a project, you’ll probably pick all the elements. If you find that the page is loading too slowly, you might build a smaller version that contains only those elements you need. For now, pick everything.
4. Download the file.
After you’ve chosen the elements you want, you can download them in a zip file.
5. Install the contents of the zip file to your working directory.
The zip file contains a number of files and directories. Place the entire contents of the css and js directories in the directory where your Web pages will be (often the public_html or htdocs directory). You do not need to copy the development-bundle directory or the index.html page.
6. If you install multiple themes, copy only the theme information from additional themes.
All themes use the same JavaScript. Only the CSS (and related image files) changes. If you want to have multiple themes in your project, simply copy the CSS contents. Each theme will be a different subdirectory of the main CSS directory.
7. Link to the CSS files.
Use the standard link technique to link to the CSS files created by jQuery UI. You can also link to your own CSS files or use internal CSS in addition to the custom CSS. Be sure that you get the path right. Normally, the path looks something like css/themeName/jquery-ui-1.8.1.custom.css.
8. Link to the JavaScript files.
The jQuery UI toolkit also installs two JavaScript files: the standard jQuery library and the jQuery UI library. By default, both of these files are installed in the js directory.
If something isn’t working right, check your file paths again. Almost always, when the jQuery UI stuff isn’t working right, it’s because you haven’t linked to all the right files. Also, note that the CSS files created by jQuery UI also include images. Make sure that your theme has an associated images directory, or your project may not work correctly.
Writing the program
Here’s how you go about putting the program together:
1. Create a basic HTML document.
The standard document doesn’t have to be anything special. I created one div with the ID dragMe. That’s the div I want to make draggable (but of course you can apply dragging functionality to anything you can select with jQuery).
2. Add the standard jQuery library.
The first script tag imports the standard jQuery library. The UI library requires jQuery to be loaded first.
3. Add a link to the jQuery UI library.
A second script tag imports the jQuery UI library. (See the following section on downloading and installing jQuery for details on how to obtain this library.)
4. Create an initialization function.
Use the standard jQuery techniques to build an initialization function for your page (as usual, I call mine init()).
5. Build a draggable node.
Use standard jQuery selection techniques to isolate the element(s) you want to make draggable. Use the draggable() method to make the element draggable.
6. Test your application.
Believe it or not, that’s all there is to it. As long as everything’s set up properly, your element will be draggable! The user can drag it with the mouse and place it anywhere on the screen.
Resizing on a Theme
The next example demonstrates two important ideas in the jQuery UI package:
♦ It shows an element that is resizable. The user can drag on the bottom or right border to change the size of the element. Making an element resizable is very similar to making it draggable.
♦ It shows the use of a theme. Take a look at Figure 4-5 to see what’s going on.
You can see from Figure 4-5 that the page has a definite visual style. The elements have distinctive fonts and backgrounds, and the headers are in a particular visual style. While there’s nothing