基于jQuery实现Tabslet选项卡插件



30 116 39



特效描述:基于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

加群请备注:从官网了解到