控件这东西网上找的多少都有些功能不如意的，只能自己动手来写了。
Tabs插件很多人都需要用到，网上也有很多的例子，但是不是风格不搭调就是用着不习惯（自己写的不一定比别人的好但用着顺手
）
下面直接贴代码，不喜勿喷：
1 (function ($) {
2 'use strict';
3 var defaults = {
4 type: "iframe",
5 onchanged: null,
6 style: {
7 header_panel: "tab-headers",
8 content_panel: "tab-contents",
9 header: "tab-header",
10 content: "tab-content",
11 selected: "selected",
12 icon_base: "fa",
13 icon_close: "fa-close"
14 }
15 }
16 var methods = {
17 init: function (options) {
18 return this.each(function () {
19 var $this = $(this);
20 if (!$this.hasClass("tw.tabs")) {
21 $this.addClass("tabs");
22 }
23 var settings = $this.data('tw.tabs');
24 if (typeof (settings) == 'undefined') {
25 settings = $.extend({}, defaults, options);
26 $this.data('tw.tabs', settings);
27 } else {
28 settings = $.extend({}, settings, options);
29 $this.data('tw.tabs', settings);
30 }
31 $this.empty();
32 $this.append($("<ul class='" + settings.style.header_panel + "'></ul>"));
33 $this.append($("<div class='" + settings.style.content_panel + "'></div>"));
34 if (settings.data) {
35 if (typeof settings.data === 'string') {
36 settings.data = $.parseJSON(settings.data);
37 }
38 $.each(settings.data, function () {
39 $this.tabs("add", this);
40 });
41 }
42 });
43 },
44 add: function (tab) {
45 var $this = $(this);
46 var settings = $this.data("tw.tabs");
47 var headers = $this.find("." + settings.style.header_panel);
48 var contents = $this.find("." + settings.style.content_panel);
49 if (headers.find("[data-tab='" + tab.id + "']").length == 0) {
50 var header = $("<li class='" + settings.style.header + "' data-tab='" + tab.id + "'>" +
51 "<i class='" + settings.style.icon_base + "" + tab.icon + "'></i>" +
52 "<span class='tab-title'>" + tab.name + "</span></li>");
53 if (tab.canClose) {
54 var close = $("<i class='" + settings.style.icon_base + "" + settings.style.icon_close + "'></i>");
55 close.click(function () {
56 $this.tabs("remove", tab.id);
57 });
58 header.append(close);
59 }
60 header.data("tw.tab", tab);
61 header.click(function () {
62 $this.tabs("select", tab);
63 });
64 headers.append(header);
65 var content = $("<div class='" + settings.style.content + "' data-tab='" + tab.id + "'></div>");
66 if (settings.type == "iframe") {
67 content.append("<iframe src='" + tab.url + "?target_id=" + tab.id + "'></iframe>");
68 } else if (settings.type == "ajax"){
69 $.ajax({
70 url: tab.url,
71 type: "post",
72 async: false,
73 data: { target_id: tab.id },
74 success: function (result) {
75 content.html(result);
76 }
77 });
78 } else {
79 content.html(tab.content);
80 }
81 contents.append(content);
82 if (tab.selected) {
83 $this.tabs("select", tab);
84 }
85 } else {
86 $this.tabs("select", tab);
87 }
88 },
89 select: function (tab) {
90 var $this = $(this);
91 var settings = $this.data("tw.tabs");
92 $this.find("." + settings.style.selected).removeClass(settings.style.selected);
93 if (typeof tab == "object") {
94 $this.find("[data-tab='" + tab.id + "']").addClass(settings.style.selected);
95 } else {
96 $this.find("." + settings.style.header).eq(tab).addClass(settings.style.selected);
97 $this.find("." + settings.style.content).eq(tab).addClass(settings.style.selected);
98 }
99 if (settings.onchanged) {
100 settings.onchanged(tab);
101 }
102 },
103 refresh: function () {
104 var $this = $(this);
105 var selected = $this.find("." + settings.style.selected);
106 var tab = $this.find("." + settings.style.header).data("tw.tab");
107 if (settings.type == "iframe") {
108 selected.find("iframe").attr('src', tab.url + "?target_id=" + tab.id);
109 } else if (settings.type == "ajax") {
110 $.ajax({
111 url: tab.url,
112 type: "post",
113 async: false,
114 data: { target_id: tab.id },
115 success: function (result) {
116 content.html(result);
117 }
118 });
119 } else {
120 content.html(tab.content);
121 }
122 },
123 remove: function (id) {
124 var $this = $(this);
125 var settings = $this.data("tw.tabs");
126 var tab = $this.find("[data-tab='" + id + "']");
127 if (tab.find("." + settings.style.selected)) {
128 var index = tab.eq(0).index() - 1;
129 $this.tabs("select", index);
130 }
131 tab.remove();
132 },
133 destroy: function (options) {
134 return $(this).each(function () {
135 var $this = $(this);
136 $this.removeData('tabs');
137 });
138 }
139 }
140 $.fn.tabs = function () {
141 var method = arguments[0];
142 var args = arguments;
143 if (typeof (method) == 'object' || !method) {
144 method = methods.init;
145 } else if (methods[method]) {
146 method = methods[method];
147 args = $.makeArray(arguments).slice(1);
148 } else {
149 $.error('Method ' + method + ' does not exist on tw.tabs');
150 return this;
151 }
152 return method.apply(this, args);
153 }
154 }
155 )(jQuery);
1 .tabs {
2 width:100%;
3 height:100%;
4 }
5 .tabs .tab-headers {
6 margin:0;
7 padding:0 10px;
8 height:40px;
9 list-style:none;
10 background:#f5f5f5;
11 border-bottom:1px solid #ccc;
12 }
13 .tabs .tab-headers .tab-header {
14 float:left;
15 height:30px;
16 font-size:12px;
17 padding:7px 15px 0;
18 margin-top:10px;
19 margin-right:5px;
20 border:1px solid #ccc;
21 border-bottom:none;
22 position:relative;
23 cursor:pointer;
24 }
25 .tabs .tab-headers .tab-header:hover {
26 background:#ccc;
27 color:#0094ff;
28 }
29 .tabs .tab-headers .tab-header.selected {
30 background:#fff;
31 border:none;
32 cursor:default;
33 padding-top:5px;
34 margin-left:1px;
35 margin-right:6px;
36 border-top:3px solid #0094ff;
37 }
38 .tabs .tab-headers .tab-header .tab-title {
39 margin-left:5px;
40 }
41 .tabs .tab-headers .tab-header .fa-close {
42 position:relative;
43 right:-6px;
44 top:0;
45 }
46 .tabs .tab-headers .tab-header .tab-close:hover {
47 color:#f00;
48 cursor:pointer;
49 }
50 .tabs .tab-contents {
51 width: 100%;
52 height: calc(100% - 40px);
53 }
54 .tabs .tab-contents .tab-content {
55 display:none;
56 }
57 .tabs .tab-contents .tab-content.selected {
58 display: block;
59 width: 100%;
60 height: 100%;
61 overflow: hidden;
62 }
63 .tabs .tab-contents .tab-content.selected iframe {
64 width: 100%;
65 height: 100%;
66 border: none;
67 }