极客教程EasyUI jQuery spinner Widget
EasyUI是一个HTML5框架，用于使用基于jQuery、React、Angular和Vue技术的用户界面组件。它有助于为交互式网络和移动应用程序构建功能，为开发者节省大量时间。
在这篇文章中，我们将学习如何使用jQuery EasyUI设计一个旋转器。旋转器部件结合了一个可编辑的文本框和两个小按钮，让用户从一系列的值中选择。
EasyUI for jQuery的下载：
https://www.jeasyui.com/download/index.php
语法:
<input class="easyui-spinner">
**属性: **
- width : 该组件的宽度。
- height : 该组件的高度。
- value : 初始化值。
- min : 允许的最小值。
- max :最大的允许值。
- increment : 点击旋钮时的增量值。
- editable : 定义用户是否可以直接在字段中输入数值。
- disabled : 定义是否禁用该字段。
- readonly : 定义该组件是否为只读。
- spinAlign :定义了旋转按钮的排列。
事件:
- onSpinUp。当用户点击向上旋转的按钮时启动。
- onSpinDown：当用户点击向下旋转的按钮时发生火灾。
方法:
- options :返回选项对象。
- destroy : 销毁旋转器组件。
- resize : 重置组件的宽度。
- enable : 启用该组件。
- disable : 禁用该组件。
- getValue : 获取组件的值。
- readonly : 启用/禁用只读模式。
- setValue : 设置组件的值。
- clear : 清除组件的值。
- reset : 重置组件值。
步骤:
- 首先，添加你的项目所需的jQuery Easy UI脚本。
<script type=”text/javascript” src=”jquery.min.js”>
</script>
<!–jQuery libraries of EasyUI –>
<script type=”text/javascript”
src=”jquery.easyui.min.js”>
</script>
<!–jQuery library of EasyUI Mobile –>
<script type=”text/javascript”
src=”jquery.easyui.mobile.js”>
</script>
示例:
<!Doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,
maximum-scale=1.0, user-scalable=no">
<!-- EasyUI specific stylesheets-->
<link rel="stylesheet" type="text/css"
href="themes/metro/easyui.css">
<link rel="stylesheet" type="text/css"
href="themes/mobile.css">
<link rel="stylesheet" type="text/css"
href="themes/icon.css">
<!--jQuery library -->
<script type="text/javascript" src="jquery.min.js">
</script>
<!--jQuery libraries of EasyUI -->
<script type="text/javascript"
src="jquery.easyui.min.js">
</script>
<!--jQuery library of EasyUI Mobile -->
<script type="text/javascript"
src="jquery.easyui.mobile.js">
</script>
<script type="text/javascript">
(document).ready(function (){
('#gfg').spinner({
required:true
});
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>EasyUI jQuery spinner widget</h3>
<input id="gfg" class="easyui-spinner">
</body>
</html>
输出:
