0

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.

2
Contributors
1
Reply
2
Views
7 Years
Discussion Span
Last Post by Atli
1

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:

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

You could simply do:

<!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>
/**
 * 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)

/**
 * 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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.