Question

我无法理解jQuery UI标签教程的某些部分。特别是这部分#{href}'>#{label}它在做什么/它意味着什么？

完整代码：

$(function () {
    var tabTitle = $("#tab_title"),
      tabContent = $("#tab_content"),
      tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
      tabCounter = 3;

    var tabs = $("#tabs").tabs();

    // modal dialog init: custom buttons and a "close" callback reseting the form inside
    var dialog = $("#dialog").dialog({
      autoOpen: false,
      modal: true,
      buttons: {
        Add: function () {
          addTab();
          $(this).dialog("close");
        },
        Cancel: function () {
          $(this).dialog("close");
        }
      },
      close: function () {
        form[0].reset();
      }
    });

    // addTab form: calls addTab function on submit and closes the dialog
    var form = dialog.find("form").submit(function (event) {
      addTab();
      dialog.dialog("close");
      event.preventDefault();
    });

    // actual addTab function: adds new tab using the input from the form above
    function addTab() {
      var label = tabTitle.val() || "Tab " + tabCounter,
        id = "tabs-" + tabCounter,
        li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, label)),
        tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content.";

      tabs.find(".ui-tabs-nav").append(li);
      tabs.append("<div id='" + id + "'><p>" + tabContentHtml + "</p></div>");
      tabs.tabs("refresh");
      tabCounter++;
    }

    // addTab button: just opens the dialog
    $("#add_tab")
      .button()
      .click(function () {
        dialog.dialog("open");
      });

    // close icon: removing the tab on click
    tabs.delegate("span.ui-icon-close", "click", function () {
      var panelId = $(this).closest("li").remove().attr("aria-controls");
      $("#" + panelId).remove();
      tabs.tabs("refresh");
    });

    tabs.bind("keyup", function (event) {
      if (event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE) {
        var panelId = tabs.find(".ui-tabs-active").remove().attr("aria-controls");
        $("#" + panelId).remove();
        tabs.tabs("refresh");
      }
    });
  });

Answer 1

你把它放到一个字符串中：

<a href='#{href}'>#{label}</a>

之后，你正在接受这个字符串并用它来做：

tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, label)

所以您正在做的是将原始字符串中的{href}和{label}字符替换为<a>标记的实际链接和文字。

Answer 2

基本上，＃{href}和＃{label}以及#tab_title和#tab_content都是占位符。这些占位符将替换为真实内容。

jQuery UI教程包含一些LI元素，后面将成为标签：

<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>

您可以将href =“”的内容与＃{href}占位符匹配，并将A元素的内容插入相应的＃{label}

href-part甚至命名包含内容的div-id。

<div id="tabs-1">
  <p>Proin elit arcu, [... ]tempus lectus.</p>
</div>

ID为“tabs-1”的div将被读作“＃tabs-1”选项卡的内容。在模板内部，将使用此内容代替#tab_content。

jQuery UI - 添加标签教程需要解释

2 个答案: