博客

jQWidgets jqxTabs toggleMode属性

  • Post category:jquery

jQWidgets是一个面向jQuery的JavaScript框架，它提供了一系列的UI组件和工具，其中包括jqxTabs组件。jqxTabs是一个交互式的选项卡组件，它允许用户在不同的选项卡之间切换信息，同时也提供了一些可定制的属性，其中之一是toggleMode属性。

toggleMode属性概述

toggleMode属性允许用户在jqxTabs组件中启用或禁用单击切换选项卡的功能。如果开启toggleMode属性，当用户单击已经激活的选项卡，该选项卡将关闭。如果关闭toggleMode属性，则单击激活选项卡不会导致任何操作。

toggleMode属性用法

启用或禁用toggleMode属性通常需要在初始化jqxTabs组件时进行设置。可以使用以下代码演示实现：

//开启toggleMode属性
$("#jqxTabs").jqxTabs({
   width: '100%',
   toggleMode: 'click'
});

//关闭toggleMode属性
$("#jqxTabs").jqxTabs({
   width: '100%',
   toggleMode: 'none'
});

在上面的代码中，toggleMode属性被设置为了’click’或’none’。现在让我们看看这两种设置的具体实现：

示例1：启用toggleMode属性

在下面的例子中，我们演示了如何在jqxTabs组件中启用toggleMode属性。当用户单击已激活的标签时，它会在打开或关闭等待期之间进行切换。

// html
<div id='jqxTabs'>
   <ul>
      <li>Tab 1</li>
      <li>Tab 2</li>
      <li>Tab 3</li>
      <li>Tab 4</li>
   </ul>
   <div>Content 1</div>
   <div>Content 2</div>
   <div>Content 3</div>
   <div>Content 4</div>
</div>

// js
$(document).ready(function () {
   $("#jqxTabs").jqxTabs({
      width: '100%',
      toggleMode: 'click'
   });
});

在这个例子中，我们在初始化jqxTabs组件时添加了toggleMode属性，并将其设置为“click”。

示例2：禁用toggleMode属性

在下面的示例中，我们演示了如何在jqxTabs组件中禁用toggleMode属性。当单击激活的标签时，不会发生任何响应。

// html
<div id='jqxTabs'>
   <ul>
      <li>Tab 1</li>
      <li>Tab 2</li>
      <li>Tab 3</li>
      <li>Tab 4</li>
   </ul>
   <div>Content 1</div>
   <div>Content 2</div>
   <div>Content 3</div>
   <div>Content 4</div>
</div>

// js
$(document).ready(function () {
   $("#jqxTabs").jqxTabs({
      width: '100%',
      toggleMode: 'none'
   });
});

在这个例子中，我们只需要在初始化jqxTabs组件时添加toggleMode属性，将其设置为’none’即可禁止toggleMode属性。

结论

在本文中，我们详细讲解了jQWidgets jqxTabs toggleMode属性，包括它的基本概述、用法和两个示例说明。通过这些实用的信息，我们相信您现在更加了解如何使用jQWidgets jqxTabs组件。

Tags: