jquery插件tab——小试牛刀
<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——小试牛刀的更多相关文章
- 自写Jquery插件 Tab
原创文章,转载请注明出处,谢谢!https://www.cnblogs.com/GaoAnLee/p/9067017.html 每每看到别人写的Jquery插件,自己也试着学习尝试,终有结果,废话不多 ...
- 自写Jquery插件 Menu
原创文章,转载请注明出处,谢谢!https://www.cnblogs.com/GaoAnLee/p/9067543.html 可以结合我自写的Jquery插件Tab 一起使用哦 上一个整体效果 直接 ...
- 代码简洁的滑动门（tab）jquery插件
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org ...
- jQuery 插件分享-非常优秀的tab插件tabulous- 学徒帮
干货jquery插件分享之tab. tab 选项卡切换,在日常开发中也是一种比较常见的呈现控件,今天这个tab控件效果还是蛮喜欢的,推荐给大家有用到的场景可以试试: tabulous.js A jQu ...
- 封装jQuery插件实现TAB切换
先上效果图: 直接上代码: index.html <!DOCTYPE html> <html lang="en"> <head> <met ...
- 使用jQuery开发tab选项卡插件（可以右键关闭多个标签）
在前一篇“使用jQuery开发tab选项卡插件”的基础上添加了tab标签右键关闭菜单功能,菜单主要包括:关闭当前标签.关闭左侧标签.关闭右侧标签.关闭其他.关闭全部. 一.插件效果 二.实现思路 为w ...
- 使用jQuery开发tab选项卡插件
为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动 ...
- 自己编写jQuery插件之Tab切换
自己编写jQuery插件之 Tabs切换 jquery ui 带有Tabs切换插件,但其css样式太难维护,引用的东西太多,因此就自己写了个. 起初我Html代码架子是这样的: <div cla ...
- BootStrap_04之jQuery插件（导航、轮播）、以及Less
1.列偏移与列排序: ①列偏移:控制列出现的位置,某列偏移后,后序列会随之偏移--只能右偏移: col-lg/md/sm/xs-offset-*; ②列排序:控制某一列的位置,该列可以左(pull)右 ...
随机推荐
- 以Ajax的方式访问数据库
一:以Ajax的方式显示数据 我们都知道,如果用Ajax程序去加载一个动态页,则加载的实际上是这个动态页执行完毕后生成的静态HTML代码字符串. 1.以原有的格式显示数据 <?php heade ...
- java版括号匹配检测
做一个空栈,读入字符直到结尾.如果读入一个封闭符号,空栈时报错;非空时弹出栈尾字符,如果不匹配则报错.否则读入为开放字符,压入栈中.最后如果栈空,返回true. 其中用到MyStack类,详情请见 p ...
- delphi 文件搜索，遍历所有子目录
function ListFiles(path: string): TStringList; var SearchRec: TSearchRec; found: integer; begin resu ...
- flex lineChart中自定义datatip
原文 http://www.giser.net/?p=776 在Flex4中使用lineChart会遇到一个bug,datatip上的背景是黑色的,造成文字看不清楚,和整体界面不协调. 那么解决这个问 ...
- 基于Schema的AOP 配置使用详解
原文地址:http://jinnianshilongnian.iteye.com/blog/1418598 基于Schema的AOP从Spring2.0之后通过"aop"命名空间来 ...
- Dreamweaver PHP代码护眼配色方案
结果展示 [1]主菜单选择编辑->首选项.在分类中选择"字体".设置代码视图的字体为Courier New [2]在分类中选择 "代码颜色",点击 &qu ...
- 用C#实现生成PDF文档
using System; using System.IO; using System.Text; using System.Collections; namespace PDFGenerator { ...
- 一个C/C++结构体初始化有趣的现象
我们知道C语言当中结构可以使用{}进行初始化,例如有结构体定义如下: typedef struct type_t { int a; int b; int c; int d; }type_t; 我们可以 ...
- jQuery-瀑布流 布局 （处理页面滚动和AJAX加载延迟问题）
瀑布流:这种布局适合于小数据块,每个数据块内容相近且没有侧重.通常,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部. 一.功能分析: 1.判断图片是否进入可视区域: 2.用AJAX ...
- 清空DateTimePicker控件的好方法
[控件ID,不要加这个方括号].Format = DateTimePickerFormat.Custom; [控件ID,不要加这个方括号].CustomFormat = " "; ...