Member Avatar for web3

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
  • 132 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by Atli
Member Avatar for Atli

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.