最近用了下bootstrap,虽然好看，但是控件跟之前用的easyui相差很大，功能太少，不得不自己写。
花了几个小时把tabs控件扩展了下。下面是代码
页面代码：
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>
view 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);
view code
效果如下：
以上就是bootstrap选项卡扩展出现的问题的详细内容。