FengTab jQuery 选项卡插件 Demo

FengTab 开发前言

FengCMS 创始人刘峰最近学习jQuery,感觉jQuery奥妙无穷,虽然网上有无数优秀的选项卡插件,但是我还是希望能用自己的逻辑来写一个,作为练习。

结果居然写得不错,因此冒昧放到网上来给大家乐呵乐呵。

FengTab 下载

FengTab 迷你版下载 884 字节 FengTab 完整版下载 1.48KB FengTab Demo

FengTab 优点

  1. 1、FengTab 比较小巧,只有一丢丢代码,但是可以实现比较牛逼的功能。
  2. 2、FengTab 可以实现同一个页面多次调用。好像别人的也行哈~
  3. 3、FengTab 有相对比较丰富的参数。好像别人也不少哈~
  4. 4、FengTab 是我学习 jQuery 一个礼拜后写的第一个 jQuery 插件,我很骄傲哈!

FengTab 使用说明

FengTab jQuery 插件,需要 jQuery 1.11.1 或者 jQuery 2.1.1 版本的 jQuery 支持,其他版本我没有测试,应该没有什么太大的问题。

首先,在网页head部分引用jQuery文件

<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>

然后引入 FengTab jQuery 插件

<script src="js/FengTab.min.js" type="text/javascript"></script>

然后创建DOM结构,如我们的示例

<div class="main">
	<ul class="tab">
		<li>标题1</li>
		<li>标题2</li>
		<li>标题3</li>
	</ul>
	<div class="con">
		<div>内容1</div>
		<div>内容2</div>
		<div>内容3</div>
	</div>
</div>
			

然后在DOM结构的下面,写入选项卡参数

<script>
$(".main").FengTab({
	titCell:".tab", 	//选项卡控制盒子
	mainCell:".con", 	//选项卡内容盒子
	defaultIndex:0, 	//默认显示第几个选项卡,第一个是0,第二个是1,以此类推
	trigger:"click", 	//切换方式,click 为点击,mouseover 为移动切换
	titOnClassName:"on", 	//选中选项卡样式
	showtime: 0		//内容切换时间,一般写200即可(单位是毫秒)
});
</script>
			

选项卡参数也可以外置到其他JS里面去,然后调用到网页中来。这是没有问题的。只是需要注意一点,如果是写到外置JS中,需要把控制代码写到闭包中去。也就是说,是等网页加载完成了再执行。

//等待网页加载完成函数
$(function(){
	//选项卡控制参数
	$(".main").FengTab({
		titCell:".tab",
		mainCell: ".con",
		defaultIndex:1,
		trigger:"click",
		titOnClassName:"on",
		showtime:0
	});
	//这里还可以写更多的选项卡控制参数
//关闭
});
			

当然,我们还需要引入CSS。

.tab {
	overflow: hidden;
	width: 498px;
	height: 32px;
	background: #ddd;
	border: 1px solid #ddd;
	cursor: pointer;
}
.tab li {
	float: left;
	width: 100px;
	text-align: center;
	line-height: 32px;
	border-right: 1px solid #fff;
}
.tab li.on {
	background: #fff;
}
.con {
	width: 480px;
	padding: 9px;
	border: 1px solid #ddd;
	border-top: none;
}
			

本CSS部分纯粹只是作为演示,大家可以根据自己的需要任意书写所需要的样式。

FengTab 演示1 鼠标点击切换

内容1
内容2
内容3

FengTab 演示2 鼠标移动切换

内容1
内容2
内容3
版权所有 © FengCMS 地方网络工作室