HOME

5h-3LL 1.0
DIR: /srv/http/adent.cz/cmsmadesimple.adent.cz/modules/jQuery/libraries/plugins/tabs/example
/srv/http/adent.cz/cmsmadesimple.adent.cz/modules/jQuery/libraries/plugins/tabs/example/
Current File : /srv/http/adent.cz/cmsmadesimple.adent.cz/modules/jQuery/libraries/plugins/tabs/example/index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="Content-Style-Type" content="text/css">
        <meta http-equiv="Content-Script-Type" content="text/javascript">

        <title>Tabs - jQuery plugin for accessible, unobtrusive tabs</title>

        <script src="jquery-1.1.3.1.pack.js" type="text/javascript"></script>
        <script src="jquery.history_remote.pack.js" type="text/javascript"></script>
        <script src="jquery.tabs.pack.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function() {

                $('#container-1').tabs();
                $('#container-2').tabs(2);
                $('#container-3').tabs({ fxSlide: true });
                $('#container-4').tabs({ fxFade: true, fxSpeed: 'fast' });
                $('#container-5').tabs({ fxSlide: true, fxFade: true, fxSpeed: 'normal' });
                $('#container-6').tabs({
                    fxFade: true,
                    fxSpeed: 'fast',
                    onClick: function() {
                        alert('onClick');
                    },
                    onHide: function() {
                        alert('onHide');
                    },
                    onShow: function() {
                        alert('onShow');
                    }
                });
                $('#container-7').tabs({ fxAutoHeight: true });
                $('#container-8').tabs({ fxShow: { height: 'show', opacity: 'show' }, fxSpeed: 'normal' });
                $('#container-9').tabs({ remote: true });
                $('#container-10').tabs();
                $('#container-11').tabs({ disabled: [3] });

                $('<p><a href="#">Disable third tab<\/a><\/p>').prependTo('#fragment-28').find('a').click(function() {
                    $(this).parents('div').eq(1).disableTab(3);
                    return false;
                });
                $('<p><a href="#">Activate third tab<\/a><\/p>').prependTo('#fragment-28').find('a').click(function() {
                    $(this).parents('div').eq(1).triggerTab(3);
                    return false;
                });
                $('<p><a href="#">Enable third tab<\/a><\/p>').prependTo('#fragment-28').find('a').click(function() {
                    $(this).parents('div').eq(1).enableTab(3);
                    return false;
                });

            });
        </script>

        <link rel="stylesheet" href="jquery.tabs.css" type="text/css" media="print, projection, screen">
        <!-- Additional IE/Win specific style sheet (Conditional Comments) -->
        <!--[if lte IE 7]>
        <link rel="stylesheet" href="jquery.tabs-ie.css" type="text/css" media="projection, screen">
        <![endif]-->
        <style type="text/css" media="screen, projection">

            /* Not required for Tabs, just to make this demo look better... */

            body {
                font-size: 16px; /* @ EOMB */
            }
            * html body {
                font-size: 100%; /* @ IE */
            }
            body * {
                font-size: 87.5%;
                font-family: "Trebuchet MS", Trebuchet, Verdana, Helvetica, Arial, sans-serif;
            }
            body * * {
                font-size: 100%;
            }
            h1 {
                margin: 1em 0 1.5em;
                font-size: 18px;
            }
            h2 {
                margin: 2em 0 1.5em;
                font-size: 16px;
            }
            p {
                margin: 0;
            }
            pre, pre+p, p+p {
                margin: 1em 0 0;
            }
            code {
                font-family: "Courier New", Courier, monospace;
            }
        </style>
    </head>
    <body>
        <h1>Tabs - <a href="http://jquery.com">jQuery</a> plugin for accessible, unobtrusive tabs</h1>
        
        <p>
            <strong><a href="http://stilbuero.de/tabs/">Read more about it.</a></strong>
            To enable history support for Tabs I use my <a href="http://stilbuero.de/jquery/history/index.html">History/Remote</a> plugin.
        </p>
        <p>
            <strong><a href="jquery.tabs.zip">Download package</a></strong>
        </p>

        <h2>Simple Tabs</h2>

        <div id="container-1">
            <ul>
                <li><a href="#fragment-1"><span>One</span></a></li>
                <li><a href="#fragment-2"><span>Two</span></a></li>
                <li><a href="#fragment-3"><span>Tabs are flexible again</span></a></li>
            </ul>
            <div id="fragment-1">
                <p>First tab is active by default:</p>
                <pre><code>$(&#039;#container&#039;).tabs();</code></pre>
            </div>
            <div id="fragment-2">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </div>
            <div id="fragment-3">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </div>
        </div>

        <h2>Start With Custom Tab</h2>

        <div id="container-2">
            <ul>
                <li><a href="#fragment-4"><span>One</span></a></li>
                <li><a href="#fragment-5"><span>Two</span></a></li>
                <li><a href="#fragment-6"><span>Three</span></a></li>
            </ul>
            <div id="fragment-4">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </div>
            <div id="fragment-5">
                <p>Second tab is active:</p>
                <pre><code>$(&#039;#container&#039;).tabs(2);</code></pre>
                <p>
                    Two alternative ways to specify the active tab will overrule this argument. First a li element
                    (representing one single tab) belonging to the selected tab class, e.g. set the selected tab
                    class (default: "tabs-selected", see option selectedClass) for one of the unordered li elements
                    in the HTML source. In addition if a fragment identifier/hash in the URL of the page refers
                    to the id of a tab container of a tab interface the corresponding tab will  be activated and both
                    the initial argument as well as an eventually declared class attribute will be overruled.
                </p>
            </div>
            <div id="fragment-6">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </div>
        </div>

        <h2>Slide Effect</h2>

        <div id="container-3">
            <ul>
                <li><a href="#fragment-7"><span>One</span></a></li>
                <li><a href="#fragment-8"><span>Two</span></a></li>
                <li><a href="#fragment-9"><span>Three</span></a></li>
            </ul>
            <div id="fragment-7">
                <p>
                    Use a slide effect to switch tabs.
                    You can optionally specify the speed for the animation with the option <code>fxSpeed: value</code>.
                    The value is either a string of one of the predefined speeds in jQuery (<code>slow</code>,
                    <code>normal</code>, <code>fast</code>) or an integer value specifying the duration for the animation
                    in milliseconds. If omitted it defaults to <code>normal</code>.
                </p>
                <pre><code>$(&#039;#container&#039;).tabs({ fxSlide: true });</code></pre>
            </div>
            <div id="fragment-8">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </div>
            <div id="fragment-9">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </div>
        </div>

        <h2>Fade Effect</h2>

        <div id="container-4">
            <ul>
                <li><a href="#fragment-10"><span>One</span></a></li>
                <li><a href="#fragment-11"><span>Two</span></a></li>
                <li><a href="#fragment-12"><span>Three</span></a></li>
            </ul>
            <div id="fragment-10">
                <p>
                    Use a fade effect to switch tabs.
                    You can optionally specify the speed for the animation with the option <code>fxSpeed: value</code>.
                    The value is either a string of one of the predefined speeds in jQuery (<code>slow</code>,
                    <code>normal</code>, <code>fast</code>) or an integer value specifying the duration for the animation
                    in milliseconds. If omitted it defaults to <code>normal</code>.
                </p>
                <pre><code>$(&#039;#container&#039;).tabs({ fxFade: true, fxSpeed: 'fast' });</code></pre>
            </div>
            <div id="fragment-11">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </div>
            <div id="fragment-12">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </div>
        </div>

        <h2>Slide and Fade Effect Combined</h2>

        <div id="container-5">
            <ul>
                <li><a href="#fragment-13"><span>One</span></a></li>
                <li><a href="#fragment-14"><span>Two</span></a></li>
                <li><a href="#fragment-15"><span>Three</span></a></li>
            </ul>
            <div id="fragment-13">
                <p>Use a combined slide and fade effect to switch tabs:</p>
                <pre><code>$(&#039;#container&#039;).tabs({ fxSlide: true, fxFade: true, fxSpeed: 'fast' });</code></pre>
            </div>
            <div id="fragment-14">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </div>
            <div id="fragment-15">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </div>
        </div>

        <h2>Callbacks</h2>

        <div id="container-6">
            <ul>
                <li><a href="#fragment-16"><span>One</span></a></li>
                <li><a href="#fragment-17"><span>Two</span></a></li>
                <li><a href="#fragment-18"><span>Three</span></a></li>
            </ul>
            <div id="fragment-16">
                <p>
                    Define callback functions that are invoked at different points in time during the tab switch process.
                    These functions are invoked with three arguments: the first one being the clicked tab (the
                    <code>a</code> element), the second one being the <code>div</code> element that holds the content of
                    the clicked tab and the third one being the <code>div</code> element belonging to the tab that gets hidden.
                    <br>
                    If the onClick callback returns false, the tab switch is canceled. This is especially useful if switching
                    tabs requires form validation before for example.
                </p>
                <pre><code>$(&#039;#container&#039;).tabs({
    fxFade: true,
    fxSpeed: 'fast',
    onClick: function() {
        alert('onClick');
    },
    onHide: function() {
        alert('onHide');
    },
    onShow: function() {
        alert('onShow');
    }
});</code></pre>
            </div>
            <div id="fragment-17">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </div>
            <div id="fragment-18">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </div>
        </div>

        <h2>Automatic height</h2>

        <div id="container-7">
            <ul>
                <li><a href="#fragment-19"><span>One</span></a></li>
                <li><a href="#fragment-20"><span>Two</span></a></li>
                <li><a href="#fragment-21"><span>Three</span></a></li>
            </ul>
            <div id="fragment-19">
                <p>Adjust height of all tabs to the largest:</p>
                <pre><code>$(&#039;#container&#039;).tabs({ fxAutoHeight: true });</code></pre>
            </div>
            <div id="fragment-20">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </div>
            <div id="fragment-21">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </div>
        </div>

        <h2>Custom animation</h2>

        <div id="container-8">
            <ul>
                <li><a href="#fragment-22"><span>One</span></a></li>
                <li><a href="#fragment-23"><span>Two</span></a></li>
                <li><a href="#fragment-24"><span>Three</span></a></li>
            </ul>
            <div id="fragment-22">
                <p>Define your own custom animation:</p>
                <pre><code>$(&#039;#container&#039;).tabs({ fxShow: { height: &#039;show&#039;, opacity: &#039;show&#039; } });</code></pre>
            </div>
            <div id="fragment-23">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </div>
            <div id="fragment-24">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </div>
        </div>

        <h2>Ajax tabs</h2>

        <div id="container-9">
            <ul>
                <li><a href="ahah_1.html"><span>One</span></a></li>
                <li><a href="ahah_2.html"><span>Two</span></a></li>
                <li><a href="ahah_3.html"><span>Three</span></a></li>
            </ul>
        </div>

        <h2>Custom <abbr>HTML</abbr> structure</h2>

        <div id="container-10">
            <div>
                <ul class="tabs-nav">
                    <li><a href="#fragment-25"><span>One</span></a></li>
                    <li><a href="#fragment-26"><span>Two</span></a></li>
                    <li><a href="#fragment-27"><span>Three</span></a></li>
                </ul>
            </div>
            <div>
                <div id="fragment-25" class="tabs-container">
                    <p>
                        If some <abbr>HTML</abbr> structure is required that differs from the default one, attach the classes
                        <code>tabs-nav</code> to the unordered list, respectively <code>tabs-container</code> to each container
                        and let the plugin automatically find the required elements by class.
                    </p>
                </div>
                <div id="fragment-26" class="tabs-container">
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                </div>
                <div id="fragment-27" class="tabs-container">
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                </div>
            </div>
        </div>

        <h2>Triggering, disabling, enabling Tabs</h2>
        <div id="container-11">
            <ul class="tabs-nav">
                <li><a href="#fragment-28"><span>One</span></a></li>
                <li><a href="#fragment-29"><span>Two</span></a></li>
                <li><a href="#fragment-30"><span>Three</span></a></li>
            </ul>
            <div id="fragment-28">
                <pre><code>$(&#039;#container&#039;).enableTab(3); // enables third tab
$(&#039;#container&#039;).triggerTab(3); // triggers third tab
$(&#039;#container&#039;).disableTab(3); // disables third tab</code></pre>
                <p>
                    One or more tabs can also be disabled immediatly by simply setting the disabling class for the li element
                    representing that particular tab or by using the <code>disabled</code> option.
                </p>
                <pre><code>&lt;li class=&quot;tabs-disabled&quot;&gt&#8230;&lt;/li&gt;

$(&#039;#container&#039;).tabs({ disabled: [2, 3] });</code></pre>
            </div>
            <div id="fragment-29">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </div>
            <div id="fragment-30">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </div>
        </div>

        <h2>Changelog (since release of Version 2)</h2>

        <ul>
            <li>
                2.7.4 - Maintenance release: Compatibility with jQuery 1.1.3; fixed occasionally occuring flicker in Firefox for tabs that don't use animation for switching; fixed ClearType issue in IE 7 for tabs that don't use animation for switching.
            </li>
            <li>
                2.7.3 - Changed CSS so that tabs become flexible in width/height again. <strong>This requires an extra <code>span</code> element inside a tab's anchor element.</strong>
            </li>
            
            <li>
                2.7.2 - New method <code>activeTab</code> to retrieve currently selected tab. Usage: <code>var index = $('#container').activeTab(); // => 1</code>
            </li>
            <li>
                2.7.1 - Added option <code>spinner</code>, which lets you specify the text/image to be shown in a tab while loading remote content. Pass an empty string to entirely disable this behavior. Fixed bug, that allowed the onClick handler to be fired even for disabled and already selected tabs.
            </li>
            <li>
                2.7 - A few frequently requested enhancements and bugfixes. <a href="/2007/04/07/tabs-27-flexibility/">See here for more information.</a>
            </li>
            <li>
                2.6 - Added option for loading tab content via Ajax: <code>remote: true</code></li>
            <li>
                2.5.2 - Avoid flicker (in Firefox) for simple tab switching without animation.
            </li>
            <li>
                2.5.1 - Added support for hiding tab content before tabs initialization to avoid flash of content, fixed little flaw in history support, jQuery 1.1 ready.</li>
            <li>
                2.5 - Added support for disabling/enabling tabs. Disabling tab(s): via option like <code>disabled: [2, 3]</code>
                immediatly, else via <code>$(&#8230;).disableTab(3);</code>. Enabling: <code>$(&#8230;)enableTab(3);</code>.
                A disabled tab is greyed out (using a configurable <abbr title="Cascading Style Sheets">CSS</abbr> class,
                option <code>disabledClass</code>) and isn't clickable.
            </li>
            <li>
                2.4 - New option: <code>bookmarkable</code>, extended callback system: <code>onClick</code>, <code>onHide</code>,
                <code>onShow</code> (<code>onShow</code> replaces former <code>callback</code> option)
            </li>
            <li>
                2.2 - Improved <code>fxAutoHeight</code> option to take window and text resizing into account (was
                <code>fxAutoheight</code>)
            </li>
            <li>2.1 - <a href="http://www.stilbuero.de/2006/11/05/tabs-version-2/">Tabs version 2 released</a></li>
        </ul>

        <h2>Tested with</h2>

        <ul>
            <li>Firefox 2.0</li>
            <li>Firefox 1.5</li>
            <li>Firefox 1.0</li>
            <li>Opera 9.01</li>
            <li>Opera 8.52</li>
            <li>Safari 2.0.4</li>
            <li><abbr title="Internet Explorer">IE</abbr> 7</li>
            <li><abbr title="Internet Explorer">IE</abbr> 6</li>
        </ul>

    </body>
</html>