自写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 ...
随机推荐
- Building an (awesome) API with NancyFX 2.0 + Dapper
http://blog.nandotech.com/post/2016-10-25-nancyfx-webapi-dapper/?utm_source=tuicool&utm_medium=r ...
- WD 蓝盘、绿盘、黑盘、红盘的区别
绿盘,蓝盘.黑盘和红盘是西部数据根据旗下所产硬盘的特点所做的分类,通俗点讲:所谓的黑盘.蓝盘.绿盘.红盘就是指的西部数据硬盘上贴的那张纸,是黑色.蓝色.绿色.或红色. 黑盘:高性能,大缓存,速度快.代 ...
- javascript篇-slice(),splice(),split(),substring(),substr()的用法以及区别
1.slice(),从已经有的数组中返回选定的元素, 使用范围是:Array,string 语法:obj.slice(start,end) 参数: start: 必需.规定从数组(字符串)的哪个ind ...
- Spring boot 整合hive-jdbc导致无法启动的问题
使用Spring boot整合Hive,在启动Spring boot项目时,报出异常: 经过排查,是maven的包冲突引起的,具体做法,排除:jetty-all.hive-shims依赖包.对应的po ...
- finally最常用的情况
通常用于关闭(释放)资源例如:数据库连接 执行查询时查到需要的需要后 需要关闭连接, 此处连接就需要在获取到结果后 就断开连接 不然访问人数过多,数据库有最大连接数,超过了就只能等待前 ...
- (已解决)cocos2d-x 运行时xcode提示错误："vtable for XXX", referenced from；
vtable/引用和虚函数相关,今天在添加一个层的时候报了这个错误,很低级的错误,忘了实现虚函数了(谨记!!) 若如果实现了虚函数还依然如此的话,可能是创建的时候忘了钩上 -desktop 选项了,把 ...
- the import XXXX cannot be resolved 解决方法
明明XXX类完全没问题 突然就报错了 解决方法: 原因一:一个项目引用了兄弟项目的类,报错The import XXX cannot be resolved 解决办法:需要在引用的兄弟项目右键选择Ma ...
- python字典对与list对象组合使用小问题
遇到的低级错误,做个小记录,防止下次在陷进去........ 两行数据,分别每行做为一个字典,存传在list中,但是现在问题来了,第二行的数据会覆盖第一行.结果就是,list存储了的两个元素的数据一样 ...
- python 定义函数 两个文件调用函数
在def_function.py文件里面写 #coding=utf-8 #定义函数 def hello(): print "hello world" 在test.py里面调用 #c ...
- 搭建私有仓库Harbor
搭建Harbor企业级docker仓库 搭建Harbor企业级docker仓库 一.Harbor简介 1.Harbor介绍 Harbor是一个用于存储和分发Docker镜像的企业级Registry ...