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 * The is the prototype of any tab bar view. A tab bar view is a special variant of a toolbar 15 * at the top or bottom of a page, that consists of up to five horizontally aligned tabs. An 16 * M.TabBarView can be used the top navigation level for an application since it is always 17 * visible an indicates the currently selected tab. 18 * 19 */ 20 M.TabBarView = M.View.extend( 21 /** @scope M.TabBarView.prototype */ { 22 23 /** 24 * The type of this object. 25 * 26 * @type String 27 */ 28 type: 'M.TabBarView', 29 30 /** 31 * Defines the position of the TabBar. Possible values are: 32 * 33 * - M.BOTTOM => is a footer tab bar 34 * - M.TOP => is a header tab bar 35 * 36 * @type String 37 */ 38 anchorLocation: M.BOTTOM, 39 40 /** 41 * Renders a tab bar as an unordered list. 42 * 43 * @private 44 * @returns {String} The tab bar view's html representation. 45 */ 46 render: function() { 47 if(!this.html) { 48 this.html = ''; 49 50 this.html += '<div id="' + this.id + '" data-id="' + this.name + '" data-role="' + this.anchorLocation + '" data-position="fixed"><div data-role="navbar"><ul>'; 51 52 this.renderChildViews(); 53 54 this.html += '</ul></div></div>'; 55 } 56 return this.html; 57 }, 58 59 /** 60 * Triggers render() on all children of type M.TabBarItemView. 61 * 62 * @private 63 */ 64 renderChildViews: function() { 65 if(this.childViews) { 66 var childViews = $.trim(this.childViews).split(' '); 67 for(var i in childViews) { 68 var view = this[childViews[i]]; 69 if(view.type === 'M.TabBarItemView') { 70 view.parentView = this; 71 this.html += view.render(); 72 } else { 73 M.Logger.log('Invalid child views specified for TabBarView. Only TabBarItemViews accepted.', M.WARN); 74 } 75 } 76 } else { 77 M.Logger.log('No TabBarItemViews specified.', M.WARN); 78 return; 79 } 80 }, 81 82 /** 83 * This method activates a tab bar item based on a given page. 84 * 85 * @param {String, M.PageView} page The page to the corresponding tab that is to be set active. 86 */ 87 setActiveTab: function(page) { 88 if(this.childViews) { 89 var childViews = $.trim(this.childViews).split(' '); 90 var previousPage = M.Application.viewManager.getCurrentPage(); 91 var nextPage = page.type === 'M.PageView' ? page : M.ViewManager.getPage(page); 92 for(var i in childViews) { 93 var view = this[childViews[i]]; 94 if(view.page === page) { 95 view.isActive = YES; 96 $('[data-id="' + this.name + '"]').each(function() { 97 $(this).find('#' + view.id).addClass('ui-btn-active'); 98 }); 99 } else { 100 view.isActive = NO; 101 $('[data-id="' + this.name + '"]').each(function() { 102 $(this).find('#' + view.id).removeClass('ui-btn-active'); 103 }); 104 } 105 } 106 } 107 } 108 109 });