1

我无法理解 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");
      }
    });
  });
4

2 回答 2

3

您将其放入字符串中：

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

稍后，您将使用该字符串并使用它执行此操作：

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

所以你正在做的是用标签的实际链接和文本替换原始字符串中的{href}和字符。{label}<a>

于 2013-02-22T21:23:17.067 回答
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。

于 2013-02-22T21:34:14.380 回答