jQuery Mobile reutilizando un encabezado y navegación

Soy nuevo en jQuery Mobile y tengo problemas para entender cómo reutilizar un encabezado y navegación general.

Así que he creado un encabezado que tiene un botón de menú a la derecha. Al hacer clic en esta barra de menú, aparece una ventana emergente con enlaces a otras 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>

Puedo duplicar este código en todas las páginas, pero por lo que he leído brevemente, jQuery lo hace automáticamente. Es esto cierto. Si no, ¿cómo lo consigo?

A partir de esta pregunta cuando se trata de navegar por páginas y reutilizar encabezados se encuentra ela href La forma estándar de cargar nuevas páginas?

Cualquier ayuda sería apreciada.

Gracias.