博客

jQuery UI Tabs事件选项

  • Post category:jquery

以下是关于 jQuery UI Tabs 事件选项的详细攻略：

jQuery UI Tabs 事件选项

事件选项允许您在选项卡小件上注册事件处理程序，以便在选项卡更改时执行自定义操作。

语法

$(selector).tabs({
  activate: function( event, ui ) {
    // 在选项卡更改时执行的操作
  }
});

事件选项

  • activate：在选项卡更改时触发。

示例一：在选项卡更改时显示警告框

<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({
  activate: function( event, ui ) {
    alert( "选项卡更改为 " + ui.newTab.text() );
  }
});
</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({
  activate: function( event, ui ) {
    document.title = ui.newTab.text() + " - My Website"; // 更新页面标题
  }
});
</script>

这将创建一个选项卡小部件，并在选项卡更改时更新页面标题，以包含新选项卡的文本。

总结：

事件选项允许您在选项卡小部件上注册事件处理程序，以便在选项卡更改时执行自定义操作。

以上是关于 jQuery UI Tabs 事件选项的详细攻略，包括语法和示例。

Tags: