1 /** 2 * @fileOverview simple split button ,common usecase :button + menubutton 3 * @author yiminghe@gmail.com 4 */ 5 KISSY.add("button/split", function (S) { 6 7 var handles = { 8 content:function (e) { 9 var self = this, 10 first = self.get("first"), 11 t = e.target; 12 first.set("content", t.get("content")); 13 first.set("value", t.get("value")); 14 if (self.get("hideAfterMenuClick")) { 15 self.get("second").set("collapsed", true); 16 } 17 }, 18 value:function (e) { 19 var self = this, 20 first = self.get("first"), 21 t = e.target; 22 first.set("value", t.get("value")); 23 if (self.get("hideAfterMenuClick")) { 24 self.get("second").set("collapsed", true); 25 } 26 } 27 }; 28 29 /** 30 * Combining button and menubutton to form SplitButton. 31 * @class 32 * @memberOf Button 33 * @extends Base 34 */ 35 function Split() { 36 Split.superclass.constructor.apply(this, arguments); 37 } 38 39 Split.ATTRS = 40 /** 41 * @lends Button.Split# 42 */ 43 { 44 /** 45 * Button instance. 46 * @type {Button} 47 */ 48 first:{}, 49 /** 50 * MenuButton instance. 51 * @type {MenuButton} 52 */ 53 second:{}, 54 /** 55 * Event type to listen on the menubutton. 56 * Default : click. 57 * @type String 58 */ 59 eventType:{ 60 value:"click" 61 }, 62 /** 63 * Event handler type. 64 * Enum : "content", "value". 65 * "content" : sync first button with second menubutton 's content and value. 66 * "value" : sync first button with second menubutton 's value only. 67 * @type String 68 */ 69 eventHandler:{ 70 // 或者 value 71 value:"content" 72 }, 73 /** 74 * Whether hide menubutton 's drop menu after click on it. 75 * Default : true 76 * @type Boolean 77 */ 78 hideAfterMenuClick:{ 79 value:true 80 } 81 }; 82 83 S.extend(Split, S.Base, 84 /** 85 * @lends Button.Split# 86 */ 87 { 88 /** 89 * Render button and menubutton together. 90 */ 91 render:function () { 92 var self = this, 93 eventType = self.get("eventType"), 94 eventHandler = handles[self.get("eventHandler")], 95 first = self.get("first"), 96 second = self.get("second"); 97 first.set("collapseSide", "right"); 98 second.set("collapseSide", "left"); 99 first.render(); 100 second.render(); 101 if (eventType && eventHandler) { 102 second.on(eventType, eventHandler, self); 103 } 104 } 105 }); 106 107 return Split; 108 109 }, { 110 requires:['base'] 111 });