JQuery tabs标签页代码 « 郭爽的网页设计资料

JQuery tabs标签页代码

</p> <p><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"></p> <p><html lang="en"></p> <p> <head></p> <p> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></p> <p> <meta http-equiv="Content-Style-Type" content="text/css"></p> <p> <meta http-equiv="Content-Script-Type" content="text/javascript"></p> <link rel="stylesheet" href="ui.tabs.css" type="text/css" media="print, projection, screen"> <style type="text/css" media="screen, projection"> <p> /* Not required for Tabs, just to make this demo look better... */</p> <p> body, h1, h2 {</p> <p> font-family: "Trebuchet MS", Trebuchet, Verdana, Helvetica, Arial, sans-serif;</p> <p> }</p> <p> h1 {</p> <p> margin: 1em 0 1.5em;</p> <p> font-size: 18px;</p> <p> }</p> <p> h2 {</p> <p> margin: 2em 0 1.5em;</p> <p> font-size: 16px;</p> <p> }</p> <p> p {</p> <p> margin: 0;</p> <p> }</p> <p> pre, pre+p, p+p {</p> <p> margin: 1em 0 0;</p> <p> }</p> <p> code {</p> <p> font-family: "Courier New", Courier, monospace;</p> <p> }</p> </style> <p> <script src="jquery-1.2.1.pack.js" type="text/javascript"></script></p> <p> <script src="ui.tabs.js" type="text/javascript"></script></p> <p> <script type="text/javascript"></p> <p> $(function() {</p> <p> $('#container-1 ul').tabs();</p> <p> $('#container-2 ul').tabs(2);</p> <p> $('#container-3 ul').tabs({ fxSlide: true });</p> <p> $('#container-4 ul').tabs({ fxFade: true, fxSpeed: 'fast' });</p> <p> $('#container-5 ul').tabs({ fxSlide: true, fxFade: true, fxSpeed: 'normal' });</p> <p> $('#container-6 ul').tabs({</p> <p> fxFade: true,</p> <p> fxSpeed: 'fast',</p> <p> click: function() {</p> <p> alert('click callback');</p> <p> },</p> <p> hide: function() {</p> <p> alert('hide callback');</p> <p> },</p> <p> show: function() {</p> <p> alert('show callback');</p> <p> }</p> <p> });</p> <p> $('#container-7 ul').tabs({ fxShow: { height: 'show', opacity: 'show' }, fxSpeed: 'normal' });</p> <p> $('#container-8 ul').tabs({ cache: false });</p> <p> $('#container-9 ul').tabs({ disabled: [3] });</p> <p> $(' <p><a href="#">Remove tab</a></p> <p>').prependTo('#fragment-22').find('a').click(function() {</p> <p> $('#container-9 ul').tabsRemove(4);</p> <p> return false;</p> <p> });</p> <p> $(' <p><a href="#">Add tab</a></p> <p>').prependTo('#fragment-22').find('a').click(function() {</p> <p> $('#container-9 ul').tabsAdd('#new-tab', 'New Tab', 4);</p> <p> return false;</p> <p> });</p> <p> $(' <p><a href="#">Disable third tab</a></p> <p>').prependTo('#fragment-22').find('a').click(function() {</p> <p> $('#container-9 ul').tabsDisable(3);</p> <p> return false;</p> <p> });</p> <p> $(' <p><a href="#">Enable third tab</a></p> <p>').prependTo('#fragment-22').find('a').click(function() {</p> <p> $('#container-9 ul').tabsEnable(3);</p> <p> return false;</p> <p> });</p> <p> $(' <p><a href="#">Click third tab</a></p> <p>').prependTo('#fragment-22').find('a').click(function() {</p> <p> $('#container-9 ul').tabsClick(3);</p> <p> return false;</p> <p> });</p> <p> $(' <p><a href="#">Get selected tab</a></p> <p>').prependTo('#fragment-22').find('a').click(function() {</p> <p> alert( $('#container-9 ul').tabsSelected() );</p> <p> return false;</p> <p> });</p> <p> $('#container-10 ul').tabs({ unselected: true });</p> <p> $('#container-11 ul').tabs({ event: 'mouseover' }).find('a').click(function() {</p> <p> return false;</p> <p> });</p> <p> });</p> <p> </script></p> <p> </head></p> <p> <body></p> <h1><a href="http://ui.jquery.com">jQuery UI</a> Tabs / Tabs 3</h1> <p> <strong><a href="ui.tabs.zip">Download</a></strong></p> <p> <strong><a href="http://docs.jquery.com/UI/Tabs">Documentation</a></strong></p> <p> <strong><a href="http://docs.jquery.com/UI/TabsExtensions">Tabs Extensions</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>Three</span></a></li> </ul> <div id="fragment-1"> <p>First tab is active by default:</p> <pre><code>$('#container').tabs();</code></pre> </p></div> <div id="fragment-2"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div> <div id="fragment-3"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div> </p></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"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div> <div id="fragment-5"> <p>Second tab is active:</p> <pre><code>$('#container').tabs(2);</code></pre> <p> Two alternative ways to specify the active tab will overrule this argument. First a li element</p> <p> (representing one single tab) belonging to the selected tab class, e.g. set the selected tab</p> <p> class (default: “tabs-selected”, see option selectedClass) for one of the unordered li elements</p> <p> in the HTML source. In addition if a fragment identifier/hash in the URL of the page refers</p> <p> to the id of a tab container of a tab interface the corresponding tab will be activated and both</p> <p> the initial argument as well as an eventually declared class attribute will be overruled.</p> </p></div> <div id="fragment-6"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div> </p></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.</p> <p> You can optionally specify the speed for the animation with the option <code>fxSpeed: value</code>.</p> <p> The value is either a string of one of the predefined speeds in jQuery (<code>slow</code>,</p> <p> <code>normal</code>, <code>fast</code>) or an integer value specifying the duration for the animation</p> <p> in milliseconds. If omitted it defaults to <code>normal</code>.</p> <pre><code>$('#container').tabs({ fxSlide: true });</code></pre> </p></div> <div id="fragment-8"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div> <div id="fragment-9"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div> </p></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.</p> <p> You can optionally specify the speed for the animation with the option <code>fxSpeed: value</code>.</p> <p> The value is either a string of one of the predefined speeds in jQuery (<code>slow</code>,</p> <p> <code>normal</code>, <code>fast</code>) or an integer value specifying the duration for the animation</p> <p> in milliseconds. If omitted it defaults to <code>normal</code>.</p> <pre><code>$('#container').tabs({ fxFade: true, fxSpeed: 'fast' });</code></pre> </p></div> <div id="fragment-11"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div> <div id="fragment-12"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div> </p></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>$('#container').tabs({ fxSlide: true, fxFade: true, fxSpeed: 'fast' });</code></pre> </p></div> <div id="fragment-14"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div> <div id="fragment-15"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div> </p></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.</p> <p> These functions are invoked with three arguments: the first one being the clicked tab (the</p> <p> <code>a</code> element), the second one being the <code>div</code> element that holds the content of</p> <p> the clicked tab and the third one being the <code>div</code> element belonging to the tab that gets hidden.</p> <p></p> <p> If the onClick callback returns false, the tab switch is canceled. This is especially useful if switching</p> <p> tabs requires form validation before for example.</p> <pre><code>$('#container').tabs({ click: function() { alert('click callback'); }, hide: function() { alert('hide callback'); }, show: function() { alert('show callback'); } });</code></pre> </p></div> <div id="fragment-17"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div> <div id="fragment-18"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div> </p></div> <h2>Custom animation</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>Define your own custom animation:</p> <pre><code>$('#container').tabs({ fxShow: { height: 'show', opacity: 'show' } });</code></pre> </p></div> <div id="fragment-20"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div> <div id="fragment-21"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div> </p></div> <h2>Ajax tabs</h2> <div id="container-8"> <ul> <li><a href="ahah_1.html" title="Tab one"><span>One</span></a></li> <li><a href="ahah_2.html" title="Tab two"><span>Two</span></a></li> <li><a href="ahah_3.html"><span>Three</span></a></li> </ul></div> <h2>Triggering, Enabling, Disabling, Adding and Removing Tabs</h2> <div id="container-9"> <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"> <pre><code>$('#container').tabsClick(3); // simulate click on 3rd tab $('#container').tabsEnable(3); // enable 3rd tab $('#container').tabsDisable(3); // disable 3rd tab $('#container').tabsAdd('#new-tab', 'New Tab', 4); // add new 4th tab $('#container').tabsRemove(4); // remove 4th tab</code></pre> <p> One or more tabs can also be disabled immediatly by simply setting the disabling class for the <code class="html">li</code> element</p> <p> representing that particular tab or by using the <code>disabled</code> option.</p> <pre><code><li class="ui-tabs-disabled"&gt…</li> $('#container').tabs({ disabled: [2, 3] });</code></pre> </p></div> <div id="fragment-23"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div> <div id="fragment-24"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div> </p></div> <h2>Start with all tabs unselected/allow toggle visibility</h2> <div id="container-10"> <ul> <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 id="fragment-25"> <pre><code>$('#container').tabs({ unselected: true }); // start with all tabs hidden $('#container').tabs({ unselect: true }); // selected tab closes on click</code></pre> <p> Setting <code class="javascript">unselected</code> option to <code class="javascript">true</code> automatically sets <code class="javascript">unselect</code> as well.</p> </p></div> <div id="fragment-26"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div> <div id="fragment-27"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div> </p></div> <h2>Custom event</h2> <div id="container-11"> <ul> <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"> <p>Define mouseover event to switch tabs (or any other reasonable event)</p> <pre><code>$('#container').tabs({ event: 'mouseover' });</code></pre> </p></div> <div id="fragment-29"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div> <div id="fragment-30"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></div> </p></div> <h2>Changelog</h2> <ul> <li>3.0 – release</li> </ul> <h2>Tested with</h2> <ul> <li>Firefox 2</li> <li>Safari 2.0.4</li> <li>Opera 9.24</li> <li><abbr title="Internet Explorer">IE</abbr> 7</li> <li><abbr title="Internet Explorer">IE</abbr> 6</li> </ul> <p> </body></p> <p></html> 显示更多

via http://stilbuero.de/jquery/tabs_3/

This entry was posted on Thursday, January 17th, 2008 at 1:36 pm and is filed under Browsers. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

郭爽的网页设计资料

Meta

Archives

Blogroll