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)右 ...
随机推荐
- CSS左中右布局，规范案例
html部分 <body> <form id="form1" runat="server"> <div id="wrap ...
- python循环，判断及函数
python中的for循环 #for循环格式(类似Java中的foreach):for 标识符 in 列表名称 : >>> movies = ["movie1", ...
- @Transactional 注解说明
先让我们看代码吧! 以下代码为在"Spring3事务管理--基于tx/aop命名空间的配置"基础上修改.首先修改applicationContext.xml如下: <pre ...
- #include <stdbool.h>
可以使用bool和true.false 输出是1或者0 #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<stdb ...
- Gunner II（二分，map,数字转化）
Gunner II Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Total ...
- C# 中4个访问符和8个修饰符详解
4个访问修饰符(是添加到类.结构或成员声明的关键字) Public:公有的,是类型和类型成员的访问修饰符.对其访问没有限制. Internal:内部的,是类型和类型成员的访问修饰符.同一个程序集中的所 ...
- node.js(六) UTIL模块
1.inspect函数的基本用法 util.inspect(object,[showHidden],[depth],[colors])是一个将任意对象转换为字符串的函数,通常用于调试和错误输出.它至少 ...
- 创建基于maven的项目模版
我们在实际工作中 ,有些项目的架构是相似的,例如基于 restful的接口项目,如果每次都重新搭建一套架构或者通过拷贝建立一个项目难免有些得不偿失,这里我们可以用maven的archtype建立项目模 ...
- CRM odata方法如何使用$top
odata方法 $top $top1 取1个 ￥top100取100个,放在$select前,中间用&符号隔开. 例如: var activeserviceReq = "/xrmse ...
- sql server 存储过程分隔split
CREATE FUNCTION [dbo].[F_split] ( ), ) ) , ), f )) --实现split功能 的函数 AS BEGIN DECLARE @i INT SET @Sour ...