自写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 ...
随机推荐
- PE破解win2008登录密码
1.使用PE系统启动计算机. 2.使用cmd命令行程序. 3.备份一下magnify.exe(windows 放大镜程序). copy C:\WINDOWS\system32\magnify.exe ...
- python基础(9)-迭代器&生成器函数&生成器进阶&推导式
迭代器 可迭代协议和迭代器协议 可迭代协议 只要含有__iter__方法的对象都是可迭代的 迭代器协议 内部含有__next__和__iter__方法的就是迭代器 关系 1.可以被for循环的都是可迭 ...
- ORM之视图层
1.request对象 前台POST传来的数据,包装到POST字典中request.POST 前台浏览器窗口携带的数据,包装到GET字典中request.GET 前台请求的方式,request.met ...
- 万恶之源 - Python包的应用
包的简介 你们听到的包,可不是女同胞疯狂喜欢的那个包,我们来看看这个是啥包 官方解释: Packages are a way of structuring Python’s module namesp ...
- （转）RBAC权限表的设计
RBAC(Role-Based Access Control,基于角色的访问控制),就是用户通过角色与权限进行关联.简单地说,一个用户拥有若干角色,每一个角色拥有若干权限.这样,就构造成“用户-角色- ...
- 【LeetCode每天一题】Longest Valid Parentheses（最长有效括弧）
Given a string containing just the characters '(' and ')', find the length of the longest valid (wel ...
- vue作用域 this
设计到异步 function 回调的.this指向 需要用内部代替this 如果是箭头符号写法 就不需要 this永远是当前vue实例
- [LeetCode] 1. Two Sum_Easy
Given an array of integers, return indices of the two numbers such that they add up to a specific ta ...
- 关于fullpage.js 和animate.css制作全屏简单大方的首页
附上源码: html <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- gitlab8.2->8.16->8.17->9.0升级
注:不要跨过8.16升级至8.17,这样做升级过程会报错 ###################################8.2升级至8.16########################## ...