/*
|
Navigator导航容器:
|
增加左右(horizontal),上下(vertical)导航按钮.
|
从Box派生,增加navCtWidth逻辑.
|
startBtn
|
endBtn
|
|
*/
|
/**
|
@name Edo.navigators.Navigator
|
@class
|
@typeName navigator, nav
|
@description 实现导航功能
|
@extend Edo.containers.Box
|
@example
|
|
|
*/
|
Edo.navigators.Navigator = function(){
|
Edo.navigators.Navigator.superclass.constructor.call(this);
|
|
//titleclick
|
};
|
Edo.navigators.Navigator.extend(Edo.containers.Box,{
|
/**
|
@name Edo.navigators.Navigator#layout
|
@property
|
@default 'horizontal'
|
*/
|
layout: 'horizontal',
|
scrollOffset: 30,
|
|
startVisible: true,
|
endVisible: true,
|
startWidth: 18,
|
startHeight: 18,
|
endWidth: 18,
|
endHeight: 18,
|
startCls: '',
|
endCls: '',
|
|
//导航容器,滚动条必须设置为off
|
/**
|
@name Edo.navigators.Navigator#horizontalScrollPolicy
|
@property
|
@default 'off'
|
*/
|
horizontalScrollPolicy: 'off',
|
/**
|
@name Edo.navigators.Navigator#verticalScrollPolicy
|
@property
|
@default 'off'
|
*/
|
verticalScrollPolicy: 'off',
|
|
//这里不加measure应该是对的
|
// measure: function(){
|
// Edo.navigators.Navigator.superclass.measure.call(this);
|
// if(this.startVisible){
|
// if(this.layout == 'horizontal'){
|
// this.realWidth += this.startWidth;
|
// }else if(this.layout == 'vertical'){
|
// this.realHeight += this.startHeight;
|
// }
|
// }
|
// if(this.endVisible){
|
// if(this.layout == 'horizontal'){
|
// this.realWidth += this.endWidth;
|
// }else if(this.layout == 'vertical'){
|
// this.realHeight += this.endHeight;
|
// }
|
// }
|
// this.measureSize();
|
// },
|
getNavLayoutBox: function(){
|
//var box = Edo.navigators.Navigator.superclass.getLayoutBox.c(this);
|
var box = this.getLayoutBox();
|
if(this.startVisible){
|
if(this.layout == 'horizontal'){
|
box.x += this.startWidth;
|
box.width -= this.startWidth;
|
}else if(this.layout == 'vertical'){
|
box.y += this.startHeight;
|
box.height -= this.startHeight;
|
}
|
}
|
if(this.endVisible){
|
if(this.layout == 'horizontal'){
|
box.width -= this.endWidth;
|
}else if(this.layout == 'vertical'){
|
box.height -= this.endHeight;
|
}
|
}
|
// if(this.navBarWidthGet){
|
// box.x += this.buttonWidth;
|
// box.width -= this.buttonWidth * 2;
|
// this.navBarWidthGet = false;
|
// }
|
|
box.right = box.x + box.width;
|
box.bottom = box.y + box.height;
|
return box;
|
},
|
syncSize: function(){
|
Edo.navigators.Navigator.superclass.syncSize.call(this);
|
|
//如果超出滚动条,则...
|
var dom = this.scrollEl;
|
var doNav = false;
|
if(this.layout == 'horizontal' && dom.scrollWidth > dom.clientWidth){
|
doNav = true;
|
}else if(this.layout == 'vertical' && dom.scrollHeight > dom.clientHeight){
|
doNav = true;
|
}
|
if(doNav){
|
var box = this.getNavLayoutBox();
|
this.syncScrollEl(box);
|
|
if(this.startVisible){
|
var left = box.x, top = box.y, w = this.startWidth, h = this.startHeight;
|
if(this.layout == 'horizontal') {
|
left -= (this.startWidth + this.padding[3]);
|
h = box.height;
|
}
|
if(this.layout == 'vertical') {
|
top -= (this.startHeight + this.padding[0]);
|
w = box.width;
|
}
|
this.startButton._setBox({
|
x:left,
|
y:top,
|
width: w,
|
height: h
|
});
|
//this.startButton._setVisible(true);
|
}else{
|
//this.startButton._setVisible(false);
|
}
|
if(this.endVisible){
|
var left = box.x, top = box.y, w = this.endWidth, h = this.endHeight;
|
if(this.layout == 'horizontal') {
|
left += box.width + this.padding[1];
|
h = box.height;
|
}
|
if(this.layout == 'vertical') {
|
top += box.height + this.padding[2];
|
w = box.width;
|
}
|
|
this.endButton._setBox({
|
x:left,
|
y:top,
|
width: w,
|
height: h
|
});
|
//this.endButton._setVisible(true);
|
}else{
|
//this.endButton._setVisible(false);
|
}
|
}else{
|
this.startButton.el.style.left = '-300px';
|
this.endButton.el.style.left = '-300px';
|
this.startButton.el.style.position = 'absolute';
|
this.endButton.el.style.position = 'absolute';
|
// this.startButton._setVisible(false);
|
// this.endButton._setVisible(false);
|
}
|
|
},
|
createChildren: function(el){
|
Edo.navigators.Navigator.superclass.createChildren.call(this, el);
|
// this.endButtonCt = this.el.lastChild;
|
// this.startButtonCt = this.endButtonCt.previousSibling;
|
|
this.startButton = Edo.create({
|
type: 'button',
|
icon: 'e-nav-start',
|
minHeight: 5,
|
//simpleButton: true,
|
onclick: this.preScrollView.bind(this),
|
render: this.el
|
});
|
this.endButton = Edo.create({
|
icon: 'e-nav-end',
|
minHeight: 5,
|
type: 'button',
|
//simpleButton: true,
|
onclick: this.nextScrollView.bind(this),
|
render: this.el
|
});
|
},
|
_setHorizontalScrollPolicy: function(value){
|
this.horizontalScrollPolicy = 'off';
|
},
|
_setVerticalScrollPolicy: function(value){
|
this.verticalScrollPolicy = 'off';
|
},
|
// _onButtonClick: function(e){
|
// var offset = 0;
|
// var sp = this.layout == 'horizontal' ? 'scrollLeft' : 'scrollTop';
|
// if(this.startButton == e.source){
|
// offset = -30;
|
// }else{
|
// offset = 30;
|
// }
|
// this.scrollEl[sp] += offset;
|
// },
|
preScrollView: function(){
|
var sp = this.layout == 'horizontal' ? 'scrollLeft' : 'scrollTop';
|
this.scrollEl[sp] -= this.scrollOffset;
|
},
|
nextScrollView: function(){
|
var sp = this.layout == 'horizontal' ? 'scrollLeft' : 'scrollTop';
|
this.scrollEl[sp] += this.scrollOffset;
|
}
|
});
|
|
Edo.navigators.Navigator.regType('navigator', 'nav');
|
