/**
|
@name Edo.controls.Button
|
@class
|
@typeName button
|
@description 按钮
|
@extend Edo.controls.Control
|
*/
|
|
Edo.controls.Button = function(){
|
/**
|
@name Edo.controls.Button#toggle
|
@event
|
@description 当enableToggle为true时,点击按钮将会激发此事件
|
@property {Boolean} pressed 是否按住
|
*/
|
|
/**
|
@name Edo.controls.Button#arrowclick
|
@event
|
@domevent
|
@description 当设置了arrowMode后,点击arrow区域,就会激发此事件
|
*/
|
|
//arrowclick
|
Edo.controls.Button.superclass.constructor.call(this);
|
}
|
Edo.controls.Button.extend(Edo.controls.Control,{
|
enableForm: false,
|
|
simpleButton: false,
|
|
autoWidth: true,
|
autoHeight: true,
|
/**
|
@name Edo.controls.Button#defaultWidth
|
@property
|
@default 16
|
*/
|
defaultWidth: 18,
|
/**
|
@name Edo.controls.Button#defaultHeight
|
@property
|
@default 20
|
*/
|
defaultHeight: 20,
|
/**
|
@name Edo.controls.Button#minWidth
|
@property
|
@default 16
|
*/
|
minWidth: 20,
|
/**
|
@name Edo.controls.Button#minHeight
|
@property
|
@default 18
|
*/
|
minHeight: 18,
|
/**
|
@name Edo.controls.Button#showMenu
|
@property
|
@type Boolean
|
@default true
|
@description 显示菜单
|
*/
|
showMenu: true,
|
/**
|
@name Edo.controls.Button#popupWidth
|
@property
|
@default 100
|
*/
|
popupWidth: 100,
|
|
//widthGeted: false,//当width为auto的时候,是不是要获取dom的宽度
|
/**
|
@name Edo.controls.Button#text
|
@property
|
@type String
|
@description 按钮文本
|
*/
|
text: '',
|
/**
|
@name Edo.controls.Button#icon
|
@property
|
@type String
|
@description 按钮图标
|
*/
|
icon: '',
|
/**
|
@name Edo.controls.Button#iconAlign
|
@property
|
@type String
|
@description 按钮图标位置:left,top,right,bottom
|
*/
|
iconAlign: 'left',
|
/**
|
@name Edo.controls.Button#arrowMode
|
@property
|
@type String
|
@description 按钮arrow模式,用于更丰富的按钮效果:menu, split, close
|
*/
|
arrowMode: '', //menu, split, close
|
/**
|
@name Edo.controls.Button#arrowAlign
|
@property
|
@type String
|
@description 按钮arrow位置:left,top,right,bottom
|
*/
|
arrowAlign: 'right',
|
|
//使用enableClose: true, 用一个占位的div来做close trigger
|
|
autoClose: true, //如果arrowMode为close,并且autoClose:true,则点击arrow区域,自动destroy此组件
|
|
/**
|
@name Edo.controls.Button#pressed
|
@property
|
@type Boolean
|
@description 按钮的toggle状态
|
*/
|
pressed: false,
|
|
overCls: 'e-btn-over',
|
pressedCls: 'e-btn-click',
|
|
togglCls: 'e-btn-pressed',
|
enableToggle: false,
|
|
elCls: 'e-btn',
|
|
_onMouseEvent: function(e){
|
if(!this.isEnable()) return;
|
e.source = this;
|
if(!this.design){
|
|
if(e.type == 'click'){
|
var outer = e.target.firstChild;
|
if(outer && outer.nodeType == 3){
|
outer = null;
|
}
|
|
if(this.arrowMode && this.arrowMode != 'menu' && Edo.util.Dom.hasClass(e.target, 'e-btn-arrow')){
|
e.type = 'arrowclick';
|
this.fireEvent('arrowclick', e);
|
return;
|
}
|
}
|
|
this.fireEvent(e.type, e);
|
}
|
},
|
createPopup: function(){
|
Edo.controls.Button.superclass.createPopup.a(this, arguments);
|
this.menu = this.popupCt;
|
},
|
showPopup: function(){
|
this._setPressed(true);
|
Edo.controls.Button.superclass.showPopup.a(this, arguments);
|
},
|
hidePopup: function(){
|
Edo.controls.Button.superclass.hidePopup.a(this, arguments);
|
|
this._setPressed(false);
|
|
if(this.menu && this.menu.children){
|
this.menu.children.each(function(o){
|
if(o.type == 'button' && o.rendered){
|
o.hidePopup();
|
}
|
});
|
}
|
},
|
getClass: function(){
|
var s = '';
|
if(this.icon){
|
if(this.text) {
|
s += ' e-btn-icontext';
|
s += ' e-btn-icon-align-' + this.iconAlign;
|
}
|
else s += ' e-btn-icon';
|
}
|
this.getArrowCls();
|
s += ' ' + this.arrowCls;
|
|
|
if(this.pressed) s += ' '+this.togglCls;
|
|
return s;
|
},
|
htmlType: 'a',
|
getInnerHtml: function(sb){
|
//if(this.text == '取消') debugger
|
if(this.simpleButton) return this.text || '';
|
|
this.elCls += this.getClass();
|
var w = Edo.isValue(this.realWidth) ? this.realWidth + 'px' : 'auto';
|
var h = Edo.isValue(this.realHeight) ? this.realHeight + 'px' : 'auto';
|
|
var text = this.text || ' ';
|
sb[sb.length] = '<span class="e-btn-text '+this.icon+'">'+text+'</span>';
|
if(this.arrowMode){
|
sb[sb.length] = '<span class="e-btn-arrow"></span>';
|
}
|
},
|
createChildren: function(el){
|
Edo.controls.Button.superclass.createChildren.call(this, el);
|
|
if(!this.design){
|
this.el.href = 'javascript:;';
|
}
|
this.el.hideFocus = true;
|
|
if(this.simpleButton) return '';
|
|
this.field = this.el.firstChild;
|
if(this.splitMode == 'split') this.splitEl = this.el.lastChild;
|
|
|
//this.el.onmousedown = 'return false';
|
//this.el.href = '#';
|
|
},
|
initEvents: function(){
|
if(!this.design){
|
var el = this.el;
|
//if(this.simpleButton) el = this.el;
|
Edo.util.Dom.addClassOnClick(el, this.pressedCls);
|
//Edo.util.Dom.addClassOnOver(el, this.overCls);
|
|
this.on('click', this._onClick, this, 0);
|
this.on('arrowclick', this._onArrowClick, this, 0);
|
}
|
|
Edo.controls.Button.superclass.initEvents.call(this);
|
},
|
_onClick: function(e){
|
if(this.enableToggle){
|
var pressed = !this.pressed;
|
this._setPressed(pressed);
|
}
|
if(this.popupDisplayed){
|
this.hidePopup();
|
}else if(this.showMenu && this.menu){
|
this.showPopup();
|
this.menu = this.popupCt;
|
|
//this._setPressed(true);
|
}
|
},
|
_onArrowClick: function(e){
|
if(this.arrowMode == 'close' && this.autoClose){
|
this.destroy();
|
}
|
|
if(this.popupDisplayed){
|
this.hidePopup();
|
}else if(this.arrowMode == 'split' && this.showMenu && this.menu){
|
this.showPopup();
|
this.menu = this.popupCt;
|
|
this._setPressed(true);
|
}
|
},
|
getArrowCls: function(){
|
var ac = this.arrowCls;
|
this.arrowCls = '';
|
if(this.arrowMode == 'menu') this.arrowCls = 'e-btn-arrow-' + this.arrowAlign;
|
else if(this.arrowMode == 'split') this.arrowCls = 'e-btn-split-' + this.arrowAlign;
|
else if(this.arrowMode == 'close') this.arrowCls = 'e-btn-close-' + this.arrowAlign;
|
return this.arrowCls;
|
},
|
_setArrowMode: function(value){
|
if(this.arrowMode != value){
|
this.arrowMode = value;
|
this.getArrowCls();
|
}
|
},
|
_setArrowAlign: function(value){
|
if(this.arrowAlign != value){
|
this.arrowAlign = value;
|
this.getArrowCls();
|
}
|
},
|
_setMenu: function(value){
|
if(this.popupCt) this.popupCt.parent.remove(this.popupCt);
|
if(value instanceof Array) value = {
|
type: 'menu',
|
shadow: this.popupShadow,
|
autoHide: true,
|
children: value
|
}
|
this.menu = this.popupCt = value;
|
},
|
|
_setOverCls: function(value){
|
if(this.overCls != value){
|
var old = this.overCls;
|
this.overCls = value;
|
if(this.el){
|
Edo.util.Dom.removeClass(this.el, old);
|
this.el.overCls = value;
|
}
|
this.changeProperty('overcls', value);
|
}
|
},
|
_setPressedCls: function(value){
|
if(this.pressedCls != value){
|
var old = this.pressedCls;
|
this.pressedCls = value;
|
if(this.el){
|
Edo.util.Dom.removeClass(this.el, old);
|
this.el.clickCls = value;
|
}
|
this.changeProperty('pressedcls', value);
|
}
|
},
|
|
_setWidth: function(w){
|
if(!Edo.isInt(w) && this.width != w){
|
this.widthGeted = false;//重新获得
|
}
|
Edo.controls.Button.superclass._setWidth.call(this, w);
|
},
|
addCls: function(cls){
|
Edo.controls.Button.superclass.addCls.call(this, cls);
|
if(!Edo.isInt(this.width)){
|
this.widthGeted = false;//重新获得
|
if(this.el) {
|
this.el.style.width = 'auto';
|
}
|
}
|
},
|
removeCls: function(cls){
|
Edo.controls.Button.superclass.removeCls.call(this, cls);
|
if(!Edo.isInt(this.width)){
|
this.widthGeted = false;//重新获得
|
if(this.el) {
|
this.el.style.width = 'auto';
|
}
|
}
|
|
},
|
_setText: function(value){
|
if(this.text != value){
|
this.text = value;
|
if(!this.simpleButton){
|
if(this.el){
|
this.field.innerHTML = value;
|
//this.field.textContent = value;
|
}
|
}else{
|
|
}
|
if(!Edo.isInt(this.width)){
|
this.widthGeted = false;//重新获得
|
if(this.el) {
|
this.el.style.width = 'auto';
|
//Edo.util.Dom.repaint(this.el);
|
}
|
}
|
this.changeProperty('text', value);
|
if(!Edo.isInt(this.width)){
|
this.relayout('text', value);
|
}
|
}
|
},
|
_setIcon: function(value){
|
if(this.icon != value){
|
if(this.el){
|
Edo.util.Dom.removeClass(this.field, this.icon);
|
Edo.util.Dom.addClass(this.field, value);
|
}
|
this.icon = value;
|
}
|
},
|
_setPressed: function(value){
|
value = Edo.toBool(value);
|
if(this.pressed != value){
|
this.pressed = Edo.toBool(value);
|
if(this.el){
|
if(this.pressed){
|
Edo.util.Dom.addClass(this.el, this.togglCls);
|
}else{
|
Edo.util.Dom.removeClass(this.el, this.togglCls);
|
}
|
}
|
this.fireEvent('toggle', {
|
type: 'toggle',
|
source: this,
|
pressed: value
|
});
|
|
// if(!Edo.isInt(this.width)){
|
// this.widthGeted = false;//重新获得
|
// if(this.table) {
|
// this.table.style.width = 'auto';
|
// Edo.util.Dom.repaint(this.table);
|
// }
|
// }
|
// this.changeProperty('pressed', value);
|
// if(!Edo.isInt(this.width)){
|
// this.relayout('pressed', value);
|
// }
|
}
|
},
|
// syncSize : function(){
|
// Edo.controls.Button.superclass.syncSize.call(this);
|
// this.el.style.visibility = 'visible';
|
// alert(this.realHeight);
|
// },
|
destroy : function(){
|
|
Edo.util.Dom.clearEvent(this.field);
|
Edo.controls.Button.superclass.destroy.call(this);
|
}
|
});
|
Edo.controls.Button.regType('button');
|
