小巧实用的数字加减插件（jquery插件）

2024-04-27 15:01:50

字体：大中小

来源：转载

供稿：网友

自己的第一个jquery插件，规模虽然不大，但是小成就满满，对jquery又有了更进一步的认识。

简单实用的数字加减插件，实现通过加减按钮对文本框内的数字进行增减操作。

效果图：

参数：

默认值、最大值、最小值、增减度。

可单独对每个input设置参数，也可以对所有input统一设置。参考代码在下方：

使用方法：

1.引用CSS、js文件（记得引用jquery.min.js）

2.前台:

　　2.1无参数

<input type="text" class="numberText" /><script type="text/javascript">    $(".numberText").spinner();</script>

　　2.2整体参数

<input type="text" class="numberText"/><script type="text/Javascript">    $(".numberText").spinner({         value: 1,         min: 0,         max: 15,         step: 1    });</script>

　　2.3逐个设置参数

<input type="text" class="numberText" value="11" data-step="1" data-min="0" data-max="10" /><input type="text" class="numberText" value="11" data-step="1" data-min="0"/><input type="text" class="numberText" /><script type="text/javascript">    $(".numberText").spinner({         value: 5,         min: -2,         max: 15,         step: 2    });</script>

3.CSS

span.spin-text {    display: inline-block;    overflow: hidden;    border:1px solid silver;}    span.spin-text .spin-val {        border: 1px solid silver;        border-top:none;        border-bottom:none;        vertical-align: middle;        width: 30px;        height:18px;        text-align: center;    }    span.spin-text a {        display: inline-block;        width: 20px;        height: 20px;        line-height: 20px;        border: none;        text-align: center;        vertical-align: middle;        text-decoration: none;        background: #fff;        font-family:宋体;        font-weight:bold;        font-size:14px;    }        span.spin-text a:hover {            background:#f3f3f3;        }

4.JS

/*    jQuery加减数字插件    作者：metro-liang    时间：2015-10-16    版本：v1.0*//*  参数：value:默认值        min:允许的最小值            max:允许的最大值          step:增减度*/; (function ($) {    $.fn.extend({        spinner: function (options) {            return this.each(function () {                var defaults = {                    value: 1,                    min: 1,                    max: 100,                    step: 1                };                var _this = $(this);                var opts = $.extend(defaults, options);                opts.step = _this.data("step") != null ? _this.data("step") : opts.step;                opts.min = _this.data("min")!=null? _this.data("min"):opts.min;                opts.max = _this.data("max") != null ? _this.data("max") : opts.max;                                opts.value = _this.val() != "" ? _this.val() : opts.value;                if (opts.value > opts.max || opts.value < opts.min) {                    opts.value = opts.max;                }                var container = $('<span></span>').addClass('spin-text');                var textField = _this.addClass('spin-val').val(opts.value).css("ime-mode","Disabled").keyPRess(function () {                    return (/[/d]/.test(String.fromCharCode(event.keyCode)));                }).bind("copy cut paste",function(e){                    return false;                });                var decreaseBtn = $('<a href="javascript:void(0)">-</a>').click(function () { changeValue(-1) });                var increaseBtn = $('<a href="javascript:void(0)">+</a>').click(function () { changeValue(1) });                textField.before(decreaseBtn).after(increaseBtn);                textField.add(increaseBtn).add(decreaseBtn).wrapAll(container);                function changeValue(d) {                    var value = parseInt(textField.val());                    if (isNaN(value))                    {                        value = opts.min;                    }                    var _val = value + d * opts.step;                                       if (_val <= opts.max && _val >= opts.min) {                        value = _val;                    }                    textField.val(value);                }            });        }    });})(jQuery);