Skip to content

Instantly share code, notes, and snippets.

@mlynch
Created June 18, 2012 21:45
Show Gist options
  • Save mlynch/2950917 to your computer and use it in GitHub Desktop.
Save mlynch/2950917 to your computer and use it in GitHub Desktop.
Tab Bar widget
(function($) {
$.widget('mobile.tabbar', $.mobile.navbar, {
_create: function() {
// Set the theme before we call the prototype, which will
// ensure buttonMarkup() correctly grabs the inheritied theme.
// We default to the "a" swatch if none is found
var theme = this.element.jqmData('theme') || "a";
this.element.addClass('ui-footer ui-footer-fixed ui-bar-' + theme);
// Call the NavBar _create prototype
$.mobile.navbar.prototype._create.call(this);
},
// Set the active URL for the Tab Bar, and highlight that button on the bar
setActive: function(url) {
this.element.find('a[href="#' + url + '"]').addClass('ui-btn-active ui-state-persist');
}
});
$(document).bind('pagecreate create', function(e) {
return $(e.target).find(":jqmData(role='tabbar')").tabbar();
});
$(":jqmData(role='page')").live('pageshow', function(e) {
// Grab the id of the page that's showing, and select it on the Tab Bar on the page
var tabBar, id = $(e.target).attr('id');
tabBar = $.mobile.activePage.find(':jqmData(role="tabbar")');
if(tabBar.length) {
tabBar.tabbar('setActive', id);
}
});
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment