Using the JQuery User Interface (UI)

  1. First go to the JQuery Download Page http://jqueryui.com/download
  2. Download the zip, upload it to your site and then extract it
  3. Three folders will be created (css, development-bundle, js)
  4. Then write code that loads in Files you need
  5. The following code shows how the tab function works (displays different content in a div depending on what div is clicked)

    <html>
    < head>
    < link type="text/css" href="css/smoothness/jquery-ui-1.7.3.custom.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.7.3.custom.min.js"></script>
    <script type="text/javascript">
    $(function(){
    $('#tabs').tabs();
    });
    </script>
    </head>
    <body>
    <h2 class="demoHeaders">Tabs</h2>
    <div id="tabs">
    <ul>
    <li> <a href="#tabs-1">First</a></li>
    <li> <a href="#tabs-2">Second</a></li>
    <li> <a href="#tabs-3">Third</a></li>
    </ul>
    <div id="tabs-1">This is what will come out when you click tab 1</div>
    <div id="tabs-2">This is what will come out when you click tab 2</div>
    <div id="tabs-3">This is what will come out when you click tab 3.</div>
    </div>
    </body>
    </html>
Example of Above Code

Tabs

This is what will come out when you click tab 1
This is what will come out when you click tab 2
This is what will come out when you click tab 3.