微信公众号:程序yuan
关注可获得更多资源。问题或建议,请公众号留言;
查看--> 全套EasyUI示例目录
24.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/Spinner.js"></script>
<style rel="stylesheet" type="text/css">
</style>
<script>
</script>
</head>
<body style="padding: 100px;">
<%--不支持class加载方式--%>
<input id="box" value="2">
</body>
</html>
JS文件
$(function () {
$("#box").spinner({
width:200,
height:30,
required:true,
value:2,
min:1,
max:10,
increment:2,
//是否可以编辑
// editable:false,
//是否禁用
// disabled:true,
spin:function (down) {
//点击按钮会调用函数,但是该组件点击微调数字不起作用
// alert("spin");
},
onSpinUp:function () {
// alert("UP");
$("#box").spinner('setValue',parseInt($("#box").spinner('getValue'))+1);
},
onSpinDown:function () {
// alert("DOWN");
$("#box").spinner('setValue',parseInt($("#box").spinner('getValue'))-1);
}
});
// 方法有 options,
// destroy,resize,销毁,重置大小
// enable,disable,禁用启用
// getValue,setValue,获取值,设置值
// clear,reset.清空值,重置值
$(document).click(function () {
// $("#box").spinner('resize',300);
// alert($("#box").spinner('getValue'));
// $("#box").spinner('setValue',300);
});
});
效果图
------------------------------------------------
关注小编微信公众号获取更多资源
标签:function,box,setValue,EasyUI,getValue,Spinner,spinner,组件,alert From: https://blog.51cto.com/u_12131813/6002836