<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. easyui的datagrid删除一条记录后更新出问题

    1.问题 如果先删除一条记录,然后不选中一条记录,去更新一条,默认是有选中的记录的,就是被删除的那条记录. 2.解决方法 $("#dg").datagrid('uncheckAll ...

  2. CSS自学笔记（8）:CSS拓展（一）

    CSS元素对齐 可以使用margin属性类进行元素的水平对齐 水平对齐块元素时,可以将块元素的margin属性定义为"auto",这里需要注意的是,应该要声明!DOCTYPE,否则 ...

  3. mysql_config_editor程序的用法

    1.mysql_config_editor程序的作用: 它只是用来在用户的家目录下生成一个.mylogin.cnf 里面保存有用于登录mysql-server端的password,host,user信 ...

  4. 杭电oj1062 Text Reverse

    Tips:使用一个临时数组c[1000] ,将输入的数据一边复制一边处理,碰到空格时就将前面的字符反向输出即可 #include<stdio.h> #include<string.h ...

  5. 普林斯顿大学算法课 Algorithm Part I Week 3 求第K大数 Selection

    问题 给定N个元素的数组,求第k大的数. 特例当k=0时,就是求最大值,当k=N-1时,就是求最小值. 应用顺序统计求top N排行榜 基本思想 使用快速排序方法中的分区思想,使得a[k]左侧没有更小 ...

  6. ar解压deb包

    解压文件 ar -x libstdc++6_4.7.2-5_i386.deb tar -zxvf data.tar.gz

  7. #include <process.h>

    1 _beginthread 单进程,单线程,必须干完一件事情后干另一件事情 #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #incl ...

  8. C# 4.0 新特性-dynamic 【转】

    前段时间看过一些关于dynamic这个C#4中的新特性,看到有些朋友认为dynamic的弊大于利,如无法使用编译器智能提示,无法在编译时做静态类型检查,性能差等等.因此在这篇文章中我将就这些问题来对d ...

  9. UNIX网络编程--读书笔记

    会集中这段时间写UNIX网络编程这本书的读书笔记,准备读三本,这一系类的文章会不断更新,一直会持续一个月多,每篇的前半部分是书中讲述的内容,每篇文章的后半部分是自己的心得体会,文章中的红色内容是很重要 ...

  10. devexpress中用ChartControl生成柱状图

    在界面中拖入一个ChartControl控件,然后添加一个simplebutton控件.在simplebutton控件的click事件中加入如下代码: private void button1_Cli ...