How to View Interactive CSS3 Demos

The CSS3 development-bundle folder on jQuery contains a lot of useful material. One of the first pieces you should look at is the contents of the development-bundle\demos folder, which contains examples of how to use the various jQuery UI features with your theme.

Unfortunately, none of these examples actually use the theme you created unless you modify them to do so. For example, the custom-icons.html example in the development-bundle\demos\accordion folder shows how to perform this task, but doesn’t use your theme by default.

image0.jpg

Fortunately, it’s easy to modify the example so that it does appear with your theme in place. The following procedure tells you how to modify the custom-icons.html example — other examples follow the same pattern.

  1. Remove the existing jQuery, jQuery UI, and style tags.

    You need to remove the general tags shown here for this example.

    <link rel="stylesheet"
     href="../../themes/base/jquery.ui.all.css">
    <script src="../../jquery-1.9.1.js"></script>
    <script src="../../ui/jquery.ui.core.js"></script>
    <script src="../../ui/jquery.ui.widget.js"></script>
    <script src="../../ui/jquery.ui.accordion.js">
    </script>
    <script src="../../ui/jquery.ui.button.js"></script>
    <link rel="stylesheet" href="../demos.css">
  2. Add the updated jQuery, jQuery UI, and style tags shown here.

    Make sure you use the links provided in index.html. Because this example is several layers deep in the hierarchy, you must add ../ for each folder level that the example is below the main level (normally three levels, as shown here).

    <script
     src="../../../js/jquery-1.9.1.js">
    </script>
    <script
     src="../../../js/jquery-ui-1.10.3.custom.js">
    </script>
    <link
     rel="stylesheet"
     href="../../../css/le-frog/jquery-ui-1.10.3.custom.css" />
  3. Reload the page.

    You see the themed output. This is a typical example of what themed output might look like.

    image1.jpg
blog comments powered by Disqus
Advertisement

Inside Dummies.com