【EasyUI篇】Spinner微调组件-CFANZ编程社区

【EasyUI篇】Spinner微调组件

查看--> 全套EasyUI示例目录

24.Spinner微调组件

【EasyUI篇】Spinner微调组件_Spinner

【EasyUI篇】Spinner微调组件_html_02

【EasyUI篇】Spinner微调组件_EasyUI_03

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);
    });
});