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: 16.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 of any tab bar item view. An M.TabBarItemView can only be 15 * used as a child view of a tab bar view. 16 * 17 * @extends M.View 18 */ 19 M.TabBarItemView = M.View.extend( 20 /** @scope M.TabBarItemView.prototype */ { 21 22 /** 23 * The type of this object. 24 * 25 * @type String 26 */ 27 type: 'M.TabBarItemView', 28 29 /** 30 * Determines whether this TabBarItem is active or not. 31 * 32 * @type Boolean 33 */ 34 isActive: NO, 35 36 /** 37 * This property is used to specify an internal target for an automatically called action. This 38 * is used to trigger the switchPage() by clicking on a tab bar item. 39 * 40 * @type Object 41 */ 42 internalTarget: null, 43 44 /** 45 * This property is used to specify an internal action for an automatically called action. This 46 * is used to trigger the switchPage() by clicking on a tab bar item. 47 * 48 * @type Object 49 */ 50 internalAction: 'switchPage', 51 52 /** 53 * Renders a tab bar item as a li-element inside of a parent tab bar view. 54 * 55 * @private 56 * @returns {String} The button view's html representation. 57 */ 58 render: function() { 59 this.html += '<li><a id="' + this.id + '"' + this.style() + ' href="#">' + this.value + '</a></li>'; 60 61 this.internalTarget = this; 62 63 return this.html; 64 }, 65 66 /** 67 * This method is automatically called if a tab bar item is clicked. It delegates the 68 * page switching job to M.Controller. 69 */ 70 switchPage: function() { 71 M.Controller.switchToPage(M.ViewManager.getPage(this.page)); 72 }, 73 74 /** 75 * Applies some style-attributes to the tab bar item. 76 * 77 * @private 78 * @returns {String} The tab bar item's styling as html representation. 79 */ 80 style: function() { 81 var html = ''; 82 if(this.isActive) { 83 html += ' class="'; 84 html += 'ui-btn-active'; 85 html += '"'; 86 } 87 if(this.icon) { 88 html += ' data-icon="'; 89 html += this.icon; 90 html += '" data-iconpos="top"'; 91 } 92 return html; 93 } 94 95 });