<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. jchat：linux聊天程序2：MySQL

    该软件使用的数据库为MySQL,因为它免费.开源,在linux下几乎就是最好的选择. 首先要在mysql中root用户新建数据库并赋权给本用户: create database jchat; gran ...

  2. 使用SecureCRT网络连接树莓派

        为了更加方便可以通过网络来连接.控制树莓派,使用SecureCRT可以通过网络来连接树莓派.     1.在树莓派上通过终端命令ifconfig 来查看当前树莓派的IP地址:     IP地址 ...

  3. tornado web框架

    tornado web框架 tornado简介 1.tornado概述 Tornado就是我们在 FriendFeed 的 Web 服务器及其常用工具的开源版本.Tornado 和现在的主流 Web ...

  4. Oracle EBS-SQL (WIP-10):检查车间任务状态“完成”但未发料数据.sql

    select WE.WIP_ENTITY_NAME                                               任务号,         MFG_LOOKUPS_WJS ...

  5. shell基础——变量定义

    快速参考: 变量定义格式: 变量名=值 str1="hello world" # define a string var str2=hello # define a string ...

  6. mac下配置java环境

    1.tomcat配置 http://www.cnblogs.com/freeyiyi1993/p/3436368.html 2.下载eclipse和jdk安装  jdk去oracle网站下载

  7. jQuery 中的 Ajax $.ajax() load() $.get() $.post() $.getJSON() $.getScript()

    1. $.ajax()方法 参数对象属性如下: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") ...

  8. poj3062---输入什么输出什么

    #include <stdio.h> #include <stdlib.h> int main() { ]; while(gets(str) != NULL) { printf ...

  9. #include <strstream>

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

  10. #include <limits.h>

    limits.h专门用于检测整型数据数据类型的表达值范围. #include<stdio.h> #include<limits.h> main() { printf(" ...