不推荐使用 JQuery Ui 选项卡分页

Question

我在旧系统中使用 UI 选项卡分页扩展程序 - v1.2.2。 https://code.google.com/archive/p/jquery-ui-tabs-paging/

它支持 jQuery 1.9.0 和 jQuery UI 1.9.0 。我需要升级以支持最新版本的 Jquery 和 Jquery UI，因为第三方客户安全测试中会出现弃用消息。

还有其他选择吗？我搜索但无法确定最佳解决方案。

Answer 1

在这里使用 jQuery 3.3.1 和 jQuery UI 1.12.1 进行测试：https://jsfiddle.net/Twisty/ry2gyhee/ 我没有看到代码有问题。有一些地方可以更新和改进。

我的测试基于https://github.com/Akshay-Hegde/jquery-ui-tabs-paging/blob/wiki/ProjectHome.md提供的示例

HTML

<div id="example">
  <ul class="tabs">
    <li><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
    <li><a href="#tab4">Tab 4</a></li>
    <li><a href="#tab5">Tab 5</a></li>
    <li><a href="#tab6">Tab 6</a></li>
    <li><a href="#tab7">Tab 7</a></li>
    <li><a href="#tab8">Tab 8</a></li>
    <li><a href="#tab9">Tab 9</a></li>
    <li><a href="#tab10">Tab 10</a></li>
    <li><a href="#tab11">Tab 11</a></li>
    <li><a href="#tab12">Tab 12</a></li>
    <li><a href="#tab13">Tab 13</a></li>
    <li><a href="#tab14">Tab 14</a></li>
    <li><a href="#tab15">Tab 15</a></li>
  </ul>
  <div id="tab1">Tab 1</div>
  <div id="tab2">Tab 2</div>
  <div id="tab3">Tab 3</div>
  <div id="tab4">Tab 4</div>
  <div id="tab5">Tab 5</div>
  <div id="tab6">Tab 6</div>
  <div id="tab7">Tab 7</div>
  <div id="tab8">Tab 8</div>
  <div id="tab9">Tab 9</div>
  <div id="tab10">Tab 10</div>
  <div id="tab11">Tab 11</div>
  <div id="tab12">Tab 12</div>
  <div id="tab13">Tab 13</div>
  <div id="tab14">Tab 14</div>
  <div id="tab15">Tab 15</div>
</div>

JavaScript

$(function() {
  $('#example').tabs();
  $('#example').tabs('paging', {
    cycle: true,
    follow: true
  });
});

根据这些测试，我会说它功能齐全。如果您不同意，请使用最小、完整且可验证的示例更新您的帖子：https://stackoverflow.com/help/mcve

会考虑使用 jQuery UI Widget Factory 来利用它的能力并进行改进。