最近用了下bootstrap,虽然好看，但是控件跟之前用的easyui相差很大，功能太少，不得不自己写。
花了几个小时把tabs控件扩展了下。下面是代码
页面代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <link href="Content/bootstrap.css" rel="stylesheet" /> 7 <script src="Scripts/jquery-1.10.2.js"></script> 8 <script src="Scripts/bootstrap.js"></script> 9 <script src="Scripts/lwFW.js"></script> 10 <style type="text/css"> 11 .pagetabs{height:41px;} 12 .nav-tabs > li{padding: 0 1px;} 13 .nav-tabs > li > a{color: #555;padding:8px 25px 8px 15px;border-top:4px solid transparent;background-color:#eee;border:1px solid #ddd;border-bottom-color:transparent;} 14 .nav-tabs > li > a > .close{display:inline-block;float:inherit;position: absolute;top: 1px;font-size: 18px;font-weight: inherit;right: 5px;} 15 .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus{border-top: 4px solid #ffa405;} 16 .nav-tabs > li > a:hover{background-color:#e3e3e3;border:1px solid #ddd;border-bottom-color:transparent;} 17 .pagetabs .dropdown-toggle,.pagetabs .dropdown-toggle:hover{border:none;background-color:transparent;padding:8px;} 18 .pagetabs .open > .dropdown-toggle, .pagetabs .open > .dropdown-toggle:hover, .pagetabs .open > .dropdown-toggle:focus{background-color:transparent;} 19 </style> 20 </head> 21 <body> 22 <div id="tabtest" style="width:600px;"></div> 23 24 </body> 25 </html> 26 <script> 27 $(function () { 28 var toolbar = $('<div class="btn-group"></div>'); 29 $("#tabtest").before(toolbar); 30 Tabs.init({ selector: $("#tabtest"), close: true }); 31 for (var i = 1; i <= 40; i++) { 32 (function (i) { 33 toolbar.append($('<button type="button" class="btn btn-default">' + i + '</button>').click(function () { 34 Tabs.addtab({ title: "测试" + i, bindcode: i, content: i + " " + lwFW.dateHelper.toString(new Date(), "yyyy-MM-dd HH:mm:ss") }); 35 //Tabs.addtab({ title: "测试" + i, bindcode: i, url: "http://www.baidu.com" }); 36 })); 37 })(i); 38 }; 39 }); 40 </script>
控件代码：
1 //选项卡 2 var Tabs = (function ($) { 3 var options = { 4 selector: undefined,// 5 close: false,//是否可以关闭标签 6 //contextmenu: false,//右键菜单 7 closeCallback: function () { } 8 }; 9 var _newtab; 10 var _tabcontent; 11 var _drop; 12 13 var tab = function () { 14 this.options = { 15 title: "", 16 bindcode: undefined, 17 url: undefined, 18 close: false 19 }; 20 var isfull = false; 21 this.init = function (setting) { 22 $.extend(this.options, setting); 23 }; 24 this.addtab = function (setting) { 25 $.extend(this.options, setting); 26 var li, litop, hasdata; 27 if (!_drop) { 28 _drop = new droplist(); 29 }; 30 hasdata = ishas(this.options); 31 if (!hasdata.has) { 32 li = $('<li><a href="#page' + this.options.bindcode + '" data-toggle="tab">' + this.options.title + '<span class="close">×</span></a></li>'); 33 li.data("data", $.extend(true, {}, this.options)); 34 } else { 35 li = hasdata.selector.off("click"); 36 }; 37 li.prependTo(options.selector); 38 li.find("span.close").show().on("click", function () { 39 closetab(this); 40 }); 41 options.selector.children("li").not(li).removeClass("active"); 42 li.addClass("active"); 43 litop = _drop.options.selector.position().top, paneltop = options.selector.position().top; 44 if (litop > paneltop) { //超出检测 45 _drop.addDropItem(); 46 }; 47 }; 48 49 function closetab(target) { 50 var pager = $(target).parent().attr("href"); 51 $(target).closest("li").remove(); 52 options.selector.next().find(pager).remove(); 53 if (options.selector.find("li.active").length <= 0) { 54 options.selector.find("li>a:first").tab("show"); 55 }; 56 57 var li = _drop.options.ulpanel.children("li:first"); 58 if (li.length <= 0) return; 59 li.find("span.close").show(); 60 _drop.options.selector.before(li); 61 if (_drop.options.selector.position().top > options.selector.position().top) { 62 li.find("span.close").hide(); 63 _drop.options.ulpanel.append(li); 64 return; 65 }; 66 li.off("click"); 67 if (_drop.options.ulpanel.children("li").length <= 0) { 68 _drop.options.selector.css({ "visibility": "hidden" }); 69 }; 70 }; 71 72 function ishas(setting) {//检测选项卡是否存在 73 var lis = options.selector.find("li"), lidata, hasdata; 74 hasdata = { selector: undefined, has: false }; 75 $.each(lis, function () { 76 lidata = $(this).data("data"); 77 if (!lidata) return true; 78 if (lidata.title === setting.title && lidata.bindcode === setting.bindcode && lidata.url === setting.url) { 79 hasdata = { selector: $(this), has: true }; 80 return false; 81 }; 82 }); 83 return hasdata; 84 }; 85 }; 86 87 var tabcontent = function () { 88 this.options = { 89 selector:undefined 90 }; 91 var option = { 92 bindcode: undefined, 93 url: undefined, 94 content:undefined 95 }; 96 97 this.init = function () { 98 var content = $('<div class="tab-content"></div>'); 99 this.options.selector = content; 100 options.selector.after(this.options.selector); 101 }; 102 this.addContent = function (setting) { 103 var page,iframe; 104 $.extend(option, setting); 105 hasdata = ishas(option); 106 if (!hasdata.has) { 107 page = $('<div id="page' + option.bindcode + '" class="tab-pane"></div>').data("data", $.extend(true, {}, option)); 108 if (!option.url) { 109 page.html(option.content); 110 } else { 111 iframe = $('<iframe src="' + option.url + '" onload="lwFW.windowHelper.autoiframe(this)" scrolling="no"></iframe>'); 112 page.append(iframe); 113 }; 114 page.appendTo(this.options.selector); 115 } else { 116 page = hasdata.selector; 117 }; 118 this.options.selector.children("div").not(page).removeClass("active"); 119 page.addClass("active"); 120 }; 121 122 function ishas(setting) {//检测选项卡是否存在 123 var divs = _tabcontent.options.selector.children("div"), divdata, hasdata; 124 hasdata = { selector: undefined, has: false }; 125 $.each(divs, function () { 126 divdata = $(this).data("data"); 127 if (!divdata) return true; 128 if (divdata.bindcode === setting.bindcode) { 129 hasdata = { selector: $(this), has: true }; 130 return false; 131 }; 132 }); 133 return hasdata; 134 }; 135 }; 136 137 var droplist = function () { 138 this.options = { 139 selector: undefined, 140 ulpanel: undefined 141 }; 142 143 this.init = function (panel) { 144 var li = $('<li class="dropdown pull-right"><a class="dropdown-toggle" data-toggle="dropdown" href="#"><b class="caret"></b></a><ul class="dropdown-menu"></ul></li>'); 145 this.options.selector = li.css({ "visibility": "hidden" }); 146 this.options.ulpanel = li.children("ul"); 147 this.options.selector.appendTo(panel); 148 }; 149 150 this.addDropItem = function () { 151 additem(this.options.selector, this.options.ulpanel); 152 }; 153 154 function additem(li, ul) { 155 var item = options.selector.children("li").not(li).last(); 156 li.css({ "visibility": "visible" }); 157 if (item.length <= 0) return; 158 item.find("span.close").hide(); 159 ul.append(item); 160 item.one("click", function () { 161 itemtarget(this, li, ul); 162 }); 163 }; 164 165 function itemtarget(target, selector, ulpanel) { 166 var item = options.selector.children("li").not(selector).last(); 167 $(target).find("span.close").show(); 168 $(target).prependTo(options.selector); 169 if (item.length <= 0) return; 170 if (selector.position().top > options.selector.position().top) { 171 item.find("span.close").hide(); 172 ulpanel.append(item); 173 }; 174 item.one("click", function () { 175 itemtarget(this, selector, ulpanel); 176 }); 177 }; 178 }; 179 180 function init(setting) { 181 $.extend(options, setting); 182 if (!options.selector) { 183 return; 184 }; 185 if (options.selector[0].tagName.toLowerCase() != "ul") { 186 var selector = $('<ul class="nav nav-tabs pagetabs"></ul>').appendTo(options.selector); 187 options.selector = selector; 188 }; 189 if (!_drop) { 190 _drop = new droplist(); 191 }; 192 _drop.init(options.selector); 193 194 if (!_tabcontent) { 195 _tabcontent = new tabcontent(); 196 }; 197 _tabcontent.init(); 198 if (!_newtab) { 199 _newtab = new tab(); 200 }; 201 }; 202 203 function addtab(setting) { 204 if (!_newtab) { 205 _newtab = new tab(); 206 }; 207 _newtab.addtab(setting); 208 if (!_tabcontent) { 209 _tabcontent = new tabcontent(); 210 }; 211 _tabcontent.addContent(setting); 212 options.selector.find('li>a').filter('[href=#page' + setting.bindcode + ']').tab("show"); 213 }; 214 215 return { 216 init: function (setting) { 217 init(setting); 218 }, addtab: function (setting) { 219 addtab(setting); 220 } 221 }; 222 })(jQuery);
效果如下：
