bootstrap選項卡擴展，增加關閉，超出一行顯示下拉

最近用了下bootstrap,雖然好看，但是控制項跟之前用的easyui相差很大，功能太少，不得不自己寫。花了幾個小時把tabs控制項擴展了下。下麵是代碼頁面代碼： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Typ ...

最近用了下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>

View Code

控制項代碼：

  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);

View Code 效果如下：