/*
|
1.样式皮肤
|
2.关闭按钮
|
3.滚动条(多的时候)
|
4.下拉选择项(多的时候)
|
*/
|
/**
|
@name Edo.navigators.TabBar
|
@class
|
@typeName tabbar
|
@description tab切换器
|
@extend Edo.navigators.ToggleBar
|
*/
|
Edo.navigators.TabBar = function(config){
|
Edo.navigators.TabBar.superclass.constructor.call(this);
|
|
};
|
|
Edo.navigators.TabBar.extend(Edo.navigators.ToggleBar,{
|
/**
|
@name Edo.navigators.TabBar#defaultHeight
|
@property
|
@default 22
|
*/
|
defaultHeight: 25,
|
/**
|
@name Edo.navigators.TabBar#border
|
@property
|
@default [1,1,1,1]
|
*/
|
border: [1,1,1,1],
|
/**
|
@name Edo.navigators.TabBar#padding
|
@property
|
@default [2,5,2,5]
|
*/
|
padding: [2,5,2,5],
|
/**
|
@name Edo.navigators.TabBar#width
|
@property
|
@default '100%'
|
*/
|
width: '100%',
|
/**
|
@name Edo.navigators.TabBar#verticalAlign
|
@property
|
@default 'bottom'
|
*/
|
verticalAlign: 'bottom',
|
/**
|
@name Edo.navigators.TabBar#horizontalGap
|
@property
|
@default 2
|
*/
|
horizontalGap: 3,
|
/**
|
@name Edo.navigators.TabBar#minHeight
|
@property
|
@default 17
|
*/
|
minHeight: 17,
|
|
selectedCls: 'e-tabbar-selected',
|
itemCls: 'e-tabbar-item', //这个本来是为了做button的加粗效果,现在缓一缓,后续在做.主要是button的动态生成获取坐标,破坏了样式影响性!这是一个"框架级"的"严重"问题.
|
|
//selectedIndex: -1,
|
|
/**
|
@name Edo.navigators.TabBar#position
|
@property
|
@type String
|
@default top (left, top, right, bottom)
|
@description tabbar位置
|
*/
|
position: 'top',
|
|
_setPosition: function(value){
|
if(this.position != value){
|
this.position = value;
|
switch(value){
|
case 'top':
|
this.verticalAlign = 'bottom';
|
break;
|
case 'bottom':
|
this.verticalAlign = 'top';
|
break;
|
case 'left':
|
this.horizontalAlign = 'right';
|
break;
|
case 'right':
|
this.horizontalAlign = 'left';
|
break;
|
}
|
|
this.changeProperty('position', this.position);
|
this.relayout('position', this);
|
}
|
},
|
|
getInnerHtml: function(sb){
|
this.elCls += ' e-tabbar';
|
this.elCls += ' e-tabbar-' + this.position;
|
|
Edo.navigators.TabBar.superclass.getInnerHtml.call(this, sb);
|
sb[sb.length] = '<div class="e-tabbar-line"></div>';
|
},
|
createChildren: function(el){
|
Edo.navigators.TabBar.superclass.createChildren.call(this, el);
|
this.stripEl = Edo.util.Dom.append(this.scrollEl, '<div class="e-tabbar-line-strip"></div>');
|
this.lineEl = this.scrollEl.nextSibling;
|
},
|
syncSize: function(){ //设置组件尺寸,并设置容器子元素的所有尺寸!
|
Edo.navigators.TabBar.superclass.syncSize.call(this);
|
|
//this.doSyncLine.defer(100, this);
|
this.doSyncLine();
|
},
|
doSyncLine: function(){
|
var box = this._getBox(true);
|
var scrollBox = Edo.util.Dom.getBox(this.scrollEl);
|
|
var selBox = this.selectedItem ? this.selectedItem._getBox(true) : {x:0,y:0,width:0,height:0,right:0,bottom:0};
|
switch(this.position){
|
case "top":
|
selBox.x += 1;
|
selBox.y = selBox.bottom - 1;
|
selBox.width -= 2;
|
selBox.height = 1;
|
|
box.y = scrollBox.bottom-1;
|
box.height = 5;//box.bottom - scrollBox.bottom;
|
break;
|
case "bottom":
|
selBox.x += 1;
|
selBox.width -= 2;
|
selBox.height = 1;
|
|
box.height = scrollBox.y - box.y +1;
|
break;
|
case "left":
|
selBox.x = selBox.right - 1;
|
selBox.width = 1;
|
selBox.y += 1;
|
selBox.height -= 2;
|
|
box.x = scrollBox.right-1;
|
box.width = 5;//box.right - scrollBox.right;
|
break;
|
case "right":
|
selBox.y += 1;
|
selBox.height -= 2;
|
selBox.width = 1;
|
|
//box.x = selBox.right-1;
|
box.width = scrollBox.x - box.x+1;
|
|
|
}
|
Edo.util.Dom.setBox(this.stripEl, {
|
x: selBox.x,
|
y: selBox.y,
|
width: selBox.width,
|
height: selBox.height
|
});
|
|
Edo.util.Dom.setBox(this.lineEl, box);
|
},
|
addChildAt: function(){
|
var a = arguments[1];
|
if(this.position == 'top' || this.position == 'bottom'){
|
a.height = "100%";
|
//a.autoHeight = false;
|
}else{
|
a.width = "100%";
|
//a.autoWidth = false;
|
}
|
var c = Edo.navigators.TabBar.superclass.addChildAt.apply(this, arguments);
|
c.addCls('e-tabbar-item');
|
return c;
|
}
|
});
|
|
Edo.navigators.TabBar.regType('tabbar');
|
