0

我正在创建一个引导网页，我只想创建一次顶部栏，然后将其包含在每个页面上。在 Django 中，使用模板继承很容易。我可以在基本页面中创建一个新标签，并将其包含在我想要的每个页面上。现在我只使用 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>

我想用模板替换它，以便将其简单地复制到页面上。建议？

4

1 回答 1

0

好的，我想出了一种在 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-28T16:59:45.407 回答