jQWidgets jqxTabs collapsible 属性

简介

jQWidgets是一个基于jQuery的UI控件组件库，其中包含了许多功能强大的控件。jqxTabs是其中的一个选项卡控件，通过设置collapsible属性，可以将选项卡面板折叠起来，达到更好的用户体验效果。

使用方法

引入jQWidgets库文件

<!-- 引入jqwidgets.css文件 -->
<link rel="stylesheet" href="./jqwidgets/styles/jqx.base.css">

<!-- 引入jqwidgets.js文件 -->
<script src="./jqwidgets/jqxcore.js"></script>
<script src="./jqwidgets/jqxbuttons.js"></script>
<script src="./jqwidgets/jqxscrollbar.js"></script>
<script src="./jqwidgets/jqxpanel.js"></script>
<script src="./jqwidgets/jqxtabs.js"></script>

创建选项卡控件

<div id="jqxTabs" style="margin-top: 10px;"></div>

// 创建选项卡控件
$("#jqxTabs").jqxTabs({
    width: '100%',
    height: 400,
    collapsible: true, // 设置collapsible属性为true
    theme: 'energyblue'
});

// 添加选项卡
$("#jqxTabs").jqxTabs('addLast', '第1个选项卡', '选项卡面板1');
$("#jqxTabs").jqxTabs('addLast', '第2个选项卡', '选项卡面板2');
$("#jqxTabs").jqxTabs('addLast', '第3个选项卡', '选项卡面板3');

collapsible属性详解

属性值

• false: 默认值，不支持折叠
• true: 支持折叠
• none: 不支持折叠
• all: 支持全部折叠

折叠状态控制

• 折叠：$("#jqxTabs").jqxTabs('collapseAt', index)
• 展开：$("#jqxTabs").jqxTabs('expandAt', index)
• 切换状态：$("#jqxTabs").jqxTabs('toggleMode', index)

代码演示

<div id="jqxTabs" style="margin-top: 10px;"></div>

// 创建选项卡控件
$("#jqxTabs").jqxTabs({
    width: '100%',
    height: 400,
    collapsible: 'all', // 设置collapsible属性为all，支持全部折叠
    theme: 'energyblue'
});

// 添加选项卡
$("#jqxTabs").jqxTabs('addLast', '第1个选项卡', '选项卡面板1');
$("#jqxTabs").jqxTabs('addLast', '第2个选项卡', '选项卡面板2');
$("#jqxTabs").jqxTabs('addLast', '第3个选项卡', '选项卡面板3');

// 折叠第1个选项卡
$("#jqxTabs").jqxTabs('collapseAt', 0);

// 切换第2个选项卡的状态
$("#jqxTabs").jqxTabs('toggleMode', 1);