jquery插件tab——小试牛刀
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
.tab_list li{
list-style:none;
margin:5px;
display:inline;
cursor:pointer;
}
.tab_list .active{
background-color:black;
color:white;
}
</style>
<script>
(function($){
var isShow=false;
$.fn.tab=function(options){
this.opts=$.extend({},$.fn.tab.defaults,options);
this._init();
this.disableArr=[];
};
$.fn.tab.prototype={
_init:function(){
var _this=this;
if($(_this.opts.tabList).length>0){
$(_this.opts.tabList).each(function(index){
$(this).bind(_this.opts.eventType,function(){
if($.inArray(index,_this.disableArr)==-1&&(!isShow)&&!$(this).hasClass(_this.opts.tabActiveClass)){
if(_this.opts.callBackStartEvent){
_this.opts.callBackStartEvent(index);
}
$(_this.opts.tabList).removeClass(_this.opts.tabActiveClass);
$(this).addClass(_this.opts.tabActiveClass);
showContent(index,_this.opts);
}
});
});
}
},
setDisable:function(index){
var _this=this;
if($.inArray(index,this.disableArr)==-1){
this.disableArr.push(index);
$(_this.opts.tabList).eq(index).addClass(_this.opts.tabDisableClass);
}
},
setEnable:function(index){
var _this=this;
var i=$.inArray(index,this.disableArr);
if(i>-1){
this.disableArr.splice(i,1);
$(_this.opts.tabList).eq(index).removeClass(_this.opts.tabDisableClass);
}
},
triggleTab:function(index){
$(this.opts.tabList).eq(index).trigger(this.opts.eventType);
}
}
$.fn.tab.defaults={
tabList:".tab_list li",
contentList:".tab_content",
tabActiveClass:"active",
tabDisableClass:"disable",
eventType:"click",
showType:"show",
showSpeed:200,
callBackStartEvent:null,
callBackStartEvent:null,
callBackShowEvent:null
};
function showContent(index,opts){
isShow=true;
var _this=this;
switch(opts.showType){
case "show":
$(opts.contentList+":visible").hide();
if(opts.callBackHideEvent){
opts.callBackHideEvent(index);
}
$(opts.contentList).eq(index).show();
if(opts.callBackShowEvent){
opts.callBackShowEvent(index);
}
isShow=false;
break;
case "fade":
$(opts.contentList+":visible").fadeOut(opts.showSpeed,function(){
if(opts.callBackHideEvent){
opts.callBackHideEvent(index);
}
$(opts.contentList).eq(index).fadeIn(function(){
if(opts.callBackShowEvent){
opts.callBackShowEvent(index);
}
isShow=false;
});
});
break;
case "slide":
$(opts.contentList+":visible").slideUp(opts.showSpeed,function(){
if(opts.callBackHideEvent){
opts.callBackHideEvent(index);
}
$(opts.contentList).eq(index).slideDown(function(){
if(opts.callBackShowEvent){
opts.callBackShowEvent(index);
}
isShow=false;
});
});
break;
}
}
})(jQuery);
$(function(){
var tab=new $.fn.tab({
tabList:".tab_list li",
contentList:".tab_content",
eventType:"mouseover",
showType:"fade"
});
});
</script>
</head>
<body>
<div class="tab_box">
<ul class="tab_list">
<li class="active">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<div class="sub_box">
<div class="tab_content">
<p>你知道</p>
</div>
<div class="tab_content" style="display:none">
<p>我是</p>
</div>
<div class="tab_content" style="display:none;">
<p>谁么？</p>
</div>
</div>
</div>
</body>
</html>
jquery插件tab——小试牛刀的更多相关文章
- 自写Jquery插件 Tab
原创文章,转载请注明出处,谢谢!https://www.cnblogs.com/GaoAnLee/p/9067017.html 每每看到别人写的Jquery插件,自己也试着学习尝试,终有结果,废话不多 ...
- 自写Jquery插件 Menu
原创文章,转载请注明出处,谢谢!https://www.cnblogs.com/GaoAnLee/p/9067543.html 可以结合我自写的Jquery插件Tab 一起使用哦 上一个整体效果 直接 ...
- 代码简洁的滑动门（tab）jquery插件
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org ...
- jQuery 插件分享-非常优秀的tab插件tabulous- 学徒帮
干货jquery插件分享之tab. tab 选项卡切换,在日常开发中也是一种比较常见的呈现控件,今天这个tab控件效果还是蛮喜欢的,推荐给大家有用到的场景可以试试: tabulous.js A jQu ...
- 封装jQuery插件实现TAB切换
先上效果图: 直接上代码: index.html <!DOCTYPE html> <html lang="en"> <head> <met ...
- 使用jQuery开发tab选项卡插件（可以右键关闭多个标签）
在前一篇“使用jQuery开发tab选项卡插件”的基础上添加了tab标签右键关闭菜单功能,菜单主要包括:关闭当前标签.关闭左侧标签.关闭右侧标签.关闭其他.关闭全部. 一.插件效果 二.实现思路 为w ...
- 使用jQuery开发tab选项卡插件
为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动 ...
- 自己编写jQuery插件之Tab切换
自己编写jQuery插件之 Tabs切换 jquery ui 带有Tabs切换插件,但其css样式太难维护,引用的东西太多,因此就自己写了个. 起初我Html代码架子是这样的: <div cla ...
- BootStrap_04之jQuery插件（导航、轮播）、以及Less
1.列偏移与列排序: ①列偏移:控制列出现的位置,某列偏移后,后序列会随之偏移--只能右偏移: col-lg/md/sm/xs-offset-*; ②列排序:控制某一列的位置,该列可以左(pull)右 ...
随机推荐
- codeforces 702E Analysis of Pathes in Functional Graph 倍增
题目链接 给一个图, 然后给出每条边的权值和一个k值. 让你求出从每个点出发, 走k次能获得的边权的和以及边权的最小值. 用倍增的思想, 求出每个点走一次能到达的点, 权值和以及最小值, 走两次..四 ...
- java比较器 之compareable 和comparato比较
compareable 测试类import java.util.Set; import java.util.TreeSet; public class Test { public static voi ...
- 从ASP.NET传递参数给水晶报表
原文 http://www.cnblogs.com/insus/p/3281114.html 上次Insus.NET有简单写了一篇文章<Visual Studio 2012使用水晶报表Cryst ...
- docker 容器管理常用命令
Docker 容器管理: docker create -it centos //这样可以创建一个容器,但该容器并没有启动: create Create a new container 创建一个容器: ...
- docker导入本地镜像
-rw-r--r-- 1 root root 98954220 Mar 17 17:02 centos-6-x86.tar.gz 利用下载的包 创建镜像: cat centos-6-x86.tar.g ...
- puppet svn集成
puppet svn集成
- Android UI ActionBar功能-在 Action Bar 上添加按钮
在ActionBar上添加按钮实现某些功能最常见的Application的功能如:在ActionBar上添加一个搜索按钮: 首先官方文档说明:http://wear.techbrood.com/tra ...
- 传纸条（一）（双线程dp）
传纸条(一) 时间限制:2000 ms | 内存限制:65535 KB 难度:5 描述 小渊和小轩是好朋友也是同班同学,他们在一起总有谈不完的话题.一次素质拓展活动中,班上同学安排做成一个m行 ...
- Unable to boot : please use a kernel appropriate for your cpu
假设你在virtualbox里得到这种提示信息: Unable to boot - please use a kernel appropriate for your CPU 以下的解决的方法,能够帮你 ...
- C++游戏编程(一开篇)
本系列文章由zhmxy555(毛星云)编写,转载请注明出处. http://blog.csdn.net/zhmxy555/article/details/7318264 作者:毛星云 邮箱: h ...