【EasyUI篇】NumberSpinner数字微调组件-CFANZ编程社区

【EasyUI篇】NumberSpinner数字微调组件

查看--> 全套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);
    });


});