小巧實用的數字加減插件（jquery插件）

2015-12-04

近期項目需要，我將插件更新了，增加了兩個參數，一個參數控制文本框是否支持輸入，另一個參數則是新增了一個回調函數，返回文本框內的值。另外對代碼局部重構了，優化了一下封裝，需要的朋友請留言給我。

------------------------------------------------------------------------------------------------------

自己的第一個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);