【JQuery UI】微调按钮插件——spinner

最新推荐文章于 2023-07-30 18:06:24 发布

badlyForPapers

最新推荐文章于 2023-07-30 18:06:24 发布

阅读量3.3k

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/happyhaojie/article/details/51089870

版权

jQuery 专栏收录该内容

73 篇文章 0 订阅

订阅专栏

微调按钮插件不仅能在文本框中直接输入数值，还可以通过点击输入框右侧的上下按钮修改输入框的值，还支持键盘的上下方向键改变输入值，调用格式如下：

$(selector).spinner({options});

selector参数为文本输入框元素，可选项options参数为spinner()方法的配置对象，在该对象中，可以设置输入的最大、最小值，获取改变值和设置对应事件。

例子：将输入文本框与微调插件相绑定，并调用插件的spinner()方法，动态改变<div>元素显示的背景色。

    <body>
        <div id="divtest">
            <div class="title">
                选择颜色值</div>
            <div class="content">
                <span id="spnColor" class="input fl">
                    <input value=0 />
                </span>
                <span id="spnPrev" class="prev fr"></span>
            </div>
        </div>
         
        <script type="text/javascript">
            $(function () {
                //定义变量
                var intR = 0, intG = 0, intB = 0, strColor;
                $("input").spinner({
                    //初始化插件
                    max: 10,
                    min: 0,
                    //设置微调按钮递增/递减事件
                    spin: function (event, ui) {
                        if (ui.value == 8)
                            spnPrev.style.backgroundColor = "red";
                        else
                            spnPrev.style.backgroundColor = "green";
                    },
                    //设置微调按钮值改变事件
                    change: function (event, ui) {
                        var intTmp = $(this).spinner("value");
                        if (intTmp < 0) $(this).spinner("value", 0);
                        if (intTmp > 10) $(this).spinner("value", 10);
                        if (intTmp == 8)
                            spnPrev.style.backgroundColor = "red";
                        else
                            spnPrev.style.backgroundColor = "green";
                    }
                });
            });
        </script>
    </body>

说明：

1） spin: function (event, ui) {}是按微调按钮触发的事件。

2） change: function (event, ui) {}是直接在输入框输入数字或者微调按钮增减数字后，再在框外点击空白（这一步很重要！）后立即触发的事件。

3）初始化max、min只对spin触发的事件有用，对change事件无用，所以需要在change事件触发函数中加：

if (intTmp < 0) $(this).spinner("value", 0);
if (intTmp > 10) $(this).spinner("value", 10);

4）event表示事件对象，ui表示触发此事件的控件。可是在spin和change中确实完全不一样的，仔细看看：

spin: function (event, ui) {
                        if (ui.value == 8)
                            spnPrev.style.backgroundColor = "red";
                        else
                            spnPrev.style.backgroundColor = "green";
                    }

和

change: function (event, ui) {
                        var intTmp = $(this).spinner("value");
              
                        if (ui.value < 0) $(this).spinner("value", 0);
                        if (intTmp > 10) $(this).spinner("value", 10);
                        if (intTmp == 8)
                            spnPrev.style.backgroundColor = "red";
                        else
                            spnPrev.style.backgroundColor = "green";
                    }

强烈注意：在spin中是通过ui.value来获取输入框的值，但这在change中行不通！

在change中是通过$(this).spinner('value')来获取输入框的值的，而且是通过$(this).spinner('value',0)来设置输入框的值！这是为什么呢？不知道，请高手帮我解答！

badlyForPapers

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【JQuery UI】微调按钮插件——spinner

微调按钮插件不仅能在文本框中直接输入数值，还可以通过点击输入框右侧的上下按钮修改输入框的值，还支持键盘的上下方向键改变输入值，调用格式如下：$(selector).spinner({options});selector参数为文本输入框元素，可选项options参数为spinner()方法的配置对象，在该对象中，可以设置输入的最大、最小值，获取改变值和设置对应事件。例
复制链接

扫一扫