<!doctype html>
<html lang="en">
<head>
<meta charset="gb2312">
<title>jQuery选项卡Tabslet插件 - 网页模板</title>
<!-- MODERNIZR -->
<script type="text/javascript" src="javascripts/vendor/modernizr.custom.js"></script>
<!-- STYLES -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="stylesheets/reset.css">
<link rel="stylesheet" type="text/css" href="stylesheets/typography.css">
<link rel="stylesheet" type="text/css" href="stylesheets/styles.css">
<link rel="stylesheet" type="text/css" href="stylesheets/github.css">
</head>
<!--[if lt IE 7]> <body class="ie ie6 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 7]> <body class="ie ie7 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 8]> <body class="ie ie8 lte9 lte8"> <![endif]-->
<!--[if IE 9]> <body class="ie ie9 lte9"> <![endif]-->
<!--[if gt IE 9]> <body class="ie"> <![endif]-->
<!--[if !IE]><!--> <body> <!--<![endif]-->
<div id="wrapper">
<!-- HEADER ends -->
<!-- MAIN CONTAINER -->
<div id="body_wrapper">
<!-- CONTENT -->
<section>
<!-- CONTENT BLOCK -->
<article>
<h2>Default</h2>
<pre data-language="javascript">
$('.tabs').tabslet();
</pre>
<div class='tabs tabs_default'>
<ul class='horizontal'>
<li><a href="#tab-1">information</a></li>
<li><a href="#tab-2">tab</a></li>
<li><a href="#tab-3">tab</a></li>
</ul>
<div id='tab-1'><h3>This is the default tab functionality.</h3></div>
<div id='tab-2'><h3>Tab 2</h3></div>
<div id='tab-3'><h3>Tab 3</h3></div>
</div>
</article>
<article>
<h2>Hover</h2>
<pre data-language="javascript">
$('.tabs').tabslet({
mouseevent: 'hover',
attribute: 'href',
animation: false
});
</pre>
<div class='tabs tabs_hover'>
<ul class='horizontal'>
<li><a href="#tab-1">information</a></li>
<li><a href="#tab-2">tab</a></li>
<li><a href="#tab-3">tab</a></li>
</ul>
<div id='tab-1'><h3>Tabs change on mouse over...</h3></div>
<div id='tab-2'><h3>Tab 2</h3></div>
<div id='tab-3'><h3>Tab 3</h3></div>
</div>
</article>
<article id="animation">
<h2>Animation</h2>
<pre data-language="javascript">
$('.tabs').tabslet({
mouseevent: 'click',
attribute: 'href',
animation: true
});
</pre>
<div class='tabs tabs_animate'>
<ul class='horizontal'>
<li><a href="#tab-1">information</a></li>
<li><a href="#tab-2">tab</a></li>
<li><a href="#tab-3">tab</a></li>
</ul>
<div id='tab-1'><h3>Change the tab to see that there is an animation.</h3></div>
<div id='tab-2'><h3>Tab 2</h3></div>
<div id='tab-3'><h3>Tab 3</h3></div>
</div>
</article>
<article id="rotation">
<h2>Rotation</h2>
<pre data-language="javascript">
$('.tabs').tabslet({
autorotate: true,
delay: 6000
});
</pre>
<div class='tabs tabs_rotate'>
<ul class='horizontal'>
<li><a href="#tab-1">information</a></li>
<li><a href="#tab-2">tab</a></li>
<li><a href="#tab-3">tab</a></li>
</ul>
<div id='tab-1'><h3>It's alive!</h3></div>
<div id='tab-2'><h3>It's alive!!</h3></div>
<div id='tab-3'><h3>It's alive!!!</h3></div>
</div>
</article>
<article id="controls">
<h2>Controls</h2>
<pre data-language="javascript">
$('.tabs').tabslet({
controls: {
prev: '.prev',
next: '.next'
}
});
</pre>
<div class='tabs tabs_controls'>
<a class="prev">previous</a>
<a class="next">next</a>
<span class='clear'></span>
<ul class='horizontal'>
<li><a href="#tab-1">information</a></li>
<li><a href="#tab-2">tab</a></li>
<li><a href="#tab-3">tab</a></li>
</ul>
<div id='tab-1'><h3>Tab 1</h3></div>
<div id='tab-2'><h3>Tab 2</h3></div>
<div id='tab-3'><h3>Tab 3</h3></div>
</div>
</article>
<!-- CONTENT BLOCK ends -->
</section>
<!-- CONTENT ends-->
<h3 id="custom_event">Custom Events</h3>
<section>
<!-- CONTENT BLOCK -->
<article>
<h2>Custom event "_before"</h2>
<pre data-language="javascript">
$('.before_event').tabslet();
$('.before_event').on("_before", function() {
// do stuff here
});
</pre>
<div class='tabs before_event'>
<ul class='horizontal'>
<li><a href="#tab-1">information</a></li>
<li><a href="#tab-2">tab</a></li>
<li><a href="#tab-3">tab</a></li>
</ul>
<div id='tab-1'><h3>An alert message before the tab change...</h3></div>
<div id='tab-2'><h3>TAB 2</h3></div>
<div id='tab-3'><h3>TAB 3</h3></div>
</div>
</article>
<article>
<h2>Custom event "_after"</h2>
<pre data-language="javascript">
$('.after_event').tabslet({
animation: true
});
$('.after_event').on("_after", function() {
// do stuff here
});
</pre>
<div class='tabs after_event'>
<ul class='horizontal'>
<li><a href="#tab-1">information</a></li>
<li><a href="#tab-2">tab</a></li>
<li><a href="#tab-3">tab</a></li>
</ul>
<div id='tab-1'><h3>An alert message is coming after the animation...</h3></div>
<div id='tab-2'><h3>TAB 2</h3></div>
<div id='tab-3'><h3>TAB 3</h3></div>
</div>
</article>
</section>
<!-- CONTENT ends-->
<h3>Use of data attribute to load</h3>
<section>
<!-- CONTENT BLOCK -->
<article>
<h2>The attribute "data-toggle"</h2>
<pre data-language="javascript">
<div data-toggle="tabslet"></div>
</pre>
<div class='tabs' data-toggle="tabslet">
<ul class='horizontal'>
<li><a href="#tab-1">information</a></li>
<li><a href="#tab-2">tab</a></li>
<li><a href="#tab-3">tab</a></li>
</ul>
<div id='tab-1'><h3>Just include the plugin and add the data attribute to your html tag!</h3></div>
<div id='tab-2'><h3>TAB 2</h3></div>
<div id='tab-3'><h3>TAB 3</h3></div>
</div>
</article>
</section>
</div>
<!-- MAIN CONTAINER ends -->
</div>
<!-- JQuery -->
<script src="javascripts/vendor/jquery-1.9.1.min.js"></script>
<!-- JS -->
<script type="text/javascript" src="javascripts/vendor/waypoints.min.js"></script>
<script type="text/javascript" src="javascripts/vendor/waypoints-sticky.min.js"></script>
<script type="text/javascript" src="javascripts/vendor/jquery.tabslet.min.js"></script>
<script type="text/javascript" src="javascripts/vendor/rainbow-custom.min.js"></script>
<script type="text/javascript" src="javascripts/vendor/jquery.anchor.js"></script>
<script src="javascripts/initializers.js"></script>
<!-- JS ends -->
<div style="text-align:center;clear:both">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
jQuery选项卡Tabslet插件.zip
版权申诉
101 浏览量
2022-11-22
17:16:13
上传
评论
收藏 143KB ZIP 举报
jQuery选项卡Tabslet插件.zip （17个子文件） 
jQuery选项卡Tabslet插件 
jQuery选项卡Tabslet插件.jpg 25KB jiaoben1889 javascripts vendor 
jquery.tabslet.test.js 560B jquery.anchor.js 971B modernizr.custom.js 9KB jquery.tabslet.js 3KB waypoints.min.js 8KB jquery-1.9.1.min.js 90KB jquery.tabslet.min.js 2KB waypoints-sticky.min.js 1KB rainbow-custom.min.js 5KB jquery-1.9.1.js 262KB initializers.js 728B
index.html 7KB stylesheets typography.css 6KB github.css 1KB reset.css 3KB styles.css 5KB资源评论
