1 /** 2 * Hilo 3 * Copyright 2015 alibaba.com 4 * Licensed under the MIT License 5 */ 6 7 /** 8 * <iframe src='../../../examples/Button.html?noHeader' width = '320' height = '170' scrolling='no'></iframe> 9 * <br/> 10 * 示例: 11 * <pre> 12 * var btn = new Hilo.Button({ 13 * image: buttonImage, 14 * upState: {rect:[0, 0, 64, 64]}, 15 * overState: {rect:[64, 0, 64, 64]}, 16 * downState: {rect:[128, 0, 64, 64]}, 17 * disabledState: {rect:[192, 0, 64, 64]} 18 * }); 19 * </pre> 20 * @class Button类表示简单按钮类。它有弹起、经过、按下和不可用等四种状态。 21 * @augments View 22 * @param {Object} properties 创建对象的属性参数。可包含此类所有可写属性。此外还包括: 23 * <ul> 24 * <li><b>image</b> - 按钮图片所在的image对象。</li> 25 * </ul> 26 * @module hilo/view/Button 27 * @requires hilo/core/Hilo 28 * @requires hilo/core/Class 29 * @requires hilo/view/View 30 * @requires hilo/view/Drawable 31 * @property {Object} upState 按钮弹起状态的属性或其drawable的属性的集合。 32 * @property {Object} overState 按钮经过状态的属性或其drawable的属性的集合。 33 * @property {Object} downState 按钮按下状态的属性或其drawable的属性的集合。 34 * @property {Object} disabledState 按钮不可用状态的属性或其drawable的属性的集合。 35 * @property {String} state 按钮的状态名称。它是 Button.UP|OVER|DOWN|DISABLED 之一。 只读属性。 36 * @property {Boolean} enabled 指示按钮是否可用。默认为true。只读属性。 37 * @property {Boolean} useHandCursor 当设置为true时,表示指针滑过按钮上方时是否显示手形光标。默认为true。 38 */ 39 var Button = Class.create(/** @lends Button.prototype */{ 40 Extends: View, 41 constructor: function(properties){ 42 properties = properties || {}; 43 this.id = this.id || properties.id || Hilo.getUid("Button"); 44 Button.superclass.constructor.call(this, properties); 45 46 this.drawable = new Drawable(properties); 47 this.setState(Button.UP); 48 }, 49 50 upState: null, 51 overState: null, 52 downState: null, 53 disabledState: null, 54 55 state: null, 56 enabled: true, 57 useHandCursor: true, 58 59 /** 60 * 设置按钮是否可用。 61 * @param {Boolean} enabled 指示按钮是否可用。 62 * @returns {Button} 按钮本身。 63 */ 64 setEnabled: function(enabled){ 65 if(this.enabled != enabled){ 66 if(!enabled){ 67 this.setState(Button.DISABLED); 68 }else{ 69 this.setState(Button.UP); 70 } 71 } 72 return this; 73 }, 74 75 /** 76 * 设置按钮的状态。此方法由Button内部调用,一般无需使用此方法。 77 * @param {String} state 按钮的新的状态。 78 * @returns {Button} 按钮本身。 79 */ 80 setState: function(state){ 81 if(this.state !== state){ 82 this.state = state; 83 this.pointerEnabled = this.enabled = state !== Button.DISABLED; 84 85 var stateObj; 86 switch(state){ 87 case Button.UP: 88 stateObj = this.upState; 89 break; 90 case Button.OVER: 91 stateObj = this.overState; 92 break; 93 case Button.DOWN: 94 stateObj = this.downState; 95 break; 96 case Button.DISABLED: 97 stateObj = this.disabledState; 98 break; 99 } 100 101 if(stateObj){ 102 this.drawable.init(stateObj); 103 Hilo.copy(this, stateObj, true); 104 } 105 } 106 107 return this; 108 }, 109 110 /** 111 * overwrite 112 * @private 113 */ 114 fire: function(type, detail){ 115 if(!this.enabled) return; 116 117 var evtType = typeof type === 'string' ? type : type.type; 118 switch(evtType){ 119 case 'mousedown': 120 case 'touchstart': 121 case 'touchmove': 122 this.setState(Button.DOWN); 123 break; 124 case "mouseover": 125 this.setState(Button.OVER); 126 break; 127 case 'mouseup': 128 if(this.overState) this.setState(Button.OVER); 129 else if(this.upState) this.setState(Button.UP); 130 break; 131 case 'touchend': 132 case 'touchout': 133 case 'mouseout': 134 this.setState(Button.UP); 135 break; 136 } 137 138 return Button.superclass.fire.call(this, type, detail); 139 }, 140 141 Statics: /** @lends Button */ { 142 /** 143 * 按钮弹起状态的常量值,即:'up'。 144 * @type String 145 */ 146 UP: 'up', 147 /** 148 * 按钮经过状态的常量值,即:'over'。 149 * @type String 150 */ 151 OVER: 'over', 152 /** 153 * 按钮按下状态的常量值,即:'down'。 154 * @type String 155 */ 156 DOWN: 'down', 157 /** 158 * 按钮不可用状态的常量值,即:'disabled'。 159 * @type String 160 */ 161 DISABLED: 'disabled' 162 } 163 });