부트스트랩 탭 확장 문제

최근에 부트스트랩을 사용했는데 이전에 사용했던 easyui와는 컨트롤이 너무 달라서 직접 작성해야 합니다.

탭 컨트롤을 확장하는 데 몇 시간을 보냈습니다. 다음은 코드입니다

페이지 코드:

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

코드 보기

제어 코드:

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

코드 보기

효과는 다음과 같습니다.

위 내용은 부트스트랩 탭 확장 문제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!