Home  >  Article  >  Web Front-end  >  Problems with bootstrap tab extension

Problems with bootstrap tab extension

零下一度
零下一度Original
2017-06-26 10:18:001339browse

I recently used bootstrap. Although it looks good, the controls are very different from the easyui I used before. There are too few functions, so I have to write them myself.

It took a few hours to expand the tabs control. The following is the code

Page code:

 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

Control 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
The effect is as follows:

The above is the detailed content of Problems with bootstrap tab extension. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn