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 に答える