用了下bootstrap，虽然好看，但是控件跟之前用的easyui相差很大，功能太少，不得不自己写。
花了几个小时把tabs控件扩展了下。下面是代码
页面代码：
!DOCTYPE html
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title /title
link href="Content/bootstrap.css" rel="external nofollow" rel="stylesheet" /
script src="Scripts/jquery-1.10.2.js" /script
script src="Scripts/bootstrap.js" /script
style type="text/css"
.pagetabs{height:41px;}
.nav-tabs li{padding: 0 1px;}
.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;}
.nav-tabs li a .close{display:inline-block;float:inherit;position: absolute;top: 1px;font-size: 18px;font-weight: inherit;right: 5px;}
.nav-tabs li.active a, .nav-tabs li.active a:hover, .nav-tabs li.active a:focus{border-top: 4px solid #ffa405;}
.nav-tabs li a:hover{background-color:#e3e3e3;border:1px solid #ddd;border-bottom-color:transparent;}
.pagetabs .dropdown-toggle,.pagetabs .dropdown-toggle:hover{border:none;background-color:transparent;padding:8px;}
/style
/head
body
div id="tabtest" /div
/body
/html
script
$(function () {
var toolbar = $(' div /div
$("#tabtest").before(toolbar);
Tabs.init({ selector: $("#tabtest"), close: true });
for (var i = 1; i = 40; i++) {
(function (i) {
toolbar.append($(' button type="button" ' + i + ' /button ').click(function () {
Tabs.addtab({ title: "测试" + i, bindcode: i, content: i + " " + lwFW.dateHelper.toString(new Date(), "yyyy-MM-dd HH:mm:ss") });
//Tabs.addtab({ title: "测试" + i, bindcode: i, url: "script
控件代码：
//选项卡
var Tabs = (function ($) {
var options = {
selector: undefined,//
close: false,//是否可以关闭标签
//contextmenu: false,//右键菜单
closeCallback: function () { }
var _newtab;
var _tabcontent;
var _drop;
var tab = function () {
this.options = {
title: "",
bindcode: undefined,
url: undefined,
close: false
var isfull = false;
this.init = function (setting) {
$.extend(this.options, setting);
this.addtab = function (setting) {
$.extend(this.options, setting);
var li, litop, hasdata;
if (!_drop) {
_drop = new droplist();
hasdata = ishas(this.options);
if (!hasdata.has) {
li = $(' li a href="#page' + this.options.bindcode + '" rel="external nofollow" data-toggle="tab" ' + this.options.title + ' span × /span /a /li
li.data("data", $.extend(true, {}, this.options));
} else {
li = hasdata.selector.off("click");
li.prependTo(options.selector);
li.find("span.close").show().on("click", function () {
closetab(this);
options.selector.children("li").not(li).removeClass("active");
li.addClass("active");
litop = _drop.options.selector.position().top, paneltop = options.selector.position().top;
if (litop paneltop) { //超出检测
_drop.addDropItem();
function closetab(target) {
var pager = $(target).parent().attr("href");
$(target).closest("li").remove();
options.selector.next().find(pager).remove();
if (options.selector.find("li.active").length = 0) {
options.selector.find("li a:first").tab("show");
var li = _drop.options.ulpanel.children("li:first");
if (li.length = 0) return;
li.find("span.close").show();
_drop.options.selector.before(li);
if (_drop.options.selector.position().top options.selector.position().top) {
li.find("span.close").hide();
_drop.options.ulpanel.append(li);
return;
li.off("click");
if (_drop.options.ulpanel.children("li").length = 0) {
_drop.options.selector.css({ "visibility": "hidden" });
function ishas(setting) {//检测选项卡是否存在
var lis = options.selector.find("li"), lidata, hasdata;
hasdata = { selector: undefined, has: false };
$.each(lis, function () {
lidata = $(this).data("data");
if (!lidata) return true;
if (lidata.title === setting.title lidata.bindcode === setting.bindcode lidata.url === setting.url) {
hasdata = { selector: $(this), has: true };
return false;
return hasdata;
var tabcontent = function () {
this.options = {
selector:undefined
var option = {
bindcode: undefined,
url: undefined,
content:undefined
this.init = function () {
var content = $(' div /div
this.options.selector = content;
options.selector.after(this.options.selector);
this.addContent = function (setting) {
var page,iframe;
$.extend(option, setting);
hasdata = ishas(option);
if (!hasdata.has) {
page = $(' div id="page' + option.bindcode + '" /div ').data("data", $.extend(true, {}, option));
if (!option.url) {
(option.content);
} else {
iframe = $(' iframe src="' + option.url + '" onload="lwFW.windowHelper.autoiframe(this)" scrolling="no" /iframe
page.append(iframe);
page.appendTo(this.options.selector);
} else {
page = hasdata.selector;
this.options.selector.children("div").not(page).removeClass("active");
page.addClass("active");
function ishas(setting) {//检测选项卡是否存在
var divs = _tabcontent.options.selector.children("div"), divdata, hasdata;
hasdata = { selector: undefined, has: false };
$.each(divs, function () {
divdata = $(this).data("data");
if (!divdata) return true;
if (divdata.bindcode === setting.bindcode) {
hasdata = { selector: $(this), has: true };
return false;
return hasdata;
var droplist = function () {
this.options = {
selector: undefined,
ulpanel: undefined
this.init = function (panel) {
var li = $(' li a data-toggle="dropdown" href="#" rel="external nofollow" b /b /a ul /ul /li
this.options.selector = li.css({ "visibility": "hidden" });
this.options.ulpanel = li.children("ul");
this.options.selector.appendTo(panel);
this.addDropItem = function () {
additem(this.options.selector, this.options.ulpanel);
function additem(li, ul) {
var item = options.selector.children("li").not(li).last();
li.css({ "visibility": "visible" });
if (item.length = 0) return;
item.find("span.close").hide();
ul.append(item);
item.one("click", function () {
itemtarget(this, li, ul);
function itemtarget(target, selector, ulpanel) {
var item = options.selector.children("li").not(selector).last();
$(target).find("span.close").show();
$(target).prependTo(options.selector);
if (item.length = 0) return;
if (selector.position().top options.selector.position().top) {
item.find("span.close").hide();
ulpanel.append(item);
item.one("click", function () {
itemtarget(this, selector, ulpanel);
function init(setting) {
$.extend(options, setting);
if (!options.selector) {
return;
if (options.selector[0].tagName.toLowerCase() != "ul") {
var selector = $(' ul /ul ').appendTo(options.selector);
options.selector = selector;
if (!_drop) {
_drop = new droplist();
_drop.init(options.selector);
if (!_tabcontent) {
_tabcontent = new tabcontent();
_tabcontent.init();
if (!_newtab) {
_newtab = new tab();
function addtab(setting) {
if (!_newtab) {
_newtab = new tab();
_newtab.addtab(setting);
if (!_tabcontent) {
_tabcontent = new tabcontent();
_tabcontent.addContent(setting);
options.selector.find('li a').filter('[href=#page' + setting.bindcode + ']').tab("show");
return {
init: function (setting) {
init(setting);
}, addtab: function (setting) {
addtab(setting);
})(jQuery);
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持凡科。
