Destacando o item de navegação ativa com jQuery Mobile

Tive dificuldade em encontrar um bom exemplo de destaque da “página” atualmente selecionada na navegação de um aplicativo jQuery Mobile de página única. Aqui está uma combinação de conceitos de uma variedade de segmentos. Provavelmente, existem implementações mais eloquentes, mas isso funcionou para meu aplicativo.

Estou usando um JavaScript simples include em cada “página” para puxar a navegação de uma única fonte:

var strFooter = '<div data-role="footer" data-position="fixed">';
strFooter = strFooter + '<div data-role="navbar" id="navbar">';
strFooter = strFooter + '<ul class="footerNav">';
strFooter = strFooter + '<li><a href="#page" class="ui-state-persist">Page</a></li>';
strFooter = strFooter + '</ul>';
strFooter = strFooter + '</div>';
strFooter = strFooter + '</div>';
document.write(strFooter);

Então, use um jQuery simples para manipular os elementos:

$(document).ready(function() {
  $.mobile.changePage('#home');
  $('a').removeClass('ui-btn-active');
  $('[data-role=page]').live('pageshow', function() {
      if (window.location.hash != '')
      {
        $('#navbar a').removeClass('ui-btn-active');
        $('#navbar a[href="'+window.location.hash+'"]').addClass('ui-btn-active');
      }
  });
  $('.logo').live('vclick', function() {
    $('#navbar a').removeClass('ui-btn-active');
  });
});

O resultado final é que cada vez que a “página” é alterada, a classe ativa é removida do elemento destacado anteriormente e, com base no hash, a classe ativa é então adicionada para destacar a nova seleção.