<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. ConnectivityManager与检查网络连接的使用

    1.ConnectivityManager的作用 ConnectivityManager主要管理和网络管理相关的操作 TelephonyManager则管理和手机.运营商等的相关信息 WifiMana ...

  2. 全局键盘钩子(WH_KEYBOARD)

    为了显示效果,在钩子的DLL中我们会获取挂钩函数的窗体句柄,这里的主程序窗体名为"TestMain",通过FindWindow查找. KeyBoardHook.dll代码 libr ...

  3. 实现拦截API的钩子(Hook)

    道理不多讲,简单说就是将系统API的跳转地址,替换为我们自己写的API的地址,所以要求我们自定义的API函数要和被拦截的API有相同的参数.在用完后,记得恢复. 因为要挂全局的钩子,所以Hook的部分 ...

  4. 学javascript突发奇想，只用浏览器就能转换进制

    只需要三行就可以了 具体代码如下 <script> document.write(new Number(8).toString(2));//toSting方法可以转换任何进制 </s ...

  5. 动态规划——数字三角形（递归or递推or记忆化搜索）

    动态规划的核心就是状态和状态转移方程. 对于该题,需要用抽象的方法思考,把当前的位置(i,j)看成一个状态,然后定义状态的指标函数d(i,j)为从格子出发时能得到的最大和(包括格子本身的值). 在这个 ...

  6. Facebook有两名重要经理离职 有一位将加入阿里

    据报道,Facebook将有两名重要经理离职,分别是领导视频广告产品的产品经理和企业沟通团队经理. 这是该仍在迅速增长的公司最新的人员离职情况.Facebook计划今年大幅扩张人员规模. 知情人士称, ...

  7. Android UI ActionBar功能-自定义 Action Bar 样式

    ActionBar的样式官方提供了三种: Theme.Holo Theme.Holo.Light Theme.Holo.Light.DarkActionBar 但不仅仅是这三种,我们还可以自己定义Ac ...

  8. javascript第九课"闭包"

    所谓闭包:就是一个函数内部又定义了一个函数,而这个函数能访问外部函数作用域范围内的变量,这个内部函数就叫做闭包!   js中的面向对象都是使用闭包来实现的 闭包里使用的变量会现在当前函数内搜索,没有的 ...

  9. usb键鼠标驱动分析

    一.鼠标 linux下的usb鼠标驱动在/drivers/hid/usbhid/usbmouse.c中实现 1.加载初始化过程 1.1模块入口 module_init(usb_mouse_init); ...

  10. Oracle方向

    从毕业到现在工作已经4年了,入职前去过私企,干过外企,当前到了国企,各有各的不同,对于不同的人,有不同的适合的选择. 这几年的工作中也积累了不少知识,业务上的.技术上的,但始终觉得没有掌握一门核心,没 ...