基于jQuery实现Tabs选项卡自定义插件
控件这东西网上找的多少都有些功能不如意的，只能自己动手来写了。
Tabs插件很多人都需要用到，网上也有很多的例子，但是不是风格不搭调就是用着不习惯（自己写的不一定比别人的好但用着顺手Inlove）
下面直接贴代码，不喜勿喷：
(function($){
'usestrict';
vardefaults={
type:"iframe",
onchanged:null,
style:{
header_panel:"tab-headers",
content_panel:"tab-contents",
header:"tab-header",
content:"tab-content",
selected:"selected",
icon_base:"fa",
icon_close:"fa-close"
}
}
varmethods={
init:function(options){
returnthis.each(function(){
var$this=$(this);
if(!$this.hasClass("tw.tabs")){
$this.addClass("tabs");
}
varsettings=$this.data('tw.tabs');
if(typeof(settings)=='undefined'){
settings=$.extend({},defaults,options);
$this.data('tw.tabs',settings);
}else{
settings=$.extend({},settings,options);
$this.data('tw.tabs',settings);
}
$this.empty();
$this.append($("<ulclass='"+settings.style.header_panel+"'></ul>"));
$this.append($("<divclass='"+settings.style.content_panel+"'></div>"));
if(settings.data){
if(typeofsettings.data==='string'){
settings.data=$.parseJSON(settings.data);
}
$.each(settings.data,function(){
$this.tabs("add",this);
});
}
});
},
add:function(tab){
var$this=$(this);
varsettings=$this.data("tw.tabs");
varheaders=$this.find("."+settings.style.header_panel);
varcontents=$this.find("."+settings.style.content_panel);
if(headers.find("[data-tab='"+tab.id+"']").length==0){
varheader=$("<liclass='"+settings.style.header+"'data-tab='"+tab.id+"'>"+
"<iclass='"+settings.style.icon_base+""+tab.icon+"'></i>"+
"<spanclass='tab-title'>"+tab.name+"</span></li>");
if(tab.canClose){
varclose=$("<iclass='"+settings.style.icon_base+""+settings.style.icon_close+"'></i>");
close.click(function(){
$this.tabs("remove",tab.id);
});
header.append(close);
}
header.data("tw.tab",tab);
header.click(function(){
$this.tabs("select",tab);
});
headers.append(header);
varcontent=$("<divclass='"+settings.style.content+"'data-tab='"+tab.id+"'></div>");
if(settings.type=="iframe"){
content.append("<iframesrc='"+tab.url+"?target_id="+tab.id+"'></iframe>");
}elseif(settings.type=="ajax"){
$.ajax({
url:tab.url,
type:"post",
async:false,
data:{target_id:tab.id},
success:function(result){
content.html(result);
}
});
}else{
content.html(tab.content);
}
contents.append(content);
if(tab.selected){
$this.tabs("select",tab);
}
}else{
$this.tabs("select",tab);
}
},
select:function(tab){
var$this=$(this);
varsettings=$this.data("tw.tabs");
$this.find("."+settings.style.selected).removeClass(settings.style.selected);
if(typeoftab=="object"){
$this.find("[data-tab='"+tab.id+"']").addClass(settings.style.selected);
}else{
$this.find("."+settings.style.header).eq(tab).addClass(settings.style.selected);
$this.find("."+settings.style.content).eq(tab).addClass(settings.style.selected);
}
if(settings.onchanged){
settings.onchanged(tab);
}
},
refresh:function(){
var$this=$(this);
varselected=$this.find("."+settings.style.selected);
vartab=$this.find("."+settings.style.header).data("tw.tab");
if(settings.type=="iframe"){
selected.find("iframe").attr('src',tab.url+"?target_id="+tab.id);
}elseif(settings.type=="ajax"){
$.ajax({
url:tab.url,
type:"post",
async:false,
data:{target_id:tab.id},
success:function(result){
content.html(result);
}
});
}else{
content.html(tab.content);
}
},
remove:function(id){
var$this=$(this);
varsettings=$this.data("tw.tabs");
vartab=$this.find("[data-tab='"+id+"']");
if(tab.find("."+settings.style.selected)){
varindex=tab.eq(0).index()-1;
$this.tabs("select",index);
}
tab.remove();
},
destroy:function(options){
return$(this).each(function(){
var$this=$(this);
$this.removeData('tabs');
});
}
}
$.fn.tabs=function(){
varmethod=arguments[0];
varargs=arguments;
if(typeof(method)=='object'||!method){
method=methods.init;
}elseif(methods[method]){
method=methods[method];
args=$.makeArray(arguments).slice(1);
}else{
$.error('Method'+method+'doesnotexistontw.tabs');
returnthis;
}
returnmethod.apply(this,args);
}
}
)(jQuery);
.tabs{
width:100%;
height:100%;
}
.tabs.tab-headers{
margin:0;
padding:010px;
height:40px;
list-style:none;
background:#f5f5f5;
border-bottom:1pxsolid#ccc;
}
.tabs.tab-headers.tab-header{
float:left;
height:30px;
font-size:12px;
padding:7px15px0;
margin-top:10px;
margin-right:5px;
border:1pxsolid#ccc;
border-bottom:none;
position:relative;
cursor:pointer;
}
.tabs.tab-headers.tab-header:hover{
background:#ccc;
color:#0094ff;
}
.tabs.tab-headers.tab-header.selected{
background:#fff;
border:none;
cursor:default;
padding-top:5px;
margin-left:1px;
margin-right:6px;
border-top:3pxsolid#0094ff;
}
.tabs.tab-headers.tab-header.tab-title{
margin-left:5px;
}
.tabs.tab-headers.tab-header.fa-close{
position:relative;
right:-6px;
top:0;
}
.tabs.tab-headers.tab-header.tab-close:hover{
color:#f00;
cursor:pointer;
}
.tabs.tab-contents{
width:100%;
height:calc(100%-40px);
}
.tabs.tab-contents.tab-content{
display:none;
}
.tabs.tab-contents.tab-content.selected{
display:block;
width:100%;
height:100%;
overflow:hidden;
}
.tabs.tab-contents.tab-content.selectediframe{
width:100%;
height:100%;
border:none;
}
本文已被整理到了jquery选项卡操作方法汇总、大家还可以点击javascript选项卡操作方法汇总进行学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。