Updated Mar 08, 2007 by racklin
Labels:	Phase-Implementation

jQueryTabsExtension

jQuery Tabs plugins Extension Usage Example.

Introduction

Here is a jQuery offical plugin that lets you create JavaScript tabs very easily. once you assembled the HTML with just one line of JavaScript code. See: http://stilbuero.de/2006/05/13/accessible-unobtrusive-javascript-tabs-with-jquery/

With jQWebExt Extension, lets you assembled the HTML with no javascipt code, just setup options and it work.

Details and Options

By default, your table with id='tabs-container' will auto became Javascript tabs.. You can setup options of table id and css to be used with jQWebExt.options.Tabs object. ex:

<script>
    // Use a fade effect to switch tabs:
    jQWebExt.options.Tabs['container-1'] = {fxFade: true, fxSpeed: 'fast'}; 
    // Second tab is active:
    jQWebExt.options.Tabs['container-2'] = 2; 
</script>

Html and Usage

<html>
<head>
    <script src="../src/jquery.pack.js" type="text/javascript"></script>
    <script src="../src/jqwebext.js" type="text/javascript"></script>
    <script src="../src/jqwebext.tabs.js" type="text/javascript"></script>
    <link rel="stylesheet" href="../src/css/tabs.css" type="text/css" media="print, projection, screen" />
</head>
<body>
<div id="tabs-container">
    <ul>
        <li><a href="#section-1" tabindex="1">Section 1</a></li>
        <li><a href="#section-2" tabindex="2">Section 2</a></li>
        <li><a href="#section-3" tabindex="3">Section 3</a></li>
    </ul>
    <div id="section-1">
        …
    </div>
    <div id="section-2">
        …
    </div>
    <div id="section-3">
        …
    </div>
</div>
</body>
</html>

Source

Source of jqwebext.tabs.js. Just sample for Javascript extension programmer. Web desinger no need to know about this source.

// include jQuery tabs js
jQWebExt.require('plugins/jquery.tabs.pack.js');

jQWebExt.Tabs = function(opt) {
    for (var tabsId in opt) {    
        var qStr = '#'+tabsId;
        jQuery(qStr).tabs(opt[tabsId]);
    }
};

// Register Zebra Table Plugin
jQWebExt.register('Tabs' ,  {
        'tabs-container': 1
});

DEMO

http://jqwebext.googlepages.com/test-tabs.html