用了下bootstrap,虽然好看,但是控件跟之前用的easyui相差很大,功能太少,不得不自己写。
花了几个小时把tabs控件扩展了下。下面是代码
控件代码:
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.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,content:undefined
};
this.init = function () {
var content = $('<div class="tab-content"></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 + '" class="tab-pane"></div>').data("data",option));
if (!option.url) {
page.html(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,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 class="dropdown pull-right"><a class="dropdown-toggle" data-toggle="dropdown" href="#" rel="external nofollow" ><b class="caret"></b></a><ul class="dropdown-menu"></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",ulpanel);
});
};
};
function init(setting) {
$.extend(options,setting);
if (!options.selector) {
return;
};
if (options.selector[0].tagName.toLowerCase() != "ul") {
var selector = $('<ul class="nav nav-tabs pagetabs">').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);