时间戳

首页 > 解决方案 > 如何使用 UI 代码从链接而不是 addtab 按钮创建 UI 选项卡

jquery-ui - 如何使用 UI 代码从链接而不是 addtab 按钮创建 UI 选项卡

问题描述

我使用 Jquery UI 来管理网页中的选项卡，我想从同一网页中的链接创建新选项卡。新标签的内容是另一个网页...

这是创建新选项卡的代码，但它使用通过创建选项卡按钮打开的表单

// 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++;
}

我想使用链接来创建选项卡而不是按钮。

标签： jquery-ui

解决方案

由于您使用的是此示例：https ://jqueryui.com/tabs/#manipulation

你基本上会<button>用一个<a>元素替换。

<div id="dialog" title="Tab data">
  <form>
    <fieldset class="ui-helper-reset">
      <label for="tab_title">Title</label>
      <input type="text" name="tab_title" id="tab_title" value="Tab Title" class="ui-widget-content ui-corner-all">
      <label for="tab_content">Content</label>
      <textarea name="tab_content" id="tab_content" class="ui-widget-content ui-corner-all">Tab content</textarea>
    </fieldset>
  </form>
</div>

<a id="add_tab" href="#">Add Tab</a>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a> <span class="ui-icon ui-icon-close" role="presentation">Remove Tab</span></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
  </div>
</div>

真的应该不需要做任何其他的改变。

希望有帮助。

推荐阅读