1 // ========================================================================== 2 // Project: SproutCore - JavaScript Application Framework 3 // Copyright: ©2006-2011 Strobe Inc. and contributors. 4 // Portions ©2008-2011 Apple Inc. All rights reserved. 5 // License: Licensed under MIT license (see license.js) 6 // ========================================================================== 7 8 /** @class 9 10 Provides a button that displays an image instead of the standard button 11 user interface. 12 13 It behaves the same as an SC.ButtonView, but has an image property that 14 should be set to a unique class name. 15 16 For example: 17 18 SC.ImageButtonView.create({ 19 action: 'imageButtonWasClicked', 20 21 image: 'my-image-button-icon' 22 }); 23 24 You could then add some CSS rule for a normal state: 25 26 $theme.image-button .my-image-button-icon { 27 @include slice('my-image-button-image.png'); 28 29 // and an active state: 30 &.active { 31 @include slice('my-image-button-image-active.png'); 32 } 33 } 34 35 Note: in addition to using SCSS and the Chance directives shown above, you 36 can use normal CSS syntax and sc_static. 37 38 @extends SC.View 39 @extends SC.Control 40 @extends SC.ButtonView 41 @since SproutCore 1.5 42 */ 43 SC.ImageButtonView = SC.ButtonView.extend( 44 /** @scope SC.ImageButtonView.prototype */ { 45 46 /** 47 @type Array 48 @default ['sc-image-button-view'] 49 @see SC.View#classNames 50 */ 51 classNames: ['sc-image-button-view'], 52 53 /** 54 Unlike SC.ButtonView, SC.ImageButtonView does not have a default theme 55 that needs to be applied for backwards compatibility. 56 57 @type String 58 @default null 59 */ 60 themeName: null, 61 62 /** 63 @type String 64 @default 'imageButtonRenderDelegate' 65 */ 66 renderDelegateName: 'imageButtonRenderDelegate', 67 68 /** 69 @type Array 70 @default ['image'] 71 */ 72 displayProperties: ['image'], 73 74 /** 75 A class name that will be applied to the img tag of the button. 76 77 @type String 78 @default null 79 */ 80 image: null 81 82 }); 83