jQWidgets是一个基于jQuery开发的前端UI库，其中包含了许多常用的UI组件，jqxTabs也是其中之一。jqxTabs可以实现标签页的功能，其中reorder属性可以使得标签页可拖动排序。
语法
jqxTabs组件的reorder属性可以通过以下语法进行设置：
$('#jqxTabs').jqxTabs({ reorder: true });
参数说明
reorder属性值为true时，代表标签页可以拖动排序。值为false时，代表标签页不能拖动排序。
实例说明
以下是两个实例，分别是开启和关闭reorder属性的效果：
实例1：开启reorder属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>开启reorder属性示例</title>
<link rel="stylesheet" href="jqx.base.css">
<link rel="stylesheet" href="jqx.classic.css">
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jqx-all.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#jqxTabs').jqxTabs({ reorder: true });
});
</script>
</head>
<body>
<div id="jqxTabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div>
Content 1
</div>
<div>
Content 2
</div>
<div>
Content 3
</div>
</div>
</body>
</html>
在上述实例中，设置了reorder属性值为true，当用户拖拽标签页时，标签页的位置会发生变化。
实例2：关闭reorder属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>关闭reorder属性示例</title>
<link rel="stylesheet" href="jqx.base.css">
<link rel="stylesheet" href="jqx.classic.css">
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jqx-all.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#jqxTabs').jqxTabs({ reorder: false });
});
</script>
</head>
<body>
<div id="jqxTabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div>
Content 1
</div>
<div>
Content 2
</div>
<div>
Content 3
</div>
</div>
</body>
</html>
在上述实例中，设置了reorder属性值为false，当用户拖拽标签页时，标签页的位置不会发生变化。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQWidgets jqxTabs reorder属性 - Python技术站
微信扫一扫 
支付宝扫一扫 