微信公众号：程序yuan
关注可获得更多资源。问题或建议，请公众号留言;
查看--> 全套EasyUI示例目录
25.NumberSpinner数字微调组件
属性列表，事件列表，方法列表全部集成Spinner微调组件
JSP文件
<%--
Created by IntelliJ IDEA.
User: ooyhao
Date: 2018/7/29 0029
Time: 9:21
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Datebox</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/color.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/NumberSpinner.js"></script>
<style rel="stylesheet" type="text/css">
</style>
<script>
</script>
</head>
<body style="padding: 100px;">
<%--class加载方式--%>
<%--<input id="box" value="2" class="easyui-numberspinner">--%>
<input id="box">
</body>
</html>
JS文件
$(function () {
$("#box").numberspinner({
width:300,
height:30,
required:true,
min:1,
max:10,
value:2,
//增量
increment:1,
//是否可编辑
// editable:false,
//设置是否禁用
// disabled:true,
spin:function () {
// alert("spin");
},
onSpinUp:function () {
// alert("SpinUp");
},
onSpinDown:function () {
// alert("SpinDown");
}
});
$(document).click(function () {
// alert($('#box').numberspinner('getValue'));
$('#box').numberspinner('setValue',9);
});
});
效果图
------------------------------------------------
关注小编微信公众号获取更多资源
