Comment copier un html similaire dans chaque page de jQuery

Question

Je crée une page Web bootstrap, et je voudrais créer la barre supérieure une seule fois, puis l'inclure sur chaque page. Dans Django, c'était facile avec l'héritage de template. Je pourrais simplement créer une nouvelle étiquette dans la page de base, et l'inclure sur chaque page que je voulais. Maintenant, je n'utilise que jQuery, alors j'essaie de trouver un moyen de le faire ici.

J'ai regardé jQuery tmpl mais il semble que ce n'est pas exactement ce que je veux, parce que je veux que le même code soit copié à chaque fois.

Pour l'instant, disons que ceci est ma tête:

<div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="navbar-inner"> 
    <div class="container"> 
     <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </a> 
     <a class="brand" href="#">Brand</a> 
     <div class="nav-collapse collapse"> 
     <ul class="nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#about">About</a></li> 
      <li><a href="#contact">Contact</a></li> 
     </ul> 
     </div><!--/.nav-collapse --> 
    </div> 
    </div> 
</div> 

Et je veux le remplacer par un modèle de sorte qu'il est simplement copié sur la page. Suggestions?

Answer 1

Ok, j'ai trouvé une façon de le faire dans jQuery, de manière similaire à ce que suggère @JFK.

J'ai créé un fichier html séparé appelé topbar.html avec mon code:

<div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="navbar-inner"> 
    <div class="container"> 
     <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </a> 
     <a class="brand" href="#">Brand</a> 
     <div class="nav-collapse collapse"> 
     <ul class="nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#about">About</a></li> 
      <li><a href="#contact">Contact</a></li> 
     </ul> 
     </div><!--/.nav-collapse --> 
    </div> 
    </div> 
</div> 

Puis dans mon index.html, en plus de jquery, j'ai aussi ajouté

<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script> 

Pour inclure le Fonction tmpl. Je pourrais le faire:

<script type="text/javascript"> 
    $.get('topbar.html', function(template) { 

     // Use that stringified template with $.tmpl() and 
     // inject the rendered result into the body. 
     console.log(template); 
     $("#topbar").html(template); 
    }); 

</script> 

très simple une fois que je compris ce que le tmpl jQuery était. Vous pouvez ensuite passer des paramètres supplémentaires à tmpl pour personnaliser ce modèle. Mais je n'avais pas besoin de quelque chose d'aussi sophistiqué pour l'instant