控件这东西网上找的多少都有些功能不如意的，只能自己动手来写了。
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></ul>"));
$this.append($("<div></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 data-tab='" + tab.id + "'>" +
"<i></i>" +
"<span>" + tab.name + "</span></li>");
if (tab.canClose) {
var close = $("<i></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 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; }