自写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 ...
随机推荐
- JsonDataObjects基本演示
下载地址https://github.com/ahausladen/JsonDataObjects 执行程序截图 Json数据 { "name": "张三", ...
- dxCameraControl控件(拍照)
拍照演示 主要属性设置 Active:True DeviceIndex:设备号,默认为0 其他方法 procedure Capture; //捕获 procedure Pause; //暂停 proc ...
- oracle-安装-init.sh
!#/bin/bashgroupadd -g 1001 oinstallgroupadd -g 1002 dbagroupadd -g 1003 opergroupadd -g 1004 asmadm ...
- 【BFS宽度优先搜索】
一.求所有顶点到s顶点的最小步数 //BFS宽度优先搜索 #include<iostream> using namespace std; #include<queue> # ...
- python变量交换及注释种类,注释注意事项/注释排查方法
#小练习作业 # texe1 = '能提笔安天下' # print(texe1) # string1 = '武能上' # string2 = '定乾坤' # print(string1,string2 ...
- [vue]基础篇stepbystep案例实践(废弃)
去看这个就好了 总结: 1.子组件可以触发父组件的方法,this.$emit() //(通知父组件干活) 2.父组件可以调用子组件的方法() // ref 如果放在组件上 获取的是组件的实例 并不是组 ...
- [LeetCode] questions conclusion_ Binary Search
Binary Search T(n) = T(n/2) + O(1) => T(n) = O(lg n) proof: 如果能用iterable , 就用while loop, 可以防 ...
- NPOI设置单元格格式
转自:http://www.cr173.com/html/18143_2.html //创建一个常用的xls文件 private void button3_Click(object sender, E ...
- (已解决)Eclipse报错：Could not find XXX.apk. 没有Android项目命名. There is no android project named
可能是你把当前项目设置为library项目了,按以下步骤切换回普通项目: 选择 Project->Properties 在左边的列表中,选择 Android 取消钩中"Is Libra ...
- iOS - (集成支付宝第三方SDK大坑总结)
其实集成支付宝相对于集成微信支付来说,支付宝算是简单的了,后续有空再去研究微信支付,现目前先总结一下集成支付宝所遇到的坑,其实支付宝的坑也不算太多,细算下来大概5-6个左右,但是其报错方式有点恶心,不 ...