1 /** 2 * @fileOverview Button control for KISSY. 3 * @author yiminghe@gmail.com 4 */ 5 KISSY.add("button/base", function (S, Event, Component, ButtonRender) { 6 7 var KeyCodes = Event.KeyCodes; 8 /** 9 * @name Button 10 * @constructor 11 * @extends Component.Controller 12 * @class 13 * KISSY Button. 14 */ 15 var Button = Component.Controller.extend( 16 /**@lends Button.prototype */ 17 { 18 bindUI:function () { 19 this.get("el").on("keyup", this.handleKeyEventInternal, this); 20 }, 21 22 handleKeyEventInternal:function (e) { 23 if (e.keyCode == KeyCodes.ENTER && 24 e.type == "keydown" || 25 e.keyCode == KeyCodes.SPACE && 26 e.type == "keyup") { 27 return this.performActionInternal(e); 28 } 29 // Return true for space keypress (even though the event is handled on keyup) 30 // as preventDefault needs to be called up keypress to take effect in IE and 31 // WebKit. 32 return e.keyCode == KeyCodes.SPACE; 33 }, 34 35 performActionInternal:function () { 36 var self = this; 37 if (self.get("checkable")) { 38 self.set("checked", !self.get("checked")); 39 } 40 // button 的默认行为就是触发 click 41 self.fire("click"); 42 }, 43 44 /** 45 * render button to document. 46 */ 47 render:function () { 48 return Button.superclass.render.apply(this, arguments); 49 } 50 }, { 51 ATTRS:/**@lends Button.prototype */ 52 { 53 /** 54 * Value associated with button component. 55 */ 56 value:{}, 57 /** 58 *Aria-describedby attribute. 59 * @type String 60 */ 61 describedby:{ 62 view:1 63 }, 64 /** 65 * Tooltip for button. 66 * @type String 67 */ 68 tooltip:{ 69 view:1 70 }, 71 72 /** 73 * Whether button can be checkable(toggle). 74 * Default: false. 75 * @type Boolean 76 */ 77 checkable:{ 78 }, 79 80 /** 81 * Whether button is checked(toggle). 82 * Default: false. 83 * @type Boolean 84 */ 85 checked:{ 86 view:1 87 }, 88 89 /** 90 * Add collapse-right/left css class to root element. 91 * enum { "left","right" } 92 * @type String 93 */ 94 collapseSide:{ 95 view:1 96 }, 97 98 xrender:{ 99 value:ButtonRender 100 } 101 } 102 }, { 103 xclass:'button', 104 priority:10 105 }); 106 107 return Button; 108 109 }, { 110 requires:['event', 'component', './buttonRender'] 111 });