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($('<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>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' + this.options.bindcode + '" 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 = $('<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' + option.bindcode + '" class="tab-pane"></div>').data("data", $.extend(true, {}, option));108 if (!option.url) {109 page.html(option.content);110 } else {111
iframe = $('<iframe src="' + option.url + '" 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);
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!
Was passiert, wenn phpmyadmin nicht darauf zugreifen kann?
Detaillierte Erklärung des Befehls imp in Oracle
So laden Sie Binance herunter
Was bedeutet „Hinzufügen' in Java?
So öffnen Sie eine Statusdatei
Welche Fähigkeiten sind erforderlich, um in der PHP-Branche zu arbeiten?
Häufige Situationen eines MySQL-Indexfehlers
So öffnen Sie eine PHP-Datei
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
