基于jQuery實現Tabslet選項卡插件



33 128 43



特效描述:基于jQuery實現 Tabslet 選項卡插件,基于jQuery實現Tabslet選項卡插件

代碼結構

1. 引入CSS

<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">

2. 引入JS

<script type="text/javascript" src="javascripts/vendor/modernizr.custom.js"></script>
<script src="javascripts/vendor/jquery-1.9.1.min.js"></script>
<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>

3. HTML代碼

                               <!--<![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 -->
	<!-- JS -->
	<!-- JS ends -->
<div style="text-align:center;clear:both">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動選項卡 滑動切換 滾動切換 滾動條切換 彈出層拖動 滑動手風琴 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 滑動星星打分 漸隱切換 淡出淡進 淡出 淡進 其他 導航切換 菜單切換 文字提示框 提示文字 文字淡出淡進 文字淡出 文字淡進 鼠標滑過 鼠標懸停 跟隨鼠標移動
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子