bootstrap選項卡擴充出現的問題-js教程-PHP中文網

最近用了下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?1.1.11" rel="stylesheet" /> 7     
  <script src="Scripts/jquery-1.10.2.js?1.1.11"></script> 8     <script src="Scripts/bootstrap.js?1.1.11"></script> 9     
  <script src="Scripts/lwFW.js?1.1.11"></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($(&#39;<button type="button" class="btn btn-default">' + i + '</button>').click(function ()
        {                    
        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     });
        </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&#39; + this.options.bindcode + &#39;" 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 = $(&#39;<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&#39; + option.bindcode + &#39;" class="tab-pane"></div>').data("data", $.extend(true, {}, option));108                 if (!option.url) {109                     page.html(option.content);110                 } else {111                    
       iframe = $('<iframe src="&#39; + option.url + &#39;" 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: undefined141         };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     };
             
         function addtab(setting) 
         {        
          if (!_newtab) {205             
          _newtab = new tab();206         };
         _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     };
          return {216         init: function (setting) {217             init(setting);218         },
           addtab: function (setting) {219             addtab(setting);220         }221     };222 })
           (jQuery);

登入後複製

View Code

#效果如下：

以上是bootstrap選項卡擴充出現的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！