/*tabPanel主类 */
(function($) {
$.ui = $.ui || {};
$.ui.tabpanel= function(config){
this.init(config);
};
$.ui.tabpanel.prototype = {
//初始化
init : function(config){
//将tabPanel放置的位置
this.renderTo = config.renderTo || $(document.body);
this.render = typeof this.renderTo == 'string' ? $('#'+this.renderTo) : this.renderTo;
//tabPanel的边线宽度
this.border = config.border;
//宽度是否可改变
this.widthResizable = config.widthResizable;
//高度是否可以改变
this.heightResizable = config.heightResizable;
//自动改变宽度和高度
this.autoResizable = config.autoResizable;
//宽度
this.width = config.width;
//高度
this.height = config.height;
//每个tab的宽度
this.tabWidth = config.tabWidth||208;
//tab元素
this.items = config.items;
//活动的索引值
this.active = config.active || 0;
//初始化的tab元素列表
this.tabs = [];
//是否需要滚动,滚动的意思是tab元素过多,导致上面的tab条目放不了
this.scrolled = false;
//调整值
this.fixNum = 2;
//滚动结束标示
this.scrollFinish = true;
//可添加的tab元素的最大个数
this.maxLength = config.maxLength || -1;
//最少添加的tab元素个数
this.minLength=config.minLength || 0;
//this变量
var tabEntity = this;
//如果配置autoResizable为true,则宽度和高度的可变标示都为true
if(this.autoResizable){
this.widthResizable = this.heightResizable = true;
//超过则隐藏
this.render.css('overflow', 'hidden');
//自动调节大小,当设置为不能改变大小时,父节点变大则变大,否则不变
//窗口变化,则tab的容器跟着变化
/*window.onresize=(function(){
var timeout;
return (function(){
window.clearTimeout(timeout);
timeout = window.setTimeout(function(){tabEntity.resize()}, 200);
});
})();
*/
//窗口变化,则tab的容器跟着变化
/*$(window).resize(function(){
window.setTimeout(function(){
tabEntity.resize();
}, 200);
});*/
}
//设置tabPanel容器的宽度和高度
if(this.width)
this.render.width("100%");
if(this.height)
this.render.height(this.height);
//调整值
var hwFix = this.border!='none'?2:0;
//整体的tab容器
this.tabpanel = $('
');
this.tabpanel.addClass('tabpanel');
this.tabpanel.width("100%");
this.tabpanel.height(this.render.height());
this.render.append(this.tabpanel);
//顶上面的标签容器
this.tabpanel_tab_content = $('');
this.tabpanel_tab_content.addClass('tabpanel_tab_content');
this.tabpanel_tab_content.appendTo(this.tabpanel);
//左箭头div
this.tabpanel_left_scroll = $('');
//点击后左移一个tab宽度
this.tabpanel_left_scroll.bind('click',function(){tabEntity.moveLeft();});
//设置样式
this.tabpanel_left_scroll.addClass('tabpanel_left_scroll');
this.tabpanel_left_scroll.addClass('display_none');
//mouseover事件
this.tabpanel_left_scroll.bind('mouseover', function(){
var l = $(this);
l.addClass('tabpanel_scroll_over');
l.bind('mouseout', function(){
l.unbind('mouseout');
l.removeClass('tabpanel_scroll_over');
});
})
this.tabpanel_left_scroll.appendTo(this.tabpanel_tab_content);
//右箭头div
this.tabpanel_right_scroll = $('');
//点击后右移一个tab宽度
this.tabpanel_right_scroll.bind('click',function(){tabEntity.moveRight();});
//设置样式
this.tabpanel_right_scroll.addClass('tabpanel_right_scroll');
this.tabpanel_right_scroll.addClass('display_none');
//mouseover事件
this.tabpanel_right_scroll.bind('mouseover', function(){
var r = $(this);
r.addClass('tabpanel_scroll_over');
r.bind('mouseout', function(){
r.unbind('mouseout');
r.removeClass('tabpanel_scroll_over');
});
})
this.tabpanel_right_scroll.appendTo(this.tabpanel_tab_content);
//存放顶上tab标签的div
this.tabpanel_move_content = $('');
this.tabpanel_move_content.addClass('tabpanel_move_content');
this.tabpanel_move_content.appendTo(this.tabpanel_tab_content);
//标签放在这个ul中,设置其中的li样式
this.tabpanel_mover = $('');
this.tabpanel_mover.addClass('tabpanel_mover');
this.tabpanel_mover.appendTo(this.tabpanel_move_content);
//空格
this.tabpanel_tab_spacer = $('');
this.tabpanel_tab_spacer.addClass('tabpanel_tab_spacer');
this.tabpanel_tab_spacer.appendTo(this.tabpanel_tab_content);
//存放tab内容的div
this.tabpanel_content = $('');
this.tabpanel_content.addClass('tabpanel_content');
this.tabpanel_content.appendTo(this.tabpanel);
var t_w = this.tabpanel.width();
var t_h = this.tabpanel.height();
if(this.border=='none'){
this.tabpanel.css('border','0');
}
//存放顶上tab标签的div宽度
this.tabpanel_tab_content.width("100%");
//设置存放tab内容的div宽度
this.tabpanel_content.width("100%");
//设置存放tab内容的div高度
this.tabpanel_content.height(t_h-this.tabpanel_tab_content.get(0).offsetHeight);
//根据配置添加标签
for(var i=0; i=0)
this.showItem(this.tabs[this.active], true);
},
//向左移动
moveLeft : function(){
//如果滚动结束了
if(this.scrollFinish){
//设置this
var me=this;
//左右箭头暂时失效
this.disableScroll();
//原来marginLeft
var oldMl=this.tabpanel_mover.css("marginLeft");
//新的marginLeft
var newMl=parseInt(oldMl)+parseInt(this.tabWidth);
//最大值为0
if(newMl>0){
newMl=0;
}
//滚动结束标示置为false
this.scrollFinish = false;
//动画滚动
this.tabpanel_mover.animate(
{"marginLeft": newMl+'px'},
200,
"linear",
function(){
//左右箭头可用
me.useableScroll();
} );
}
},
//向右移动
moveRight : function(){
//如果滚动结束了
if(this.scrollFinish){
//设置this
var me=this;
//左右箭头暂时失效
this.disableScroll();
//原来marginLeft
var oldMl=this.tabpanel_mover.css("marginLeft");
//新的marginLeft
var newMl=parseInt(oldMl)-(this.tabWidth-35);
//最小值为this.maxMove*(-1)
if(newMl*(-1)>this.maxMove){
newMl=this.maxMove*(-1);
}
//滚动结束标示置为false
this.scrollFinish = false;
//动画滚动
this.tabpanel_mover.animate(
{"marginLeft": newMl+'px'},
200,
"linear",
function(){
//左右箭头可用
me.useableScroll();
}
);
}
},
//在关闭tab后,tab数量不够,不需要箭头时,移动到最左边
moveToLeft : function(){
//如果滚动结束了
if(this.scrollFinish){
//左右箭头暂时失效
this.disableScroll();
//设置this
var me=this;
//滚动结束标示置为false
this.scrollFinish = false;
//动画滚动
this.tabpanel_mover.animate(
{"marginLeft":'0px'}
, 200, "linear", function(){
//左右箭头可用
me.useableScroll();
});
}
},
//移动到最右边
moveToRight : function(){
//如果滚动结束了
if(this.scrolled && this.scrollFinish){
//左右箭头暂时失效
this.disableScroll();
//原marginLeft
var marginLeft = parseInt(this.tabpanel_mover.css('marginLeft'))*-1;
//所有tab加起来的总宽度
var liWidth = this.tabs.length*(this.tabWidth-35);
//tab标签的容器宽度
var cWidth = this.tabpanel_move_content.width();
//新的marginLeft
var newMarginLeft = (liWidth - cWidth - marginLeft + this.fixNum)*-1;
//设置this
var me=this;
//滚动结束标示置为false
this.scrollFinish = false;
//动画滚动
this.tabpanel_mover.animate(
{"marginLeft":'+='+newMarginLeft+'px'}
, 200, "linear", function(){
//左右箭头可用
me.useableScroll();
} );
}
},
//把该标签移动到可视区域
moveToSee : function(tabitem){
//得到该标签的位置
var position = this.getTabPosition(tabitem);
//如果需要滚动了
if(this.scrolled){
//到该tab标签的左边的距离
var liWhere = (this.tabWidth-35) * position;
//marginLeft值
var ulWhere = parseInt(this.tabpanel_mover.css('marginLeft'));
//需要移动的值
var moveNum= (ulWhere + liWhere)*-1;
//需要移动的距离超过最大数
if(((moveNum+ulWhere)*-1) >= this.maxMove){
//移动到最右边
this.moveToRight();
}else{
//左右箭头暂时失效
this.disableScroll();
//滚动结束标示置为false
this.scrollFinish = false;
// alert(liWhere*(-1));
//设置this
var me=this;
//动画滚动
this.tabpanel_mover.animate(
{"marginLeft":liWhere*(-1)+'px'}
, 200, "linear", function(){
//左右箭头可用
me.useableScroll();
} );
}
}
$(this.tabpanel_mover[0]).eq(0).find('li:first').css('margin-left','0px');
},
//左右箭头失效
disableScroll : function(){
this.tabpanel_left_scroll.addClass('tabpanel_left_scroll_disabled');
this.tabpanel_left_scroll.attr('disabled',true);
this.tabpanel_right_scroll.addClass('tabpanel_right_scroll_disabled');
this.tabpanel_right_scroll.attr('disabled', true);
},
//左右箭头有效
useableScroll : function(){
//设置this
var tabEntity = this;
//可以滚动了
if(this.scrolled){
//最左边
if(parseInt(tabEntity.tabpanel_mover.css('marginLeft')) == 0){
//左箭头失效
tabEntity.tabpanel_left_scroll.addClass('tabpanel_left_scroll_disabled');
tabEntity.tabpanel_left_scroll.attr('disabled',true);
//右箭头有效
tabEntity.tabpanel_right_scroll.removeClass('tabpanel_right_scroll_disabled');
tabEntity.tabpanel_right_scroll.removeAttr('disabled');
}else if(parseInt(tabEntity.tabpanel_mover.css('marginLeft'))*-1 >= tabEntity.maxMove){
//最右边
//左箭头有效
tabEntity.tabpanel_left_scroll.removeClass('tabpanel_left_scroll_disabled');
tabEntity.tabpanel_left_scroll.removeAttr('disabled',true);
//右箭头失效
tabEntity.tabpanel_right_scroll.addClass('tabpanel_right_scroll_disabled');
tabEntity.tabpanel_right_scroll.attr('disabled');
}else{
//既非最左边,也非最右边
//左右箭头都有效
tabEntity.tabpanel_left_scroll.removeClass('tabpanel_left_scroll_disabled');
tabEntity.tabpanel_left_scroll.removeAttr('disabled',true);
tabEntity.tabpanel_right_scroll.removeClass('tabpanel_right_scroll_disabled');
tabEntity.tabpanel_right_scroll.removeAttr('disabled');
}
}
//滚动结束标示为true
tabEntity.scrollFinish = true;
},
//显示滚动
showScroll : function(){
//所有tab标签的总宽度
var liWidth = this.tabs.length*(this.tabWidth-35);
//存放tab标签的div的宽度
var tabContentWidth = this.tabpanel_tab_content.width();
//如果所有tab标签的总宽度大于存放tab标签的div的宽度,而且还没出现左右箭头,则显示左右箭头
if(liWidth > tabContentWidth && !this.scrolled){
//显示左右箭头
this.tabpanel_move_content.addClass('tabpanel_move_content_scroll');
this.tabpanel_left_scroll.removeClass('display_none');
this.tabpanel_right_scroll.removeClass('display_none');
//滚动标示为true
this.scrolled = true;
}else if(liWidth < tabContentWidth && this.scrolled){
//如果所有tab标签的总宽度小于存放tab标签的div的宽度
//移动到最左边
this.moveToLeft();
//不显示左右箭头div
this.tabpanel_move_content.removeClass('tabpanel_move_content_scroll');
this.tabpanel_left_scroll.addClass('display_none');
this.tabpanel_right_scroll.addClass('display_none');
//滚动标示为false
this.scrolled = false;
this.scrollFinish = true;
}
//如果可移动,则存放tab标签的div的宽度要减去左右箭头的div的宽度
if(this.scrolled)
tabContentWidth -= (this.tabpanel_left_scroll.width()+this.tabpanel_right_scroll.width());
//设置宽度
this.tabpanel_move_content.width(tabContentWidth);
//设置最大宽度
this.maxMove = (this.tabs.length*(this.tabWidth-35)) - tabContentWidth + this.fixNum;
},
//添加标签
addTab : function(tabitem){
//判断是否设置了最大可添加的标签数,如果超过了,则返回
if(this.maxLength!=-1 && this.maxLength<=this.tabs.length){
alert('最多只能添加'+this.maxLength+'个标签!');
return false;
}
//设置id
if(!tabitem.id) {
tabitem.id = Math.uuid();
}
//如果已有该标签则显示
if($('#'+tabitem.id).length>0){
this.showItem(this.getTabById(tabitem.id), true);
}else if(this.scrollFinish){
var tabEntity = this;
//tab标签为li元素
var tab = $('');
//设置id
tab.attr('id', tabitem.id);
//设置宽度
tab.width(this.tabWidth);
tab.appendTo(this.tabpanel_mover);
var img=$('
');
img.appendTo(tab)
//存放标签文字的div
var titleDiv = $('');
titleDiv.attr("title",tabitem.title);
var objLength = tabitem.title.length; //获取当前选项卡名称长度
var num=7; //选项卡名称最大长度
if(objLength > num) {
tabitem.title = tabitem.title.substring(0, num-1) + "..."; //超出部分省略号表示
}
titleDiv.text(tabitem.title);
titleDiv.appendTo(tab);
//调整值
var wFix = !tabitem.closable? 0 : 5;
//如果有背景图片要存放
if(tabitem.icon) {
titleDiv.addClass('icon_title');
titleDiv.addClass(tabitem.icon);
//如果文字太长,则以...结尾
if(titleDiv.width()>(this.tabWidth-35-wFix)) {
titleDiv.width((this.tabWidth-50-wFix));
titleDiv.attr('title', tabitem.title);
tab.append('...
');
}
} else {
//没有背景图片要存放
titleDiv.addClass('title');
//如果文字太长,则以...结尾
if(titleDiv.width()>(this.tabWidth-19-wFix)) {
titleDiv.width(this.tabWidth-30-wFix);
titleDiv.attr('title', tabitem.title);
tab.append('...
');
}
}
//关闭按钮
var closer = $('');
closer.addClass('closer');
closer.attr('title', 'Close tab');
closer.appendTo(tab);
var _th=$(window).height()-145;
//存放标签内容的div
var content = $('
');
content.addClass('html_content');
content.appendTo(this.tabpanel_content);
content.hide();
//设置单个标签的对象
tabitem.tab = tab;
tabitem.titleDiv = titleDiv;
tabitem.closer = closer;
tabitem.content = content;
//隐藏关闭按钮
if(!tabitem.closable)
closer.addClass('display_none');
//如果不可用
if(tabitem.disabled==true) {
tab.attr('disabled', true);
titleDiv.addClass('disable');
}
this.tabs.push(tabitem);
//tab标签li的click事件
tab.bind('click', function(){
//如果设置标签的disabled为true
if(tabitem.disabled){
return false;
}
tabEntity.showItem(tabitem, true);
});
//关闭按钮的click事件
closer.bind('click', function(){
tabEntity.kill(tabitem);
});
//显示滚动条
this.showScroll();
//如果立即显示内容,将tab移动到可视状态
if(tabitem.loadnow){
this.showItem(tabitem, true);
}else if(tabitem.elementId||tabitem.disabled) {
//elementId或disabled配置,则立即显示内容,但不将tab移动到可视状态
this.showItem(tabitem, false);
}
}
},
//取得tab的位置
getTabPosition:function(tabitem){
var tabIndex = -1;
for(var i=0;i';
tabitem.content.css('overflow','hidden').html(tempHtml);
}else if(tabitem.loader.activateFresh){
//加载过页面,刷新
this.refresh(tabitem);
}
}
}
}
}
//要求移动到活动的tab标签
if(executeMoveSee){
//显示内容
tabitem.content.show();
//隐藏原来的标签的内容
if(activedTabIndex>=0){
this.tabs[activedTabIndex].content.hide();
}
//把原来的活动的tab标签设为非活动状态
this.tabpanel_mover.find('.active').removeClass('active');
//添加新点击的标签风样式为活动状态
tabitem.tab.addClass('active');
//移动到可视状态
this.moveToSee(tabitem);
//有活动状态设置后的事件配置
if(tabitem.activate){
tabitem.activate(tabitem);
}
}
},
//刷新iframe
refresh:function(tabitem){
//iframe参数配置
if(tabitem.loader.iframeFlag){
var iframeName='Frame'+tabitem.id;
eval(iframeName+".window.location.reload();");
}else{
var param={};
if(tabitem.loader.param){
param=tabitem.loader.param;
}
$.ajax({
type: 'post',//ajax提交方式
url: tabitem.loader.url,//提交的url
data: param,//参数
dataType: 'text',//数据返回的形式,默认为text即文本
cache:false,
success: function(msg) {
tabitem.content.empty().html(msg);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert('data error');
}
});
}
},
//删除标签
kill : function(tabitem){
//标签个数小于等于最小个数或者为不可用状态,则返回
if(this.tabs.length<=this.minLength){
alert('最少保留'+this.minLength+'个tab标签!');
return;
}
if(tabitem.disabled){
return;
}
//设置this
var tabEntity = this;
//得到标签位置
var position = this.getTabPosition(tabitem);
//得到活动标签位置
var activedTabIndex = this.getActiveIndex();
//移除相应dom对象
tabitem.closer.remove();
tabitem.titleDiv.remove();
tabitem.tab.remove();
tabitem.content.remove();
//从tabs中移除数据
this.tabs.splice(position,1);
//显示滚动的左右箭头
this.showScroll();
//如果关闭的标签为活动的标签
if(activedTabIndex==position){
//如果位置大于0,则将其前一个标签设为活动状态
if(position>0){
this.showItem(this.tabs[position-1], true);
}else{
//若为第一个,则继续将第一个标签设为活动状态
this.showItem(this.tabs[0], true);
}
}else{
//如果活动的标签的位置大于被关闭的标签的位置,把其前一个标签移动到可视状态
if(activedTabIndex>position){
this.moveToSee(this.tabs[activedTabIndex-1]);
}else{
//如果活动的标签的位置小于被关闭的标签的位置,把该标签移动到可视状态
this.moveToSee(this.tabs[activedTabIndex]);
}
}
},
//得到标签总数
getTabsCount : function(){
return this.tabs.length;
},
//设置标签的标题
setTitle : function(tabitem,title){
tabitem.titleDiv.text(title);
},
//得到标签的标题
getTitle : function(tabitem){
return tabitem.titleDiv.text();
},
//设置标签的内容
setContent : function(tabitem,content){
tabitem.content.html(content);
},
//得到标签的内容
getContent : function(tabitem){
return tabitem.content.html();
},
//将标签设为不可用状态
setDisable : function(tabitem,disable){
tabitem.disable = disable;
if(disable){
tabitem.tab.attr('disabled',true);
tabitem.titleDiv.addClass('.disabled');
}else{
tabitem.tab.removeAttr('disabled');
tabitem.titleDiv.removeClass('.disabled');
}
},
//得到标签的diabled状态
getDisable : function(tabitem){
return tabitem.disable;
},
//设置标签的关闭状态
setClosable : function(tabitem,closable){
tabitem.closable = closable;
if(closable){
tabitem.closer.addClass('display_none');
}else{
tabitem.closer.addClass('closer');
tabitem.closer.removeClass('display_none');
}
},
//得到标签的关闭状态
getClosable : function(tabitem){
return tabitem.closable;
},
//得到活动标签的位置
getActiveIndex : function(){
var activedTabIndex = -1;
var activeTab=this.tabpanel_mover.find('.active')[0];
if(activeTab){
activedTabIndex=this.tabpanel_mover.children().index(activeTab);
}
return activedTabIndex;
},
//根据tab的id得到tab
getTabById:function(Id){
for(var i=0;i 0)
return this.tabs[activeTabIndex];
else
return null;
},
//改变整个tab容器的大小
resize : function(){
var hwFix = this.border == 'none' ? 0 : 2;
//如果可改变宽度
if(this.widthResizable) {
this.width = this.render.width();
this.tabpanel.width(this.width-20);
this.tabpanel_tab_content.width(this.width-20);
this.tabpanel_content.width(this.width-20);
}
//如果可改变高度
if(this.heightResizable) {
this.height = this.render.height();
this.tabpanel.height(this.height-hwFix);
this.tabpanel_content.height(this.height-this.tabpanel_tab_content.get(0).offsetHeight-hwFix);
}
//显示滚动
this.showScroll();
//左右箭头可用
this.useableScroll();
//将活动标签移动到可视状态
var entity = this;
setTimeout(function(){entity.moveToSee(entity.getActiveTab());}, 200);
},
//设置整个tab标签容器的宽度和高度
setRenderWH : function(wh) {
if(wh) {
if(wh.width!=undefined) {
this.render.width(wh.width);
}
if(wh.height!=undefined) {
this.render.height(wh.height);
}
this.resize();
}
},
hide:function(){
this.hideflag=true;
this.tabpanel.hide();
},
show:function(){
this.hideflag=false;
this.tabpanel.show();
}
};
})(jQuery);