최근에 부트스트랩을 사용했는데 이전에 사용했던 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 = $('<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
