博客

jQuery UI标签启用方法

  • Post category:jquery

以下是关于 jQuery UI 标签启用方法的详细攻略：

jQuery UI 标签启用方法

使用 tabs() 方法可以将 HTML 元素转换为 jQuery UI 标签小部件。该方法可以接受多个项，以自定义标签的行为和外观。

语法

$(selector).tabs(options);

参数

  • options：一个含选项的对象，用于自定义标签的行为和外观。

示例一：创建基本的标签小部件

<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>
$( "#tabs" ).tabs();
</script>

这将创建一个基本的标签小部件，其中包含三个选项卡和相应的内容。

示例二：自定义标签小部件的选项

<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>
$( "#tabs" ).tabs({
  active: 1, // 默认选中第二个选项卡
  heightStyle: "content" // 将选项卡的高度设置为内容的高度
});
</script>

这将创建一个标签小部件，其中默认选中第二个选项卡，并将选项卡的高度设置为内容的高度。

总结：

使用 tabs() 方法可以将 HTML 元素转换为 jQuery UI 标签小部件。该方法可以接受多个选项，以自定义标签的行为和外观。

以上是关于 jQuery UI 标签启用方法的详细攻略，包括语法和示例。

Tags: