Sou iniciante no jQuery Mobile e tenho problemas para entender a reutilização de um cabeçalho e a navegação geral.

Então, eu criei um cabeçalho que tem um botão de menu à direita. Ao clicar nessa barra de menus, um pop-up aparece com links para outras páginas:

<div data-role="header">
       <h1>Home</h1>
       <a href="#popupMenu" data-rel="popup" data-transition="slide" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-bars ui-btn-icon-right ui-btn-a">Menu</a>
           <div data-role="popup" id="popupMenu"  data-theme="a" style="top: 22px; right: -12px">
                  <ul data-role="listview" data-inset="true" style="min-width:250px; min-height: 698px;">
                      <li><a href="test1.html">Home</a></li>
                      <li><a href="test2.html">Second</a></li>
                 </ul>
           </div>
</div>

Posso duplicar esse código em todas as páginas, mas pelo que li brevemente, o jQuery faz isso automaticamente. Isso é verdade. Se não, como faço para obtê-lo.

Após essa pergunta, quando se trata de navegar em páginas e reutilizar cabeçalhos, está oa href a maneira padrão de carregar novas páginas?

Qualquer ajuda seria apreciada.

Obrigado.