Maison > Article > interface Web > Problèmes avec l'extension de l'onglet bootstrap
Problèmes avec l'extension de l'onglet bootstrap
- 零下一度original
- 2017-06-26 10:18:001323parcourir
J'ai récemment utilisé bootstrap. Bien que cela ait l'air bien, les contrôles sont très différents de l'easyui que j'utilisais auparavant. Il y a trop peu de fonctions, je dois donc les écrire moi-même.
Il a fallu quelques heures pour étendre le contrôle des onglets. Voici le code
code de la page :
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>contrôle 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);L'effet est le suivant :
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Charles Proxy 4.1.2 version crackéeArticle suivant：Charles Proxy 4.1.2 version crackée
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript