Create JavaScript tabs by assembling HTML with just one line of JS code.
原文： http://stilbuero.de/jquery/tabs/#fragment-16
head：
<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>
body:
预览demo1：
code:
<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>$('#container').tabs();</code></pre>
</div>
<div id="fragment-2">
Welcome to www.hotajax.org</div>
<div id="fragment-3">
Welcome to www.hotajax.org</div>
</div>
预览demo2：
code:
<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">
Welcome to www.hotajax.org</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
(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">
Welcome to www.hotajax.orgWelcome to www.hotajax.orgWelcome to www.hotajax.org</div>
</div>
预览demo3：
code:
<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>$('#container').tabs({ fxSlide: true });</code></pre>
</div>
<div id="fragment-8">
welcome to www.hotajax.orgwelcome to www.hotajax.org</div>
<div id="fragment-9">
welcome to www.hotajax.orgwelcome to www.hotajax.orgwelcome to www.hotajax.org</div>
</div>
预览demo4：
code:
<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>$('#container').tabs({ fxFade: true, fxSpeed: 'fast' });</code></pre>
</div>
<div id="fragment-11">
welcome to www.hotajax.orgwelcome to www.hotajax.org</div>
<div id="fragment-12">
welcome to www.hotajax.orgwelcome to www.hotajax.orgwelcome to www.hotajax.org</div>
</div>
预览demo5：
code:
<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>
</div>
<div id="fragment-14">
welcome to www.hotajax.org
welcome to www.hotajax.org
</div>
<div id="fragment-15">
welcome to www.hotajax.org
welcome to www.hotajax.org
welcome to www.hotajax.org
</div>
</div>
预览demo6：
code:
<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>$('#container').tabs({
fxFade: true,
fxSpeed: 'fast',
onClick: function() {
alert('onClick');
},
onHide: function() {
alert('onHide');
},
onShow: function() {
alert('onShow');
}
});</code></pre>
</div>
<div id="fragment-17">
welcome to www.hotajax.orgwelcome to www.hotajax.org</div>
<div id="fragment-18">
welcome to www.hotajax.orgwelcome to www.hotajax.orgwelcome to www.hotajax.org</div>
</div>
预览demo7：
code:
<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>$('#container').tabs({ fxShow: { height: 'show', opacity: 'show' } });</code></pre>
</div>
<div id="fragment-23">
welcome to www.hotajax.orgwelcome to www.hotajax.org</div>
<div id="fragment-24">
welcome to www.hotajax.orgwelcome to www.hotajax.orgwelcome to www.hotajax.org</div>
</div>
预览demo8：
code:
<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>$('#container').tabs({ fxAutoHeight: true });</code></pre>
</div>
<div id="fragment-20">
welcome to www.hotajax.orgwelcome to www.hotajax.org</div>
<div id="fragment-21">
welcome to www.hotajax.orgwelcome to www.hotajax.orgwelcome to www.hotajax.org</div>
</div>
预览demo9：
code:
<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>
预览demo10：
code:
<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">
welcome to www.hotajax.orgwelcome to www.hotajax.org</div>
<div id="fragment-27" class="tabs-container">
welcome to www.hotajax.orgwelcome to www.hotajax.orgwelcome to www.hotajax.org</div>
</div>
</div>
预览demo11：
code:
<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>$('#container').enableTab(3); // enables third tab
$('#container').triggerTab(3); // triggers third tab
$('#container').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><li class="tabs-disabled">…</li>
$('#container').tabs({ disabled: [2, 3] });</code></pre>
</div>
<div id="fragment-29">
welcome to www.hotajax.orgwelcome to www.hotajax.org</div>
<div id="fragment-30">
welcome to www.hotajax.orgwelcome to www.hotajax.orgwelcome to www.hotajax.org</div>
</div>
源文件下载:download
Newer news items:
Older news items:
|
Show/Hide comments
Show/Hide comment form
