bootstrap选项卡扩展功能详解

bootstrap选项卡扩展功能详解

用了下bootstrap，虽然好看，但是控件跟之前用的easyui相差很大，功能太少，不得不自己写。

花了几个小时把tabs控件扩展了下。下面是代码

页面代码：

控件代码：

//选项卡

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.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 &DyLIQvWlt;= 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 = $('

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 = $('

if (!option.url) {

page.html(option.content);

} else {

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 = $('

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(itehttp://m);

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 = $('

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);

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。