将相同的 jqueryui 添加到多个选项卡

Question

我希望能够对每个选项卡使用相同的 jqueryui。现在，该代码仅适用于其中一个选项卡......但不适用于其余选项卡。关于我如何做到这一点的任何想法？

这是我要应用于 html 的 jquery：

$(document).ready(function(e) {

  // create button and add functionality
  $('#add-todo').button({
    icons: {
    }
  }).click(function() {
    $('#new-todo').dialog('open');
  }); // end click

  // build dialog box and add functionality
  $('#new-todo').dialog({
    modal: true,
    autoOpen: false,
    buttons : {
      "Add task" : function() {
        var taskName = $('#task').val();
        if (taskName === '') {
          return false;
        } 
        var taskHTML = '<li><span class="done"> &#x2705;</span>';
        taskHTML += '<span class="delete"> &#x2704;</span>';
        taskHTML += '<span class="task"></span></li>';

        // convert HTML string to jQuery Object 
        var $newTask = $(taskHTML);

        // add taskname, but make sure HTML is escaped
        $newTask.find('.task').text(taskName);

        //hide new task
        $newTask.hide();

        // append to To Do list 
        $('#todo-list').prepend($newTask);

        // show with effect and highlight
        $newTask.show('clip',250).effect('highlight',1000);
        $(this).dialog('close');
      },
      "Cancel" : function() {
        $(this).dialog('close');
      }
    },
    close: function() {
      $('#new-todo input').val(''); /*clear fields*/
    }
  }); // end dialog

  // mark as complete
  $('#todo-list').on('click','.done', function() {
    var $taskItem = $(this).parent('li');
    $taskItem.slideUp(250, function() {
      var $this = $(this);
      $this.detach();
      $('#completed-list').prepend($this);
      $this.slideDown();
    });
  }); // end on

  //make both lists sortable
  $('.sortlist').sortable({
    connectWith : '.sortlist',
    cursor : 'pointer',
    placeholder : 'ui-state-highlight',
    cancel : '.delete,.done'
  }); // end sortable

  // delete a list item
  $('.sortlist').on('click','.delete',function() {
    $(this).parent('li').effect('puff', function() {
      $(this).remove();
    }); // end effect
  }); // end on

}); // end ready

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Monday</a></li>
    <li><a href="#tabs-2">Tuesday</a></li>
    <li><a href="#tabs-3">Wednesday</a></li>
  </ul>
  <div id="tabs-1">     
    <div class="container">
      <div id="to-do">
        <h1>Goals</h1>
        <button id="add-todo">Click here to add a goal</button>

        <!-- Datepicker -->
        <h2 class="header">When do you want to do this?</h2>
        <div id="datepicker"></div>
        <form id="formscelta" action="Cal.html" method="post">
          <input type="hidden" name="datascelta" id="datascelta">
        </form>
      </div>
      <h2>These are the things I said I'd like to accomplish today:</h2>
      <ul id="todo-list" class="sortlist">
        <li><span class="done">&#x2705;</span>
          <span class="delete">&#x2704;</span>
          <span class="task"></span></li>
      </ul>
    </div>

    <div id="completed">
      <h2>These are the things I've already completed:</h2>
      <ul id="completed-list" class="sortlist">

      </ul>
    </div>
    <div id="new-todo" title="Add to-do item">
      <p>
        <label for="task">Goal:</label>
        <input type="text" name="task" id="task">
      </p>
    </div>
  </div>
  <div id="tabs-2"></div>
  <div id="tabs-3"></div>
</div>

Answer 1

到目前为止，重用模板的最简单、最常见和最可靠的方法是使用带有type="text/template" 的<script> 标记。

或者，如果浏览器支持不是问题，您可以使用template 标签或template literals。

也可以将模板作为 .html 文件并通过 AJAX 加载（jQuery load()、RequireJS text plugin、AngularJS $templateRequest 等支持这一点），这有点复杂。

$(document).ready(function(e) {
  $('.tab-content').append($('#tabsTemplate').html());
  $('#tabs').tabs();
}); // end ready

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/template" id="tabsTemplate">
  <div class="container">
    <div id="to-do">
      <h1>Goals</h1>
      <button id="add-todo">Click here to add a goal</button>
      <!-- Datepicker -->
      <h2 class="header">When do you want to do this?</h2>
      <div id="datepicker"></div>
      <form id="formscelta" action="Cal.html" method="post">
        <input type="hidden" name="datascelta" id="datascelta">
      </form>
    </div>
    <h2>These are the things I said I'd like to accomplish today:</h2>
    <ul id="todo-list" class="sortlist">
      <li><span class="done">&#x2705;</span>
        <span class="delete">&#x2704;</span>
        <span class="task"></span>
      </li>
    </ul>
  </div>
  <div id="completed">
    <h2>These are the things I've already completed:</h2>
    <ul id="completed-list" class="sortlist">
    </ul>
  </div>
  <div id="new-todo" title="Add to-do item">
    <p>
      <label for="task">Goal:</label>
      <input type="text" name="task" id="task">
    </p>
  </div>
</script>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Monday</a>
    </li>
    <li><a href="#tabs-2">Tuesday</a>
    </li>
    <li><a href="#tabs-3">Wednesday</a>
    </li>
  </ul>
  <div id="tabs-1" class="tab-content"></div>
  <div id="tabs-2" class="tab-content"></div>
  <div id="tabs-3" class="tab-content"></div>
</div>

就像 Nielsvh 在他的回答中提到的那样，您应该确保在重用模板时不会生成 id 或唯一的 ids

Answer 2

如果您想将内容复制到其他选项卡中，则必须考虑数据的结构以及需要复制的内容。我个人会在 javascript 中创建对象，然后将其附加到选项卡中。您需要特别注意任何 ID 并确保它们是唯一的（我在下面的 sn-p 中没有这样做）。 比如：

$(function(){
var mydiv = $("<div class=\"container\">"+
      "<div id=\"to-do\">"+
        "<h1>Goals</h1>"+
        "<button id=\"add-todo\">Click here to add a goal</button>"+
        "<h2 class=\"header\">When do you want to do this?</h2>"+
        "<div id=\"datepicker\"></div>"+
        "<form id=\"formscelta\" action=\"Cal.html\" method=\"post\">"+
          "<input type=\"hidden\" name=\"datascelta\" id=\"datascelta\">"+
        "</form>"+
      "</div>"+
      "<h2>These are the things I said I'd like to accomplish today:</h2>"+
      "<ul id=\"todo-list\" class=\"sortlist\">"+
        "<li><span class=\"done\">&#x2705;</span>"+
          "<span class=\"delete\">&#x2704;</span>"+
          "<span class=\"task\"></span></li>"+
      "</ul>"+
    "</div>"+
    "<div id=\"completed\">"+
      "<h2>These are the things I've already completed:</h2>"+
      "<ul id=\"completed-list\" class=\"sortlist\">"+
      "</ul>"+
    "</div>"+
    "<div id=\"new-todo\" title=\"Add to-do item\">"+
      "<p>"+
        "<label for=\"task\">Goal:</label>"+
        "<input type=\"text\" name=\"task\" id=\"task\">"+
      "</p>"+
    "</div>");
  
  for(var i = 1;i <= 3;i++) {
    $("#tabs ul").append($("<li/>").append($("<a/>").attr("href","#tabs-"+i).html("tab"+i)));
    $("#tabs").append(mydiv.clone().attr("id","tabs-" + i));
  }
  $("#tabs").tabs();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="tabs">
  <ul></ul>
</div>