Heim >Web-Frontend >js-Tutorial >Probleme mit der Bootstrap-Tab-Erweiterung

Probleme mit der Bootstrap-Tab-Erweiterung

零下一度Original: 2017-06-26 10:18:001383Durchsuche

Ich habe kürzlich Bootstrap verwendet, aber die Steuerung unterscheidet sich stark von der EasyUI, die ich zuvor verwendet habe. Es gibt zu wenige Funktionen, daher muss ich sie selbst schreiben.

Es hat ein paar Stunden gedauert, die Tabs-Steuerung zu erweitern. Das Folgende ist der Code

Seitencode:

 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>

Code anzeigen

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

Code anzeigen

Der Effekt ist wie folgt:

Das obige ist der detaillierte Inhalt vonProbleme mit der Bootstrap-Tab-Erweiterung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Charles Proxy 4.1.2 Crack-VersionNächster Artikel：Charles Proxy 4.1.2 Crack-Version

In Verbindung stehende Artikel

Mehr sehen