我的开源框架之TAB控件
需求
（1）支持iframe、html、json格式的tab内容远程请求
（2）支持动态添加tab
（3）支持远程加载完成监听，支持tab激活事件监听
（4）支持reload tab内容【如果是远程加载】
（5）支持邮件菜单【未实现】
实现图例
客户代码
1 <body>
2 <div id="text">
3 <h3>无题</h3>
4 <p>月落湖面两清影，</p>
5 <p>岸柳丝丝弄轻盈。</p>
6 <p>此番凉意写不出，</p>
7 <p>难画秋月一片晴。</p> </div>
8 <div style="padding-left:100px; padding-bottom:12px;">
9 <div id="tabContainer" style="800px;height:260px">
10 <div title="静态html" closable="true" >项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1项目1</div>
11 <div title="iframe加载" isiframe="true" url="/innerpage.html" iconcls="icon-edit" closable="true">
12 </div>
13 <div title="远程HTML加载" dataType="html" url="/content.html" iconcls="icon-save" closable="true">
14 </div>
15 </div>
16 </div>
17 <script type="text/javascript">
18 var tabs;
19 $(function () {
20 tabs = $("#tabContainer").tabs({
21 items: [{
22 title: '远程加载JSON数据',
23 closable: false,
24 iconcls: 'icon-print',
25 actived: true,// 激活状态
26 url: 'testServer/jsonQuestTest.ashx',//如果不配置采用公用 $.fn.tabs.defaults里的配置
27 dataType: 'json'// //如果不配置采用公用 $.fn.tabs.defaults里的配置
28 },{
29 title: '文本测试',
30 closable: false,
31 iconcls: 'icon-back',
32 actived: false,// 激活状态
33 content: $("#text") //'<a>我是测试内容.....................</a>'// 可以是文本,可以是$("#id")对象
34 }],
35 onLoadSuccess: function (title, context) {
36 console.log(title + "加载完成");
37 if (title == "远程加载JSON数据" || title == "动态添加tab") {
38 context.target.html(JSON.stringify(context.data));
39 }
40 },
41 activedHandler: function (tilte,context) {
42 console.log("actived=" + tilte);
43 },
44 closedHandler: function (title) {
45 console.log("closed=" + title);
46 }
47 });
48 });
49 function addTab() {
50 tabs.tabs("addTabs", {
51 title: '动态添加tab',
52 closable: true,
53 iconcls: 'icon-back',
54 actived: false,// 激活状态
55 //content: '<a>我是动态tab内容</a>'
56 url: 'testServer/jsonQuestTest.ashx',//如果不配置采用公用 $.fn.tabs.defaults里的配置
57 dataType: 'json',// //如果不配置采用公用 $.fn.tabs.defaults里的配置
58 onLoadSuccess: function (title, context) {
59 context.target.html(title+"loadsucc；我自己注册的事件 "+JSON.stringify(context.data));
60 }
61 });
62 }
63 function getSelectedTab() {
64 var res = tabs.tabs("getSelectedTab");
65 alert(res.titleObj.attr("title"));
66 }
67 function reload() {
68 var itemsopt = $("#itemsopt").children("option[selected]");
69 tabs.tabs("reLoadTab", itemsopt.val());
70 if (tabs.tabs("isExist", itemsopt.val())) {
71 console.log(itemsopt.val()+"exist");
72 } else {
73 console.log(itemsopt.val() + "no exist");
74 }
75
76 }
77 </script>
78 </body>
组件代码
1 /**************************************************************
2 *作者:hjwen
3 *电邮:hjwen88@126.com
4 *版本：1.0
5 *版权许可：中国通用开源许可协议V1.0
6 *说明：myui组件tabs组件
7 ***************************************************************/
8 (function ($) {
9 /******
10 *渲染目标：renderHtml为构建html结构的函数，init初始化会调用
11 *******/
12 var contentPadding = 6;
13 var showTitleItem = null;
14 var showContentItem = null;
15 var itemTitleContainer, itemContentContainer, existItems;
16 var headerWith = 0;
17 var itemsWidth = 0;
18 var leftMoreBtn = null, rightMoreBtn = null;
19 function renderHtml(target, opts) {
20 itemContentContainer = target;
21 var panel = target.panel({ expandable: false, maximizable: false, closeable: false, expanded: false });
22 var titleWrap = target.prev("div");
23 headerWith = titleWrap.width();
24 var panelTitle = titleWrap.children(".panel-tilte");
25 itemTitleContainer = $("<ul class="tabsul"></ul>").appendTo(panelTitle);
26 target.css({ "overflow": "hidden", "padding": "0px" });
27 existItems.css({ "width": target.width() - contentPadding * 2 + "px", "height": target.height() - contentPadding * 2 + "px", "margin": "0px", "padding": contentPadding + "px", "overflow": "auto" }).hide();
28 createTabs(opts.items);
29 existItems = null;
30 };
31 /**********私有方法开始********************/
32 function createTabs(items) {
33 $.each(items, function (i, item) {
34 createTab(item, i);
35 });
36 showContentItem.show();
37 showTitleItem.attr("actived", "true").children("a").addClass("tabs_selected").css("border-bottom", "1px solid #FFFFFF");
38 }
39 function createTab(item, index) {
40 //创建tab标题项
41 var a_tag = "<a href='javascript:void(0)'>";
42 if (item.iconcls != '')
43 a_tag = a_tag + "<span class='item_title_ioc " + item.iconcls + "'></span>";
44 if (item.closable)
45 a_tag = a_tag + "<span class='item_title_text'>" + item.title + "</span><span for=" + index + " class='item_title_close' ></span></a>";
46 else
47 a_tag = a_tag + "<span class='item_title_text'>" + item.title + "</span></a>";
48 var itemTitleLi = $("<li contextmenu="" + item.contextMenu + "" datatype="" + item.dataType + "" url="" + item.url + "" isiframe="" + item.isiframe + "" title="" + item.title + "" closable="" + item.closable + "" actived="" + item.actived + "" for=" + index + ">" + a_tag + "</li>").appendTo(itemTitleContainer);
49 itemTitleLi.bind({
50 "click": function () {
51 var $this = $(this);
52 if ($this.attr("actived") == "true")
53 return;
54 var idx = $this.attr("for");
55 showContentItem.hide();
56 showTitleItem.attr("actived", "false").children("a").removeClass("tabs_selected").css("border-bottom", "1px solid #99BBE8");
57 $.each(itemContentContainer.children("div"), function (j, obj) {
58 var $obj = $(obj);
59 if (j == parseInt(idx)) {
60 $this.attr("actived", "true").children("a").addClass("tabs_selected").css("border-bottom", "1px solid #FFFFFF");
61 showContentItem = $obj.show();
62 showTitleItem = $this;
63 }
64 });
65 if (item.activedHandler != null) {
66 item.activedHandler(showTitleItem.attr("title"), { titleObj: showTitleItem, conetentObj: showContentItem });
67 }
68 }
69 });
70 //如果可以关闭
71 if (item.closable) {
72 itemTitleLi.children("a").children(".item_title_close").bind({
73 click: function () {
74 var allIts = itemContentContainer.children("div");
75 var $t = $(this);
76 var foridx = parseInt($t.attr("for"));
77 var removeContent = null;
78 for (var k = 0, len = allIts.length; k < len; ++k) {
79 if (foridx == k) {
80 removeContent = $(allIts[k]);
81 break;
82 }
83 };
84 //如果关闭的是激活的tab，则需要调整激活的tab
85 var showIdx = 0;
86 var titleLi = $t.parent("a").parent("li");
87 if (titleLi.attr("actived") == "true") {
88 var showIt = titleLi.prev("li");
89 showIdx = foridx - 1;
90 if (showIt.length == 0) {
91 showIt = titleLi.next("li");
92 showIdx = foridx + 1;
93 }
94 showTitleItem = showIt;
95 showTitleItem.attr("actived", "true").children("a").addClass("tabs_selected").css("border-bottom", "1px solid #FFFFFF");
96 //激活对应的内容div
97 for (var k = 0, len = allIts.length; k < len; ++k) {
98 if (showIdx == k) {
99 $(allIts[k]).show();
100 break;
101 }
102 };
103 }
104 //修改删除项目后面所有li项的for属性
105 var nextAll = titleLi.nextAll();
106 if (nextAll.length > 0) {
107 setTimeout(function () {
108 $.each(nextAll, function (j, obj) {
109 var $obj = $(obj);
110 var curFor = parseInt($obj.attr("for"));
111 var newFor = curFor - 1;
112 $obj.attr("for", newFor);
113 $obj.children("a").children(".item_title_close").attr("for", newFor);
114 });
115 }, 0);
116 }
117 var title = titleLi.attr("title");
118 itemsWidth = itemsWidth - titleLi.outerWidth()-11;
119 titleLi.remove();
120 removeContent.remove();
121 showMoreBtn();
122 if (item.closedHandler != null)
123 item.closedHandler(title);
124 },
125 mouseover: function () {
126 $(this).css("background-color", "#8DE2B3");
127 },
128 mouseout: function () {
129 $(this).attr("style", "");
130 }
131 });
132 }
133 var contentDiv;
134 if (item.exist) {//已经存在的不用再创建内容div
135 contentDiv = $(existItems[index]);
136 } else {
137 contentDiv = $("<div></div>").appendTo(itemContentContainer).css({ "width": itemContentContainer.width() - contentPadding * 2 + "px", "height": itemContentContainer.height() - contentPadding * 2 + "px", "margin": "0px", "padding": contentPadding + "px", "overflow": "auto" }).hide();;
138 }
139 if (item.content != "") {//优先取content
140 if ($.isPlainObject(item.content)) {
141 item.content.remove().appendTo(contentDiv);
142 } else {
143 contentDiv.html(item.content);
144 }
145 } else {
146 //是否有url 远程加载
147 if (item.url != "") {
148 load(contentDiv, item,false);
149 }
150 }
151 if (index == 0) {//默认第一个为激活状态
152 showTitleItem = itemTitleLi;
153 showContentItem = contentDiv;
154 }
155 if (item.actived) {
156 showTitleItem = itemTitleLi;
157 showContentItem = contentDiv;
158 }
159 itemsWidth = itemsWidth + itemTitleLi.outerWidth()+11;
160 showMoreBtn();
161 };
162 function load(target,item,isReload) {
163 if (item.isiframe) {
164 target.css({ "overflow": "hidden", "padding": "0", "width": target.width() + contentPadding * 2 + "px", "height": target.height() + contentPadding * 2 + "px" });
165 var loading = $("<div class='loading icon-loading'>正在加载......</div>").appendTo(target);
166 var iframe;
167 if (isReload) {
168 iframe = target.children("iframe")[0];
169 iframe.contentWindow.location.reload();
170 } else {
171 iframe = $("<iframe title='" + item.title + "' frameborder='0' style='overflow:visible' scrolling='auto' width='100%' height='100%' src='" + item.url + "' ></iframe>").appendTo(target);
172 iframe.load(function () {
173 loading.remove();
174 if (item.onLoadSuccess != null)
175 item.onLoadSuccess($(this).attr('title'), target);
176 });
177 }
178 } else {
179 if (item.dataType == "json") {
180 var ajaxopt = {
181 url: item.url,
182 loadingContainer: target,
183 returnParams: true,
184 params: { title: encodeURIComponent(item.title) }
185 };
186 if (item.onLoadSuccess != null)
187 ajaxopt.okdeal = function (data, extParams) {
188 item.onLoadSuccess(decodeURIComponent(extParams.title), { data: data, target: target });
189 };
190 $.myui.ajaxRequest(ajaxopt);
191 } else {
192 var settings = { url: item.url, extParam: item.title };
193 if (item.onLoadSuccess != null)
194 settings.loaded = function (t, extParam) {
195 item.onLoadSuccess(extParam, t);
196 };
197 $.myui.objectLoadContect({
198 target: target,
199 settings: settings
200 });
201 }
202 }
203 };
204 function showMoreBtn() {
205 if (itemsWidth > headerWith) {
206 itemTitleContainer.css("padding-left","9px");
207 if (leftMoreBtn == null) {
208 var headerWrap = itemTitleContainer.parent("div").parent("div");
209 leftMoreBtn = $("<a class='leftMoreBtn'></a>").appendTo(headerWrap);
210 rightMoreBtn = $("<a class='rightMoreBtn'></a>").appendTo(headerWrap);
211 leftMoreBtn.bind('click', function () {
212 var position = itemTitleContainer.position();
213 if (position.left < 9) {
214 var pos = position.left +80;
215 itemTitleContainer.animate({ left: pos },500);
216 }
217 });
218 rightMoreBtn.bind('click', function () {
219 var position = itemTitleContainer.position();
220 var pos = position.left -80;
221 itemTitleContainer.animate({ left: pos},500);
222 });
223 } else {
224 leftMoreBtn.show();
225 rightMoreBtn.show();
226 }
227 var diff = itemsWidth - headerWith;
228 itemTitleContainer.animate({ left: -diff }, 500);
229 } else {
230 if (leftMoreBtn != null) {
231 itemTitleContainer.css("padding-left", "0px");
232 leftMoreBtn.hide();
233 rightMoreBtn.hide();
234 var position = itemTitleContainer.position();
235 if (position.left < 0) {
236 itemTitleContainer.animate({ left: 0 }, 500);
237 }
238 }
239 }
240 }
241 /**********私有方法结束*******************/
242 /*****************************************************************************
243 *对外的函数统一封装到methods中
244 *调用方式：$.pluginInstance.pluginName("methodName",params)
245 ******************************************************************************/
246 var methods = {
247 init: function (options) {
248 return this.each(function () {
249 var $this = $(this);
250 var settings
251 if (typeof options == 'undefined')
252 settings = $.fn.tabs.defaults;
253 else
254 settings = $.extend({}, $.fn.tabs.defaults, options);
255 var newItemArr = [];
256 existItems = $this.children("div");//已经存在的item项
257 if (existItems.length > 0) {
258 $.each(existItems, function (i, it) {
259 var $it = $(it);
260 newItemArr.push({
261 title: $it.attr("title"),
262 content: '',
263 contextMenu: false,
264 closable: $it.attr("closable") == "true" ? true : false,
265 iconcls: $it.attr("iconcls") == undefined ? "" : $it.attr("iconcls"),
266 actived: $it.attr("actived") == "true" ? true : false,// 激活状态
267 isiframe: $it.attr("isiframe") == "true" ? true : false,//如果不配置采用公用 $.fn.tabs.defaults里的配置
268 url: $it.attr("url") == undefined ? "" : $it.attr("url"),//如果不配置采用公用 $.fn.tabs.defaults里的配置
269 dataType: $it.attr("dataType") == undefined ? "json" : $it.attr("dataType"), //如果不配置采用公用 $.fn.tabs.defaults里的配置
270 exist: true, //
271 onLoadSuccess: settings.onLoadSuccess,//fn(tabtitle,resdata)
272 activedHandler: settings.activedHandler,//fn(tabtitle,context)
273 closedHandler: settings.closedHandler //fn(tabtitle) tab被关闭时触发
274 });
275 });
276 }
277 //合并每一个tab项的默认设置
278 $.each(settings.items, function (i, item) {
279 var newIt = $.extend({}, $.fn.tabs.itemdefaults, item);
280 newIt.exist = false;
281 if (typeof newIt.onLoadSuccess!='function')
282 newIt.onLoadSuccess = settings.onLoadSuccess;//fn(tabtitle,resdata)
283 if (typeof newIt.activedHandler != 'function')
284 newIt.activedHandler = settings.activedHandler;//fn(tabtitle,context)
285 if (typeof newIt.closedHandler != 'function')
286 newIt.closedHandler = settings.closedHandler; //fn(tabtitle) tab被关闭时触发
287 newItemArr.push(newIt);
288 });
289 settings.items = newItemArr;
290 //创建ui布局
291 renderHtml($this, settings);
292 if ($.myui.isDebug) {
293 $.myui.log("jQuery.tabs init finish......");
294 }
295 $this.data('settings', settings);
296 });
297 },
298 destroy: function (options) {
299 return $(this).each(function () {
300 var $this = $(this);
301 $this.removeData('settings');
302 });
303 },
304 /***
305 *opt={
306 title: 'tab标题',
307 closable: false,
308 iconcls: '',
309 actived: false,// 激活状态
310 isiframe: false,//如果不配置采用公用 $.fn.tabs.defaults里的配置
311 url: '',//如果不配置采用公用 $.fn.tabs.defaults里的配置
312 content: '',//内容默认为空，如果该属性有值，则优先默认采用这个，即使设置url也不会去远程加载数据，content可以是html对象，也可以是文本
313 dataType: 'json',// //如果不配置采用公用 $.fn.tabs.defaults里的配置
314 contextMenu: false //右键菜单未实现
315 }
316 ***/
317 addTabs: function (opts) {
318 var newOpt = $.extend({}, $.fn.tabs.itemdefaults, opts);
319 newOpt.actived = true;
320 return $(this).each(function () {
321 var $this = $(this);
322 var settings = $this.data('settings');
323 if (showContentItem != null)
324 showContentItem.hide();
325 if (showTitleItem != null)
326 showTitleItem.attr("actived", "false").children("a").removeClass("tabs_selected").css("border-bottom", "1px solid #99BBE8");
327 itemContentContainer = $this;
328 var index = $this.children("div").length;
329 if (typeof newOpt.onLoadSuccess != 'function')
330 newOpt.onLoadSuccess = settings.onLoadSuccess;//fn(tabtitle,resdata)
331 if (typeof newOpt.activedHandler != 'function')
332 newOpt.activedHandler = settings.activedHandler;//fn(tabtitle,context)
333 if (typeof newOpt.closedHandler != 'function')
334 newOpt.closedHandler = settings.closedHandler; //fn(tabtitle) tab被关闭时触发
335 createTab(newOpt, index);
336 showContentItem.show();
337 showTitleItem.attr("actived", "true").children("a").addClass("tabs_selected").css("border-bottom", "1px solid #FFFFFF");
338 });
339 },
340 /**
341 * 获取选中的tab，返回值{titleObj:...,contentObj:...}
342 ***/
343 getSelectedTab: function () {
344 return { titleObj: showTitleItem, contentObj: showContentItem };
345 },
346 /***
347 *重新加载某个tab，以title为标准
348 ****/
349 reLoadTab: function (title) {
350 var $this = $(this);
351 var titlelis = $this.prev().children(".panel-tilte").children("ul").children();
352 var forIdx = -1;
353 var url = '';
354 var isIframe = false;
355 var dataType = "html";
356 var currShowTitle = null;
357 for (var i = 0, len = titlelis.length; i < len; ++i) {
358 var $li = $(titlelis[i]);
359 if ($li.attr("title") == title && $li.attr("url") != undefined && $li.attr("url")!='') {
360 forIdx = i;
361 url = $li.attr("url");
362 if ($li.attr("isiframe") != undefined) {
363 isIframe = $li.attr("isiframe") == 'true';
364 }
365 if ($li.attr("datatype") != undefined) {
366 dataType = $li.attr("datatype");
367 }
368 currShowTitle = $li;
369 break;
370 }
371 }
372 if (forIdx != -1) {
373 var childs = $this.children();
374 var updateContent = null;
375 for (var i = 0, len = childs.length; i < len;++i){
376 if (i == forIdx) {
377 updateContent = $(childs[i]);
378 }
379 }
380 if (updateContent != null) {
381 var opts = $this.data('settings');
382 var it;
383 for (var j = 0, len = opts.items.length; j < len;++j){
384 if (forIdx == j)
385 it = opts.items[j];
386 }
387 if (showTitleItem.attr("title") != title) {
388 showContentItem.hide();
389 showTitleItem.attr("actived", "false").children("a").removeClass("tabs_selected").css("border-bottom", "1px solid #99BBE8");
390 showContentItem= updateContent.show();
391 showTitleItem = currShowTitle.attr("actived", "true");
392 showTitleItem.children("a").addClass("tabs_selected").css("border-bottom", "1px solid #FFFFFF");
393 }
394 load(updateContent, it, true);
395 }
396 }
397 return $this;
398 },
399 /****
400 * 判断某个tab是否存在
401 ****/
402 isExist: function (title) {
403 var $this = $(this);
404 var titlelis = $this.prev().children(".panel-tilte").children("ul").children();
405 var forIdx = -1;
406 for (var i = 0, len = titlelis.length; i < len; ++i) {
407 var $li = $(titlelis[i]);
408 if ($li.attr("title") == title && $li.attr("url") != undefined && $li.attr("url") != '') {
409 forIdx = i;
410 break;
411 }
412 }
413 if (forIdx > -1)
414 return true;
415 else
416 return false;
417 }
418 };
419 /********************
420 *组件的构造函数
421 *********************/
422 $.fn.tabs = function () {
423 var method = arguments[0];
424 if (methods[method]) {
425 method = methods[method];
426 arguments = Array.prototype.slice.call(arguments, 1);
427 } else if (typeof (method) == 'object' || !method) {
428 if ($.myui.isDebug) {
429 $.myui.log("jQuery.tabs init.....");
430 }
431 method = methods.init;
432 } else {
433 $.error('Method ' + method + ' does not exist on jQuery.tabs');
434 return this;
435 }
436 return method.apply(this, arguments);
437 };
438 /********************
439 *组件的默认配置值
440 *options={
441 items: [], //tab项配置，对应$.fn.tabs.itemdefaults
442 isiframe: false,// 是否嵌入iframe，嵌入iframe 需要与url配合使用，即采用url加载远程页面时【dataType=html】才起作用
443 url: '',
444 dataType: 'json',// json/html 远程加载时的数据格式
445 onLoadSuccess: null,//fn(tabtitle,resdata)
446 activedHandler: null,//fn(tabtitle,context)
447 closedHandler: null //fn(tabtitle) tab被关闭时触发
448 }
449 *********************/
450 $.fn.tabs.defaults = {
451 items: [], //tab项配置，对应$.fn.tabs.itemdefaults
452 isiframe: false,// 是否嵌入iframe，嵌入iframe 需要与url配合使用，即采用url加载远程页面时【dataType=html】才起作用
453 url: '',
454 dataType: 'json',// json/html 远程加载时的数据格式
455 onLoadSuccess: null,//fn(tabtitle,resdata)
456 activedHandler: null,//fn(tabtitle)
457 closedHandler: null //fn(tabtitle) tab被关闭时触发
458 };
459 /***
460 *每一个tab项目的默认配置
461 ****/
462 $.fn.tabs.itemdefaults = {
463 title: 'tab标题',
464 closable: false,
465 iconcls: '',
466 actived: false,// 激活状态
467 isiframe: false,//如果不配置采用公用 $.fn.tabs.defaults里的配置
468 url: '',//如果不配置采用公用 $.fn.tabs.defaults里的配置
469 content: '',//内容默认为空，如果该属性有值，则优先默认采用这个，即使设置url也不会去远程加载数据，content可以是html对象，也可以是文本
470 dataType: 'json',// //如果不配置采用公用 $.fn.tabs.defaults里的配置
471 contextMenu: false //右键菜单未实现
472 }
473 })(jQuery);
分类: 我的开源框架