AJAX

Spry tabs

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Oct 2009

Posts: 50

Reputation: web3 is an unknown quantity at this point

Solved Threads: 0

web3

Offline

Junior Poster in Training

Spry tabs

Nov 11th, 2009

How to make something like spry tabs in dreamweaver with jquery or something. I don't have dreamweaver and i don't want to download a trial.

•

Join Date: May 2007

Posts: 455

Reputation: Atli is on a distinguished road

Solved Threads: 56

Atli

Offline

Posting Pro in Training

Nov 14th, 2009

Hey.

Creating a simple "tabs" system using AJAX is easy enough. Especially if you use jQuery, or something equivalent.
You could just put the contents of all your tabs in separate HTML files, and use AJAX to load them into a <div> in your HTML.

For example, assuming the following structure:

Help with Code Tags

text Syntax (Toggle Plain Text)

root/
  index.html
  tabs.js
  styles.css
  tabs/
    tab1.html
    tab2.html
    tab3.html

You could simply do:

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<!DOCTYPE html>
<html>
    <head>
        <title>AJAX Tabs Example</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="Stylesheet" type="text/css" href="styles.css">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="tabs.js"></script>
    </head>
    <body>
        <div id="TabContainer">
            <ul id="TabMenu">
                <li onclick="SwitchTab('tab1');">Tab 1</li>
                <li onclick="SwitchTab('tab2');">Tab 2</li>
                <li onclick="SwitchTab('tab3');">Tab 3</li>
            </ul>
            <div id="TabContents">Loading...</div>
        </div>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <title>AJAX Tabs Example</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="Stylesheet" type="text/css" href="styles.css">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="tabs.js"></script>
    </head>
    <body>
        <div id="TabContainer">
            <ul id="TabMenu">
                <li onclick="SwitchTab('tab1');">Tab 1</li>
                <li onclick="SwitchTab('tab2');">Tab 2</li>
                <li onclick="SwitchTab('tab3');">Tab 3</li>
            </ul>
            <div id="TabContents">Loading...</div>
        </div>
    </body>
</html>

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
/**
 * File: tabs.js
 */
$(document).ready(function()
{
    // When the page loads, load the first tab.
    SwitchTab('tab1');
});
function SwitchTab(tabName)
{
    // Put a Loading message in the TabContents div
    $('#TabContents').html('Loading...');
 
    // Create the URL to the tab's HTML page.
    var url = 'tabs/' + tabName + ".html";
 
    // Fire of an AJAX query to get the tab HTML
    $.get(url, null, function(data){
        // Change the contents of the TabContents div to the returned HTML
        $('#TabContents').html(data);
    }, 'html');
}
/**
 * File: tabs.js
 */
$(document).ready(function()
{
    // When the page loads, load the first tab.
    SwitchTab('tab1');
});
function SwitchTab(tabName)
{
    // Put a Loading message in the TabContents div
    $('#TabContents').html('Loading...');

    // Create the URL to the tab's HTML page.
    var url = 'tabs/' + tabName + ".html";

    // Fire of an AJAX query to get the tab HTML
    $.get(url, null, function(data){
        // Change the contents of the TabContents div to the returned HTML
        $('#TabContents').html(data);
    }, 'html');
}

And to make it pretty: (And I use that term very lightly)

 Help with Code Tags 
 css Syntax (Toggle Plain Text) 
/**
 * File: styles.css
 */
root { 
    display: block;
    font-size: 1.5em;
    font-family: Verdana, Arial, Sans;
}
#TabContainer {
    width: 550px;
    border: solid 1px #000000;
    margin: 15px auto;
}
#TabMenu {
    display: block;
    height: 25px;
    margin: 0;
    padding: 0;
    background-color: #bfbfbf;
    border-bottom: solid 1px #000000;
}
#TabMenu li {
    display: block;
    float: left;
    min-width: 50px;
    height: 25px;
    padding: 0 3px;
    background-color: #dfdfdf;
    border-right: solid 1px #333333;
    line-height: 25px;
    text-decoration: underline;
    cursor: pointer;
}
#TabMenu li:hover {
    background-color: #efefef;
}
#TabContents {
    clear: both;
    padding: 5px;
}
/**
 * File: styles.css
 */
root { 
    display: block;
    font-size: 1.5em;
    font-family: Verdana, Arial, Sans;
}
#TabContainer {
    width: 550px;
    border: solid 1px #000000;
    margin: 15px auto;
}
#TabMenu {
    display: block;
    height: 25px;
    margin: 0;
    padding: 0;
    background-color: #bfbfbf;
    border-bottom: solid 1px #000000;
}
#TabMenu li {
    display: block;
    float: left;
    min-width: 50px;
    height: 25px;
    padding: 0 3px;
    background-color: #dfdfdf;
    border-right: solid 1px #333333;
    line-height: 25px;
    text-decoration: underline;
    cursor: pointer;
}
#TabMenu li:hover {
    background-color: #efefef;
}
#TabContents {
    clear: both;
    padding: 5px;
}

Hope that helps.