好资源导航 » 文章资讯 » bootstrap选项卡扩展功能详解

bootstrap选项卡扩展功能详解

2024-02-19 20:16:02 53

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

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

页面代码：










.pagetabs{height:41px;}
.nav-tabs>li{padding:01px;}
.nav-tabs>li>a{color:#555;padding:8px25px8px15px;border-top:4pxsolidtransparent;background-color:#eee;border:1pxsolid#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:4pxsolid#ffa405;}
.nav-tabs>li>a:hover{background-color:#e3e3e3;border:1pxsolid#ddd;border-bottom-color:transparent;}
.pagetabs.dropdown-toggle,.pagetabs.dropdown-toggle:hover{border:none;background-color:transparent;padding:8px;}

控件代码：

//选项卡
varTabs=(function($){
varoptions={
selector:undefined,//
close:false,//是否可以关闭标签
//contextmenu:false,//右键菜单
closeCallback:function(){}
};
var_newtab;
var_tabcontent;
var_drop;

vartab=function(){
this.options={
title:"",
bindcode:undefined,
url:undefined,
close:false
};
varisfull=false;
this.init=function(setting){
$.extend(this.options,setting);
};
this.addtab=function(setting){
$.extend(this.options,setting);
varli,litop,hasdata;
if(!_drop){
_drop=newdroplist();
};
hasdata=ishas(this.options);
if(!hasdata.has){
li=$(''+this.options.title+'×');
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();
};
};

functionclosetab(target){
varpager=$(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");
};

varli=_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"});
};
};

functionishas(setting){//检测选项卡是否存在
varlis=options.selector.find("li"),lidata,hasdata;
hasdata={selector:undefined,has:false};
$.each(lis,function(){
lidata=$(this).data("data");
if(!lidata)returntrue;
if(lidata.title===setting.title&&lidata.bindcode===setting.bindcode&&lidata.url===setting.url){
hasdata={selector:$(this),has:true};
returnfalse;
};
});
returnhasdata;
};
};

vartabcontent=function(){
this.options={
selector:undefined
};
varoption={
bindcode:undefined,
url:undefined,
content:undefined
};

this.init=function(){
varcontent=$('

'); this.options.selector=content; options.selector.after(this.options.selector); }; this.addContent=function(setting){ varpage,iframe; $.extend(option,setting); hasdata=ishas(option); if(!hasdata.has){ page=$('

').data("data",$.extend(true,{},option)); 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"); }; functionishas(setting){//检测选项卡是否存在 vardivs=_tabcontent.options.selector.children("div"),divdata,hasdata; hasdata={selector:undefined,has:false}; $.each(divs,function(){ divdata=$(this).data("data"); if(!divdata)returntrue; if(divdata.bindcode===setting.bindcode){ hasdata={selector:$(this),has:true}; returnfalse; }; }); returnhasdata; }; }; vardroplist=function(){ this.options={ selector:undefined, ulpanel:undefined }; this.init=function(panel){ varli=$('

'); 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); }; functionadditem(li,ul){ varitem=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); }); }; functionitemtarget(target,selector,ulpanel){ varitem=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); }); }; }; functioninit(setting){ $.extend(options,setting); if(!options.selector){ return; }; if(options.selector[0].tagName.toLowerCase()!="ul"){ varselector=$('').appendTo(options.selector); options.selector=selector; }; if(!_drop){ _drop=newdroplist(); }; _drop.init(options.selector); if(!_tabcontent){ _tabcontent=newtabcontent(); }; _tabcontent.init(); if(!_newtab){ _newtab=newtab(); }; }; functionaddtab(setting){ if(!_newtab){ _newtab=newtab(); }; _newtab.addtab(setting); if(!_tabcontent){ _tabcontent=newtabcontent(); }; _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);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

bootstrap选项卡扩展功能详解

热门推荐

随机推荐