基于jQuery实现Tabs选项卡自定义插件
控件这东西网上找的多少都有些功能不如意的，只能自己动手来写了。
Tabs插件很多人都需要用到，网上也有很多的例子，但是不是风格不搭调就是用着不习惯（自己写的不一定比别人的好但用着顺手In love）
下面直接贴代码，不喜勿喷：
(function ($) {
'use strict';
var defaults = {
type: "iframe",
onchanged: null,
style: {
header_panel: "tab-headers",
content_panel: "tab-contents",
header: "tab-header",
content: "tab-content",
selected: "selected",
icon_base: "fa",
icon_close: "fa-close"
}
}
var methods = {
init: function (options) {
return this.each(function () {
var $this = $(this);
if (!$this.hasClass("tw.tabs")) {
$this.addClass("tabs");
}
var settings = $this.data('tw.tabs');
if (typeof (settings) == 'undefined') {
settings = $.extend({}, defaults, options);
$this.data('tw.tabs', settings);
} else {
settings = $.extend({}, settings, options);
$this.data('tw.tabs', settings);
}
$this.empty();
$this.append($("<ul class='" + settings.style.header_panel + "'></ul>"));
$this.append($("<div class='" + settings.style.content_panel + "'></div>"));
if (settings.data) {
if (typeof settings.data === 'string') {
settings.data = $.parseJSON(settings.data);
}
$.each(settings.data, function () {
$this.tabs("add", this);
});
}
});
},
add: function (tab) {
var $this = $(this);
var settings = $this.data("tw.tabs");
var headers = $this.find("." + settings.style.header_panel);
var contents = $this.find("." + settings.style.content_panel);
if (headers.find("[data-tab='" + tab.id + "']").length == 0) {
var header = $("<li class='" + settings.style.header + "' data-tab='" + tab.id + "'>" +
"<i class='" + settings.style.icon_base + "" + tab.icon + "'></i>" +
"<span class='tab-title'>" + tab.name + "</span></li>");
if (tab.canClose) {
var close = $("<i class='" + settings.style.icon_base + "" + settings.style.icon_close + "'></i>");
close.click(function () {
$this.tabs("remove", tab.id);
});
header.append(close);
}
header.data("tw.tab", tab);
header.click(function () {
$this.tabs("select", tab);
});
headers.append(header);
var content = $("<div class='" + settings.style.content + "' data-tab='" + tab.id + "'></div>");
if (settings.type == "iframe") {
content.append("<iframe src='" + tab.url + "?target_id=" + tab.id + "'></iframe>");
} else if (settings.type == "ajax"){
$.ajax({
url: tab.url,
type: "post",
async: false,
data: { target_id: tab.id },
success: function (result) {
content.html(result);
}
});
} else {
content.html(tab.content);
}
contents.append(content);
if (tab.selected) {
$this.tabs("select", tab);
}
} else {
$this.tabs("select", tab);
}
},
select: function (tab) {
var $this = $(this);
var settings = $this.data("tw.tabs");
$this.find("." + settings.style.selected).removeClass(settings.style.selected);
if (typeof tab == "object") {
$this.find("[data-tab='" + tab.id + "']").addClass(settings.style.selected);
} else {
$this.find("." + settings.style.header).eq(tab).addClass(settings.style.selected);
$this.find("." + settings.style.content).eq(tab).addClass(settings.style.selected);
}
if (settings.onchanged) {
settings.onchanged(tab);
}
},
refresh: function () {
var $this = $(this);
var selected = $this.find("." + settings.style.selected);
var tab = $this.find("." + settings.style.header).data("tw.tab");
if (settings.type == "iframe") {
selected.find("iframe").attr('src', tab.url + "?target_id=" + tab.id);
} else if (settings.type == "ajax") {
$.ajax({
url: tab.url,
type: "post",
async: false,
data: { target_id: tab.id },
success: function (result) {
content.html(result);
}
});
} else {
content.html(tab.content);
}
},
remove: function (id) {
var $this = $(this);
var settings = $this.data("tw.tabs");
var tab = $this.find("[data-tab='" + id + "']");
if (tab.find("." + settings.style.selected)) {
var index = tab.eq(0).index() - 1;
$this.tabs("select", index);
}
tab.remove();
},
destroy: function (options) {
return $(this).each(function () {
var $this = $(this);
$this.removeData('tabs');
});
}
}
$.fn.tabs = function () {
var method = arguments[0];
var args = arguments;
if (typeof (method) == 'object' || !method) {
method = methods.init;
} else if (methods[method]) {
method = methods[method];
args = $.makeArray(arguments).slice(1);
} else {
$.error('Method ' + method + ' does not exist on tw.tabs');
return this;
}
return method.apply(this, args);
}
}
)(jQuery);
.tabs {
width:100%;
height:100%;
}
.tabs .tab-headers {
margin:0;
padding:0 10px;
height:40px;
list-style:none;
background:#f5f5f5;
border-bottom:1px solid #ccc;
}
.tabs .tab-headers .tab-header {
float:left;
height:30px;
font-size:12px;
padding:7px 15px 0;
margin-top:10px;
margin-right:5px;
border:1px solid #ccc;
border-bottom:none;
position:relative;
cursor:pointer;
}
.tabs .tab-headers .tab-header:hover {
background:#ccc;
color:#0094ff;
}
.tabs .tab-headers .tab-header.selected {
background:#fff;
border:none;
cursor:default;
padding-top:5px;
margin-left:1px;
margin-right:6px;
border-top:3px solid #0094ff;
}
.tabs .tab-headers .tab-header .tab-title {
margin-left:5px;
}
.tabs .tab-headers .tab-header .fa-close {
position:relative;
right:-6px;
top:0;
}
.tabs .tab-headers .tab-header .tab-close:hover {
color:#f00;
cursor:pointer;
}
.tabs .tab-contents {
width: 100%;
height: calc(100% - 40px);
}
.tabs .tab-contents .tab-content {
display:none;
}
.tabs .tab-contents .tab-content.selected {
display: block;
width: 100%;
height: 100%;
overflow: hidden;
}
.tabs .tab-contents .tab-content.selected iframe {
width: 100%;
height: 100%;
border: none;
}
本文已被整理到了jquery选项卡操作方法汇总、大家还可以点击javascript选项卡操作方法汇总进行学习。
