1 // ========================================================================== 2 // Project: The M-Project - Mobile HTML5 Application Framework 3 // Copyright: (c) 2010 M-Way Solutions GmbH. All rights reserved. 4 // Creator: Dominik 5 // Date: 02.11.2010 6 // License: Dual licensed under the MIT or GPL Version 2 licenses. 7 // http://github.com/mwaylabs/The-M-Project/blob/master/MIT-LICENSE 8 // http://github.com/mwaylabs/The-M-Project/blob/master/GPL-LICENSE 9 // ========================================================================== 10 11 /** 12 * @class 13 * 14 * This defines the prototype for any button view. A button is a view element that is 15 * typically used for triggering an action, e.g. switching to another page, firing a 16 * request or opening a dialog. 17 * 18 * @extends M.View 19 */ 20 M.ButtonView = M.View.extend( 21 /** @scope M.ButtonView.prototype */ { 22 23 /** 24 * The type of this object. 25 * 26 * @type String 27 */ 28 type: 'M.ButtonView', 29 30 /** 31 * Determines whether this button is active or not. 32 * 33 * Note: This property is only used if the button is part of a button group (M.ButtonGroupView). 34 * 35 * @type Boolean 36 */ 37 isActive: NO, 38 39 /** 40 * Renders a button as an input tag. Input is automatically converted by jQuery mobile. 41 * 42 * @private 43 * @returns {String} The button view's html representation. 44 */ 45 render: function() { 46 this.html += '<a data-role="button" href="#" id="' + this.id + '"' + this.style() + '>' + this.value + '</a>'; 47 48 return this.html; 49 }, 50 51 /** 52 * Updates the value of the button with DOM access by jQuery. 53 * 54 * @private 55 */ 56 renderUpdate: function() { 57 $('#' + this.id).parent().find('.ui-btn-text').text(this.value); 58 this.theme(); 59 }, 60 61 /** 62 * Sets the button's value and calls renderUpdate() to make the value update visible. 63 * 64 * @param {String} value The button's new value. 65 */ 66 setValue: function(value) { 67 this.value = value; 68 this.renderUpdate(); 69 }, 70 71 /** 72 * Triggers the rendering engine, jQuery mobile, to style the button. 73 * 74 * @private 75 */ 76 theme: function() { 77 $('#' + this.id).button(); 78 }, 79 80 /** 81 * Applies some style-attributes to the button. 82 * 83 * @private 84 * @returns {String} The button's styling as html representation. 85 */ 86 style: function() { 87 var html = ''; 88 if(this.isInline) { 89 html += ' data-inline="true"'; 90 } 91 if(this.icon) { 92 html += ' data-icon="' + this.icon + '"'; 93 } 94 if(this.cssClass) { 95 html += ' data-theme="' + this.cssClass + '"'; 96 } 97 if(this.cssStyle) { 98 html += 'style="' + this.cssStyle + '"'; 99 } 100 return html; 101 } 102 103 });