jquery插件tab——小试牛刀

最新推荐文章于 2024-09-09 11:12:12 发布

cangkukuaimanle

最新推荐文章于 2024-09-09 11:12:12 发布

阅读量4.3k

点赞数 1

分类专栏： html/css/javascript 文章标签： tab jquery tab tab 插件 jquery tab插件自定义tab插件

本文链接：https://blog.csdn.net/cangkukuaimanle/article/details/11813751

版权

html/css/javascript 同时被 2 个专栏收录

55 篇文章 0 订阅

订阅专栏

生活小记

4 篇文章 0 订阅

订阅专栏

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