博客

jQuery UI Tabs widget()方法

  • Post category:jquery

以下是关于 jQuery UI Tabs widget() 方法的详细攻略：

jQuery UI Tabs widget() 方法

widget() 方法返回选项卡小部件的 jQuery 对象。您可以使用此方法来访问选项卡小部件的方法和属性。

语法

$(selector).tabs( "widget" );

参数

无

示例一：获取选项卡小部件的 jQuery 对象

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">选项卡 1</a></li>
    <li><a href="#tabs-2">选项卡 2</a></li>
    <li><a href="#tabs-3">选项卡 3</a></li>
  </ul>
  <div id="tabs-1">
    <p>这是选项卡 1 的内容。</p>
  </div>
  <div id="tabs-2">
    <p>这是选项卡 2 的内容。</p>
  </div>
  <div id="tabs-3">
    <p>这是选项卡 3 的内容。</p>
  </div>
</div>

<script>
var tabsWidget = $( "#tabs" ).tabs( "widget" ); // 获取选项卡小部件的 jQuery 对象
console.log( tabsWidget ); // 输出选项卡小部件的 jQuery 对象
</script>

这将创建一个选项卡小部件，并使用 widget() 方法获取其 jQuery 对象，并将其输出到控制台。

示例二：使用选项卡小部件的方法

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">选项卡 1</a></li>
    <li><a href="#tabs-2">选项卡 2</a></li>
    <li><a href="#tabs-3">选项卡 3</a></li>
  </ul>
  <div id="tabs-1">
    <p>这是选项卡 1 的内容。</p>
  </div>
  <div id="tabs-2">
    <p>这是选项卡 2 的内容。</p>
  </div>
  <div id="tabs-3">
    <p>这是选项卡 3 的内容。</p>
  </div>
</div>

<script>
var tabsWidget = $( "#tabs" ).tabs( "widget" ); // 获取选项卡小部件的 jQuery 对象
tabsWidget.tabs( "option", "active", 1 ); // 将选项卡更改为第二个选项卡
</script>

这将创建一个选项卡小部件，并使用 widget() 方法获取其 jQuery 对象，并使用其方法将选项卡更改为第二个选项卡。

总结：

widget() 方法返回选项卡小部件的 jQuery 对象。您可以使用此方法来访问选项卡小部件的方法和属性。

以上是关于 jQuery UI Tabs widget() 方法的详细攻略，包括语法和示例。

Tags: