Probleme mit der Bootstrap-Tab-Erweiterung

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 nbsp;html> 2 
  3  4     <meta> 5    
  <title></title> 6     <link> 7     
  <script></script> 8     <script></script> 9     
  <script></script>10     <style>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 21 22     <div></div>23 
      24 25 26 <script>27     $(function () {28        
       var toolbar = $(&#39;<div class="btn-group"></script>

');29                 $("#tabtest").before(toolbar);30                 Tabs.init({ selector: $("#tabtest"), close: true });31                 for (var i = 1; i ' + i + '').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     });         

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 = $('

' + this.options.title + '×

'); 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 a:first").tab("show"); 55             }; 56  57             var li = _drop.options.ulpanel.children("li:first"); 58             if (li.length  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 

'); 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 = $('

').data("data", $.extend(true, {}, option));108                 if (!option.url) {109                     page.html(option.content);110                 } else {111                            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 = $('

');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  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 = $('

').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!