编写tab切换插件
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
font-size: 14px;
font-family: 'Microsoft yahei';
}
.tab {
width: 300px;
height: 400px;
margin: 30px 0 0 30px;
position: relative;
}
.tab_nav {
width: 300px;
height: 43px;
position: absolute;
left: 0;
top: 0;
border: 1px solid #ccc;
border-bottom: none;
}
.tab_cont {
width: 302px;
height: 356px;
position: absolute;
left: 0;
top: 43px;
}
.tab_nav > li {
float: left;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
border-top: 3px solid green;
cursor: pointer;
}
.tab_nav > li.active {
border-top: 3px solid orange;
background: #f7f7f7;
}
.tab_cont > li {
width: 300px;
height: 356px;
border: 1px solid #ccc;
display: none;
}
.tab_cont > li.active {
display: block;
}
</style>
</head>
<body> <div class="tab">
<ul class="tab_nav">
<li class='tab_nav_item active'>导航一</li>
<li class="tab_nav_item">导航二</li>
<li class="tab_nav_item">导航三</li>
</ul>
<ul class="tab_cont">
<li class="tab_cont_item active">内容一</li>
<li class="tab_cont_item">内容二</li>
<li class="tab_cont_item">内容三</li>
</ul>
</div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, illo officia quidem recusandae nihil consectetur sunt tempore tenetur voluptate atque quasi doloremque ratione eaque, sequi nam ducimus, eligendi deleniti modi.</p> <script src="jquery.min.js"></script>
<script src="jq.fn.tabcc.js"></script>
<script> // 参数以对象的形式传入
// 调用方式：$('.tab').tabcc({});
$('.tab').tabcc({
'navItem': '.tab_nav_item',
'contItem': '.tab_cont_item'
}); </script> </body>
</html>
js:
;(function ($) {
// 1.创建一个构造函数，传入要绑定的元素和参数的对象，初始化defaults参数默认值
var Tab = function (ele, options) {
this.$element = ele;
this.defaults = {
'navItem': '',
'contItem': ''
};
this.options = $.extend({}, this.defaults, options);
};
// 2.暴露出原型方法，对元素进行操作
Tab.prototype = {
_init: function () {
var $this = this.$element;
var $navItem = this.options.navItem;
var $contItem = this.options.contItem;
$this.find($navItem).on('click', function () {
//console.log($(this).index());
var _index = $(this).index();
//console.log(_index);
$this.find($navItem).each(function () {
$(this).removeClass('active');
});
$(this).addClass('active');
$this.find($contItem).each(function () {
$(this).removeClass('active');
});
$this.find($contItem).eq(_index).addClass('active');
});
}
};
// 3.把方法放在插件扩展里，形成插件，方便调用
$.fn.tabcc = function (options) {
// 初始化构造函数对象（实例化对象）
var tab = new Tab(this, options);
tab._init();
};
})(jQuery);
添加一个fade效果参数：
;(function ($, win, doc, undefined) {
// 1.创建一个构造函数，传入要绑定的元素和参数的对象，初始化defaults参数默认值
var Tab = function (ele, options) {
this.$element = ele;
this.defaults = {
navItem: '',
contItem: '',
eventType: 'click',
animateSwitch: undefined // fade|slide|toTop
};
this.options = $.extend({}, this.defaults, options);
};
// 2.暴露出原型方法，对元素进行操作
Tab.prototype = {
_init: function () {
var $this = this.$element;
var $navItem = this.options.navItem;
var $contItem = this.options.contItem;
var $eventType = this.options.eventType;
var $animateSwitch = this.options.animateSwitch;
// 改变事件，mouseover或者click，让用户自己传入
$this.find($navItem).on($eventType, function () {
//console.log($(this).index());
var _index = $(this).index();
//console.log(_index);
$this.find($navItem).each(function () {
$(this).removeClass('active');
});
$this.find($contItem).each(function () {
$(this).removeClass('active');
});
if($animateSwitch == undefined) {
$(this).addClass('active');
$this.find($contItem).eq(_index).addClass('active');
}else if($animateSwitch == 'fade') {
$this.find($contItem).each(function () {
$(this).removeClass('active').hide();
});
$this.find($contItem).eq(_index).fadeIn();
$(this).addClass('active');
}
});
}
};
// 3.把方法放在插件扩展里，形成插件，方便调用
$.fn.tabcc = function (options) {
// 初始化构造函数对象（实例化对象）
var tab = new Tab(this, options);
tab._init();
};
})(jQuery, window, document);
编写tab切换插件的更多相关文章
- iTabs Tab切换插件
最近项目中使用到Tab切换,切换的页面不变,内容发生变化,随手写了份简单的插件,附带源码.先看样子: 本人也考虑到是否使用jquery ui tab,但是还是热衷于自己写一份,首先好处之一是易于培训, ...
- 一个小的tab切换插件
1//使用 var t1=new Tab({ etype:'onmou',//默认点击触发,如果事件写错了,当作单击 autoplay:2000,//有时间值(按照事件自动播放)和false(不自动播 ...
- jQuery的DOM操作实例（1）——选项卡&&Tab切换
一.原生JavaScript编写tab切换 二.jQuery编写tab切换 在用jQuery编写选项卡过程中,重要的事搞清楚 .eq() 和 .index() 的使用方法. .eq()是jQuery遍 ...
- tab切换插件开发
我开发的tab切换插件,基于jquery库,实现tab标签页的切换.插件的名称为jquery.tabSwitch.js. 插件实现代码如下: ; (function ($) { $.fn.tabSwi ...
- 自己编写jQuery插件之Tab切换
自己编写jQuery插件之 Tabs切换 jquery ui 带有Tabs切换插件,但其css样式太难维护,引用的东西太多,因此就自己写了个. 起初我Html代码架子是这样的: <div cla ...
- swiper插件遇上tab切换
当swiper插件遇到tab切换,即display的显示与否属性时,失效,方法如下: <script language="javascript"> var mySwip ...
- 前端tab切换 和 validatejs表单验证插件
一.tab切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- jquery TAB切换小插件
//tab切换 ;(function($, window, document, undefined) { $.fn.tab = function(options) { var defaults = { ...
- 解决微信小程序的wx-charts插件tab切换时的显示会出现位置移动问题-tab切换时，图表显示错乱-实现滑动tab
解决Echarts在微信小程序tab切换时的显示会出现位置移动问题 tab切换时,图表显示错乱 <canvas class="kcanvas" canvas-id=" ...
随机推荐
- Warning: Call to 'toArray()' with pre-sized array argument 'new String[list.size()]'
当使用如下代码将List转换为Array类型时: List<String> list = new ArrayList<>(); String[] array = list.to ...
- IIS反向代理
- Fxx and game hdu 5945 单调队列dp
dfs你怕是要爆炸 考虑dp; 很容易想到 dp[ i ] 表示到 i 时的最少转移步数: 那么: dp[ i ]= min( dp[ i ],dp[ i-j ]+1 ); 其中 i-t<=j& ...
- CF E. Vasya and a Tree】 dfs+树状数组（给你一棵n个节点的树，每个点有一个权值，初始全为0，m次操作，每次三个数(v, d, x)表示只考虑以v为根的子树，将所有与v点距离小于等于d的点权值全部加上x，求所有操作完毕后，所有节点的值）
题意: 给你一棵n个节点的树,每个点有一个权值,初始全为0,m次操作,每次三个数(v, d, x)表示只考虑以v为根的子树,将所有与v点距离小于等于d的点权值全部加上x,求所有操作完毕后,所有节点的值 ...
- day23 模块
1. 模块 1. 首先,我们先看个老生常谈的问题. 什么是模块. 模块就是一个包含了python定义和声 明的文件, 文件名就是模块的名字加上.py后缀. 换句话说我们目前写的所有的py文件都可以 看 ...
- linux 中varnish服务
一.安装varnish在server1中安装两个包varnish-3.0.5-1.el6.x86_64.rpm varnish-libs-3.0.5-1.el6.x86_64.rpm1.在server ...
- Jmeter源代码学习心得
1.TestPlan和WorkBench GUI类是直接加载的,因此左边的树形菜单开始启动Jmeter时显示也是这两个,默认写死了的!可以改源码!在MenuFactory中有相应代码. 2.其它的GU ...
- Python 基础学习之if语句
cars=['audi','xiali','bwm','benz',] ##根据要求bmw全部为大写,其他的首字母为大写 for car in cars: if car=='bmw': print(c ...
- ettercap局域网DNS欺骗实现过程
转载:https://www.cnblogs.com/hkleak/p/5043063.html 笔记一:ettercap是什么? 我们在对WEB安全检测的时候都会用到Cain和netfuke这两款工 ...
- VS 设置背景色和背景图片
VS版本:2013 选择菜单栏上——工具——选项——环境——字体和颜色——自定义(项背景),选择好自己喜欢的颜色即可 设置背景图片 下载vs插件(ClaudiaIDE):https://visuals ...