<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——小试牛刀的更多相关文章

  1. 自写Jquery插件 Tab

    原创文章,转载请注明出处,谢谢!https://www.cnblogs.com/GaoAnLee/p/9067017.html 每每看到别人写的Jquery插件,自己也试着学习尝试,终有结果,废话不多 ...

  2. 自写Jquery插件 Menu

    原创文章,转载请注明出处,谢谢!https://www.cnblogs.com/GaoAnLee/p/9067543.html 可以结合我自写的Jquery插件Tab 一起使用哦 上一个整体效果 直接 ...

  3. 代码简洁的滑动门（tab）jquery插件

    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org ...

  4. jQuery 插件分享-非常优秀的tab插件tabulous- 学徒帮

    干货jquery插件分享之tab. tab 选项卡切换,在日常开发中也是一种比较常见的呈现控件,今天这个tab控件效果还是蛮喜欢的,推荐给大家有用到的场景可以试试: tabulous.js A jQu ...

  5. 封装jQuery插件实现TAB切换

    先上效果图: 直接上代码: index.html <!DOCTYPE html> <html lang="en"> <head> <met ...

  6. 使用jQuery开发tab选项卡插件（可以右键关闭多个标签）

    在前一篇“使用jQuery开发tab选项卡插件”的基础上添加了tab标签右键关闭菜单功能,菜单主要包括:关闭当前标签.关闭左侧标签.关闭右侧标签.关闭其他.关闭全部. 一.插件效果 二.实现思路 为w ...

  7. 使用jQuery开发tab选项卡插件

    为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动 ...

  8. 自己编写jQuery插件之Tab切换

    自己编写jQuery插件之 Tabs切换 jquery ui 带有Tabs切换插件,但其css样式太难维护,引用的东西太多,因此就自己写了个. 起初我Html代码架子是这样的: <div cla ...

  9. BootStrap_04之jQuery插件（导航、轮播）、以及Less

    1.列偏移与列排序: ①列偏移:控制列出现的位置,某列偏移后,后序列会随之偏移--只能右偏移: col-lg/md/sm/xs-offset-*; ②列排序:控制某一列的位置,该列可以左(pull)右 ...

随机推荐

  1. WIFI无线adb调试android

    有个需求需要支持android插上键盘,鼠标等外设,但是这样就不能使用microusb口进行adb调试了. 研究了一番,发现可以利用wifi进行adb无线调试(adb应该本身已经支持无线调试). WI ...

  2. listview优化

    http://www.2cto.com/kf/201108/99928.html 项目用到ListView,由于要用到ImageView,图片源不是在资源里面的,没法使用资源ID,因此无法直接使用Si ...

  3. IIS7性能优化：启用浏览器本地缓存

    原文地址:http://jingyan.baidu.com/article/597035521b96e88fc00740af.html

  4. 【POJ】2318 TOYS ——计算几何+二分

    TOYS Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 10281   Accepted: 4924 Description ...

  5. Python学习笔记7-把函数当参数传递、指定可变参数

    把函数当参数传递 # 函数参数传递 # 面向对象编程就是把对象传来传去 # 面向函数编程就是把函数传来传去 def mytest(num): return num * 2 # # 不光可以传递变量,还 ...

  6. #include <strstream>

    std::ostrstream MYOUT(str, sizeof(str)); 拼接字符串 #include <iostream> #include <strstream> ...

  7. 在win7下php查询数据库, 连接被重置

    解决方法一 将 php5 目录下的libmysql.dll拷贝至 windows/system32和apache/bin下 解决方法二 在apache/conf/httpd.conf文件中添加 Loa ...

  8. Ignatius and the Princess II（全排列）

    Ignatius and the Princess II Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K ( ...

  9. easyui的验证

    加一个JS来重写验证,文件名为:validator.js 内容为: //扩展easyui表单的验证 $.extend($.fn.validatebox.defaults.rules, { //验证汉子 ...

  10. Android App开之标注切图

    身为一个android开发狗,真是艰辛啊,适配不好做,Rom特性不好搞,连切图有时候都得自己上啊,设计师MM都不敢去惹呢,新技能Get开始. 其实,都是小case了,我有度娘和谷哥! 因为,有了psd ...