小巧實用的數字加減插件（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);