@H_502_0@控件这东西网上找的多少都有些功能不如意的，只能自己动手来写了。

@H_502_0@

Tabs插件

很多人都需要用到，网上也有很多的例子，但是不是风格不搭调就是用着不习惯（自己写的不一定比别人的好但用着顺手In love）

@H_502_0@下面直接贴代码，不喜勿喷：

<div class="jb51code">
<pre class="brush:js;">
(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,settings);
}
$this.empty();
$this.append($("

"));
$this.append($(""));
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 = $("

" +
"" +
"" + tab.name + "

");
if (tab.canClose) {
var close = $("");
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 = $("");
if (settings.type == "iframe") {
content.append("");
} 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,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);