如何將類似的html複製到jQuery的每個頁面中

我創建了一個引導程序網頁，並且我只想創建一次頂部欄，然後將其包含在每個頁面上。在Django中，使用模板繼承很容易。我可以在基本頁面上創建一個新標籤，並將其包含在我想要的每個頁面上。現在我只使用jQuery，所以我試圖找出一種方法在這裏做到這一點。如何將類似的html複製到jQuery的每個頁面中

我已經看過jQuery tmpl，但它看起來像那不是我想要的，因爲我想每次都複製相同的代碼。

現在，可以說這是我的頭：

<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>

而且我想用一個模板來替換它，所以它是簡單地複製到頁面上。建議？

來源

2012-12-28 Jameo

JQuery不是一個Web應用程序框架。它更像是一個DOM操作工具。你應該看看像Angular.js或Knockout.js – bluetoft

你正在使用JSP，PHP或ASP.Net？ – phnkha

我想要做的就是在每個頁面上重現一些html，現在不擔心任何自定義數據 – Jameo

好吧我想出了一種方法來做到這一點在jQuery中，類似於@JFK的建議。

我創建了一個名爲topbar.html我的代碼獨立的HTML文件：

<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>

然後在我的index.html，除了jQuery的，我還添加了

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

要包括tmpl函數。然後，我可以這樣做：

<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>

一旦我明白了jQuery TMPL是所有關於非常簡單。然後，您可以額外傳遞額外的參數給tmpl以自定義此模板。但我現在不需要任何東西了。

來源

2012-12-28 16:59:45 Jameo

如何將類似的html複製到jQuery的每個頁面中

回答

相關問題