自写Jquery插件 Tab
原创文章，转载请注明出处，谢谢！https://www.cnblogs.com/GaoAnLee/p/9067017.html
每每看到别人写的Jquery插件，自己也试着学习尝试，终有结果，废话不多说，直接上效果：
直接撸代码：
html：
<body>
<div id='tab' class='frame'></div>
</body>
css：
@CHARSET "UTF-8";
div, ul {
overflow: hidden;
margin:;
padding:;
}
.main-content {
padding: 20px 20px;
}
.tabs, .tabs ul li {
float: left;
}
.tabs ul {
list-style: none outside none;
}
.tabs ul li {
line-height: 30px;
margin-right: 2px;
padding: 2px 10px 0 8px;
-webkit-border-radius: 6px 6px 0 0;
-moz-border-radius: 6px 6px 0 0;
-ms-border-radius: 6px 6px 0 0;
-o-border-radius: 6px 6px 0 0;
border-radius: 6px 6px 0 0;
font-size: 13px;
cursor: default;
}
.tabs ul li em {
display: inline-block;
}
.tabs ul li .tab-text, .tabs ul li .fa-close {
cursor: pointer;
}
.tabs ul li i:first-child {
margin-right: 5px;
}
.fa-close {
margin-left: 10px;
}
.tab-nav {
background-color: #EEEEEE;
}
.tab-nav-action {
color: #3c8dbc;
}
.tabs-body {
float: left;
padding: 5px 0 0;
}
.tabs, .tabs-body {
width: 100%;
}
.tab-nav-action, .tabs-body {
background-color: #ffffff;
}
.tab-nav, .tabs-body {
color: #000000;
}
.tabs-body div {
padding: 10px;
}
.tabs-body-hide {
display: none;
}
.tabs-body-show {
display: block;
}
jquery.tab.js：
/*
<div id='tab'>
//data
</div>
备注： 背景色建议为 #f4f4f4 最佳
*/ //jquery插件 tab auther:GaoAnLee
;
(function($, window, document, undefined) {
//初始化
function _init(tab, b) {
var _this = tab.element;
var options = $.data(_this, 'tab').options;
//第一次加载 添加tabs主体框架
if (b) {
_this.append('<div class=\"main-content\"></div>');
$('.main-content').append('<div class=\"tabs\"></div>');
$('.main-content').append('<div id=\"tabs-body\" class=\"tabs-body\"></div>');
$('.tabs').append('<ul id=\"tabs\"></div>');
}
//加载最简单tab
$(options.tab).append('<li class=\"' + options.tabActiveClass + '\"><i class=\"\"></i><em class=\"tab-text\">欢迎您</em><i class=\"\"></i></li>');
$(options.tabBody).append('<div class=\"' + options.tabBodyActiveClass + '\">Welcome MMS !</div>'); //切换tab
switchTab(options);
//删除tab
delTab(options);
}
//切换tab
function switchTab(options) {
$('body').on(options.eventType, '.tab-text', function() {
var parntNode = $(this).parent();
var index = parntNode.index();
parntNode.attr('Class', options.tabActiveClass).siblings().attr('Class', options.tabClass);
$(options.tabBody).children().hide().eq(index).show();
});
}
//删除tab
function delTab(options) {
$('body').on(options.eventType, '.fa-close', function() {
var index = $(this).parent().index();
var thisParentClass = $(this).parent().attr('Class');
if (thisParentClass != options.tabClass) {
var _prev = $(this).parent().prev();
var prevIndex = _prev.index();
_prev.attr('Class', options.tabActiveClass);
$(options.tabBody).children().eq(prevIndex).show();
}
$(this).parent().remove();
$(options.tabBody).children().eq(index).remove();
});
} /****************************_init() end****************************/ //追加tab
function addTab(options) {
$(options.tab).children().attr('Class', options.tabClass);
$(options.tabBody).children().hide();
if (options.hasClose) {
$(options.tab).append('<li class=\"' + options.tabActiveClass + '\"><i class=\"fa ' + options.icon + '\"></i><em class=\"tab-text\">' + options.title + '</em><i class=\"fa fa-close\"></i></li>');
} else {
$(options.tab).append('<li class=\"' + options.tabActiveClass + '\"><i class=\"fa ' + options.icon + '\"></i><em class=\"tab-text\">' + options.title + '</em></li>');
}
$(options.tabBody).append('<div class=\"' + options.tabBodyActionClass + '\">' + options.tabContent + '</div>');
}
//选中tab
function selectTab(options) {
var title = options.title;
if (hasTab(title)) {
if (!hasSelected(title)) {
var index = 0;
$(options.tab).children().each(function() {
var t = $(this).children('em').html();
if (t == title) {
index = $(this).index();
}
});
$(options.tab).children().eq(index).attr('Class', options.tabActiveClass).siblings().attr('Class', options.tabClass);
$(options.tabBody).children().hide().eq(index).show();
}
} else {
addTab(options);
}
}
//是否选中tab
function hasSelected(parm) {
var title = parm;
var selectedTabText = $('.tab-nav-action').children('em').html().trim();
if (selectedTabText == title) {
return true;
} else {
return false;
}
}
//是否存在tab
function hasTab(parm) {
var title = parm;
var flag = false;
$('#tabs').children().each(function() {
var t = $(this).children('em').html();
if (t == title) {
flag = true;
}
});
return flag;
} /*************************API function end*************************/ var Tab = function(ele, options) {
this.element = ele,
this.defaults = {
tabActiveClass: 'tab-nav-action',
tabClass: 'tab-nav',
tabBodyActionClass: 'tabs-body-show',
tabBodyClass: 'tabs-body-hide',
tab: '#tabs',
tabBody: '#tabs-body',
eventType: 'click'
},
this.options = $.extend({}, this.defaults, options)
};
Tab.prototype = {
//选中tab
selectTab: function(options) {
selectTab(options);
return false;
},
//是否选中指定tab
hasSelected: function(parm) {
return hasSelected(parm);
},
//是否存在tab
hasTab: function(parm) {
return hasTab(parm);
},
//在最后追加tab
addTab: function(options) {
addTab(options);
return false;
}
};
$.fn.tab = function(target, parm) {
var tab = new Tab(this, target);
if (typeof target == 'string' && typeof parm == 'string') {
return tab[target](parm);
}
if (typeof target == 'string' && typeof parm == 'object') {
var options = $.extend({}, tab.defaults, parm);
return tab[target](options);
}
var state = $.data(this, 'tab');
if (state) {
var dataOptions = state.options;
var newOptions = $.extend({}, dataOptions, target);
$.data(this, 'tab', {
options: newOptions,
e: this
});
} else {
$.data(this, 'tab', {
options: $.extend({}, tab.options, target),
e: this
});
}
return this.each(function(){
_init(tab,true);
});
};
})(jQuery, window, document); $(function() {
$('#tab').tab(); //先加载启动
//测试
$('#tab').tab('addTab', {
icon: 'fa-sitemap',
title: '公司管理',
hasClose: true,
tabContent: '111111111111111'
});
$('#tab').tab('addTab', {
icon: 'fa-th-list',
title: '部门管理',
hasClose: true,
tabContent: '2222'
});
var flag = $('#tab').tab('hasSelected', '公司管理');
console.log(flag); //false
flag = $('#tab').tab('hasTab', '公司管理');
console.log(flag); //true $('#tab').tab('selectTab', {
icon: 'fa-sitemap',
title: '公司管理',
hasClose: true,
tabContent: '111111111111111'
});
});
自写Jquery插件 Tab的更多相关文章
- 自写Jquery插件 Menu
原创文章,转载请注明出处,谢谢!https://www.cnblogs.com/GaoAnLee/p/9067543.html 可以结合我自写的Jquery插件Tab 一起使用哦 上一个整体效果 直接 ...
- 自己写jquery插件之模版插件高级篇(一)
需求场景 最近项目改版中,发现很多地方有这样一个操作(见下图gif动画演示),很多地方都有用到.这里不讨论它的用户体验怎么样. 仅仅是从复用的角度,如果每个页面都去写text和select元素,两个b ...
- 写JQuery插件的基本知识
普及JQuery知识 知识1:用JQuery写插件时,最核心的方法有如下两个: 复制代码 代码如下: $.extend(object) 可以理解为JQuery 添加一个静态方法. $.fn.exten ...
- [原创作品]手把手教你怎么写jQuery插件
这次随笔,向大家介绍如何编写jQuery插件.啰嗦一下,很希望各位IT界的‘攻城狮’们能和大家一起分享,一起成长.点击左边我头像下边的“加入qq群”,一起分享,一起交流,当然,可以一起吹水.哈,不废话 ...
- 写jQuery插件时，一种更好的合并参数的方法
看到很多人写jQuery插件时居然这样合并参数: this.defaults = { 'color': 'red', 'fontSize': '12px', 'textDecoration':'non ...
- 写JQuery 插件
什么?你还不会写JQuery 插件 前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再 ...
- 锋利的jQuery--编写jQuery插件(读书笔记五)[完结篇]
1.表单验证插件Validation 2.表单插件Form 3.动态事件绑定插件livequery 可以为后来的元素绑定事件 类似于jQuery中的live()方法 4.jQuer ...
- 什么？你还不会写JQuery 插件
前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论 ...
- 写JQuery 插件 什么？你还不会写JQuery 插件
http://www.cnblogs.com/Leo_wl/p/3409083.html 前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui ...
随机推荐
- 运维自动化ansible基础
云计算三种服务架构 IAAS: 不提供OS 只购买硬件(网络,存储,计算) PAAS: 提供硬件和OS和开发和运行环境 只需要开发应用软件 SAAS: 提供 硬件 os 软件 相当于直接购买软 ...
- golang gui library 库
andlabs/ui已经重写,稳定性增强,但是组件很少,只提供了几种基础的控件,慎用.gxui死了,别用.linuxdeepin转QT了,所以…… windows系统最好的选择是walk. 首先,写w ...
- LSTM输入层、隐含层及输出层参数理解【转载】
转自:https://blog.csdn.net/yyb19951015/article/details/79740869 //这个博客讲的挺不错的. http://www.newlifeclan.c ...
- word2vec 评测 sg=0 sg=1 size=100 window=3
1.评价sg=0与sg=1的区别 结果原文:sg_difference.txt sg=0 sg=1 绑定 1 关联 ...
- 2018-2019-1 20189221《Linux内核原理与分析》第四周作业
2018-2019-1 20189221<Linux内核原理与分析>第四周作业 教材学习:<庖丁解牛Linux内核分析> 第 3 章 MenuOS的构造 计算机三大法宝:存储程 ...
- jsonServer 造个假的服务器传递数据接口 再用axois来请求数据
- Hybrid设计--核心交互
普通网页中跳转使用a标签,这里我们要对跳转进行更多的干预,所以将全站的跳转收口到框架层,用forward去实现.拒绝用a和window.location.如果我想对所有跳转做一个处理,开动画或者对跳转 ...
- Ubuntu install mysql database
简要说下ubuntu Linux下安装MySql数据库 一. 安装 # apt-get install mysql-server# apt-get install mysql-client 二.启动 ...
- GO linux LiteIDE
GO 有个IDE开发环境,还是挺不错的 要明确一下,GO主要还是服务器端语言,所以,这里只以linux为例来说明安装和使用 一． 下载https://www.golangtc.com/download ...
- Cocos Creator 对象池cc.NodePool的使用
对象池cc.NodePool把层级管理器中的节点拖进资源管理器中就创建了预制体:let和var 一样,是声明变量的关键词, 同一个变量名时,var 即使在{}内也作用全局,let有范围:(1)将需要数 ...