Question

我目前正在一个需要使用标签的网站上工作。但是我要在其中使用“标签列表”的<div>需要另一个<ul>元素以及其他信息。

如何强制jQuery选择第二组<ul>元素？这是我想要的示例：

$(function() {
  $("#tabs").tabs({
    beforeLoad: function(event, ui) {
      ui.jqXHR.fail(function() {
        ui.panel.html("Couldn't load this tab.);
      });
    }
  });
});

<div id="tabs" class="center">
  <div class="leftpanel">
    <ul class="ignore">
      <!-- I need to ignore this <ul> -->
      <li>Some Information</li>
      <li>Some Other Information</li>
    </ul>
    <ul class="Use this">
      <!-- I need this <ul> to be used instead. -->
      <li><a href="#tabs-1">Preloaded</a></li>
      <li><a href="#tabs-2">Tab 1</a></li>
      <li><a href="ajax/content2.html">Tab 2</a></li>
      <li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li>
      <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
    </ul>
  </div>
  <div class="center tabbed">
    <div id="tabs-1">
      <p>Proin elit arcu, rutrum commod. Nam elementum quam ullamcorper ante. Aliquam nulla.</p>
    </div>
    <div id="tabs-2">
      <p>Nunc tristique tempus lectus.</p>
    </div>
  </div>

问题在于，第一个不必要的<ul>不能放在其他地方。因此，选项卡功能不起作用。

Answer 1

这是您要寻找的：

http://api.jqueryui.com/tabs/#method-_getList

确定应将哪个列表转换为选项卡。默认情况下，使用第一个后代列表。

示例

_getList: function() {
  var list = this.element.find( ".my-tabs" );
  return list.length ? list.eq( 0 ) : this._super();
}

对于您的代码，这将是：

$(function() {
  $("#tabs").tabs({
    beforeLoad: function(event, ui) {
      ui.jqXHR.fail(function() {
        ui.panel.html("Couldn't load this tab.");
      });
    },
    _getList: function() {
      var list = this.element.find(".use-this");
      return list.length ? list.eq(0) : this._super();
    }
  });
});

RTFM。

更新

通读API，并通读GitHub上的代码：

https://github.com/jquery/jquery-ui/blob/master/ui/widgets/tabs.js

第491-494行

// Allow overriding how to find the list for rare usage scenarios (#7715)
_getList: function() {
    return this.tablist || this.element.find( "ol, ul" ).eq( 0 );
},

此功能应允许覆盖，以便代码可以执行以下操作。

$(function() {
  $("#tabs").tabs({
    _getList: function() {
      var list;
      this.element.find("ul").each(function() {
        if ($(this).hasClass("my-tabs")) {
          list = $(this);
        }
      });
      console.log(list);
      return list.length ? list : this._super();
    }
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="tabs">
  <ul class="ignore">
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
  <ul class="my-tabs">
    <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>
  </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 id="tabs-2">
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean
      aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat.
      Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
  </div>
  <div id="tabs-3">
    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia
      nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
    <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna
      ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum.
      Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
  </div>
</div>

如您所见，事实并非如此。该代码似乎被忽略了，应该将某物发送到控制台的自定义回调不会。

这是正确的方法，但似乎存在错误。

因此您可以使用$.widget来严重覆盖它。

$(function() {
  $.widget("custom.myTabs", $.ui.tabs, {
    _getList: function() {
      return this.element.find(".my-tabs");
    }
  });
  $("#tabs").myTabs();
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="tabs">
  <ul class="ignore">
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
  <ul class="my-tabs">
    <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>
  </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 id="tabs-2">
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean
      aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat.
      Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
  </div>
  <div id="tabs-3">
    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia
      nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
    <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna
      ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum.
      Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
  </div>
</div>

上面的代码按需工作。

jQuery对选项卡使用特定的UL元素

1 个答案: