Question

我正在使用updown number plugin 现在我想在init对象之后更改min和max。

我希望用户可以选择它们，这个对象必须改变但不能正常工作

请帮助我，

对不起我的弱小英语

这是我的代码：

＆＃13;

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://nakupanda.github.io/number-updown/assets/number-updown/js/updown.js"></script>
<script src="http://nakupanda.github.io/number-updown/assets/prettify/run_prettify.js"></script>
<script src="http://nakupanda.github.io/number-updown/assets/bootstrap/js/bootstrap.min.js"></script>
<link href="http://nakupanda.github.io/number-updown/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>

<meta charset="utf-8" />
<title>jQuery number-updown plugin examples</title>
<style>
    .demo-input {
        width: 200px;
    }
</style>
</head>
<body style="padding-bottom: 100px;">
<div class="container">
    <button id="new-min-max">new min/max</button>
    <h3>Controlled by buttons</h3>

    <div class="demo">
        <div style="display: inline-block"><input type="text" class="form-control demo-input" id="controlledByButtons" value="0" /></div>
        <div style="display: inline-block">
            <button class="btn btn-default" id="btnIncrease">+</button>
            <button class="btn btn-default" id="btnDecrease">-</button>
        </div>
    </div>
</div>

<script type="text/javascript">
var $controlledByButtons = $('#controlledByButtons');
        $controlledByButtons.updown({
            step: 10,
            shiftStep: 100
        });
        var $updown = $controlledByButtons.data('updown');
        $('#btnIncrease').click(function(event){
            $updown.increase(event);
            $updown.triggerEvents();
        });
        $('#btnDecrease').click(function(event){
            $updown.decrease(event);
            $updown.triggerEvents();
        });
        $("#new-min-max").click(function(){
        //what comes here to change min and max again????
        });
</script>
</body>
</html>

＆＃13;

Answer 1

哈密我在updown.js代码中做了一些小改动，如果按照我的说明操作，你可以在我显示的defaultStep属性中设置步骤新值。首先复制并添加我给你的updown插件代码，并将其添加到head部分脚本而不是cdn中。 updown.js：

/* ================================================
 * Increase/decrease number for Input field by using arrow up/down keys.
 * 
 * Useful when it's not possible to use HTML5's Number.
 * 
 * No modern version of jQuery UI is required.
 * 
 * Licensed under The MIT License.
 * ================================================ */

!function($) {
    "use strict";
    
    var Updown = function($element, options) {
        this.defaultOptions = {
            step: 1,
            shiftStep: 6,
            circle: false,
            min: null,
            max: null
        };
        this.init($element, options);
    };

    Updown.prototype = {
        constructor: Updown,
        init: function($element, options) {
            this.$element = $element;            
            this.options = $.extend(true, this.defaultOptions, options);
            //console.log(this);
            this.watchKeyboard();
            this.watchMouse();
            
            return this;
        },
        watchKeyboard: function() {
            var self = this;
            this.$element.bind('keydown', function(event) {
                var code = (event.keyCode ? event.keyCode : event.which);
                if (self.keysMap[code] && !isNaN(self.getInputVal())) {
                    self.keysMap[code].call(self, event);
                    event.preventDefault();
                }
            });

            return this;
        },
        watchMouse: function() {
            var self = this;
            this.$element.bind('mousewheel DOMMouseScroll', function(event) {
                var e = window.event || event; // old IE support
                var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail || -e.originalEvent.detail)));
                if (delta < 0) {
                    self.keysMap[40].call(self, event);
                } else {
                    self.keysMap[38].call(self, event);
                }
                event.preventDefault();
            });

            return this;
        },
        keysMap: {
            38: function(event) {
                this.increase(event);
                this.triggerEvents();

                return this;
            },
            40: function(event) {
                this.decrease(event);
                this.triggerEvents();

                return this;
            }
        },
        getNumberVal: function(val) {
            if (!val) {
                return 0;
            }

            return Number(val);
        },
        getInputVal: function() {
            return this.getNumberVal(this.$element.val());
        },
        setInputVal: function(val) {
            this.$element.val(val);

            return this;
        },
        increase: function(event) {
            var step = event.shiftKey ? this.options.shiftStep : this.options.step;
            var val = this.getInputVal() + step;
            if (this.options.max !== null && val > this.options.max) {
                val = this.options.circle ? this.options.min : this.options.max;
            }
            this.setInputVal(val);

            return this;
        },
        decrease: function(event) {
            var step = event.shiftKey ? this.options.shiftStep : this.options.step;
            var val = this.getInputVal() - step;
            if (this.options.min !== null && val < this.options.min) {
                val = this.options.circle ? this.options.max : this.options.min;
            }
            this.setInputVal(val);

            return this;
        },
        triggerEvents: function() {
            this.$element.trigger('keyup');

            return this;
        }
    };

    $.fn.updown = function(options) {
        return this.each(function(index) {
            var $this = $(this);
            debugger;
            var data = $this.data('updown');
            if (!data) {
                $this.data('updown', new Updown($(this), options));
            }else{                
                data.options.step=options.defaultStep;
            }            
        });
    };
    
}(window.jQuery);

然后如您所见运行页面。唯一的区别是，在click $（“＃new-min-max”）元素中，您必须使用所需的新值步进器设置新的属性名称defaultStep（在示例中为var a）：

var $controlledByButtons = $('#controlledByButtons');
    
        $controlledByButtons.updown({
            step: 10,
            shiftStep: 100
        });
        var $updown = $controlledByButtons.data('updown');
        $('#btnIncrease').click(function(event){
            $updown.increase(event);
            $updown.triggerEvents();
        });
        $('#btnDecrease').click(function(event){
            $updown.decrease(event);
            $updown.triggerEvents();
        });
       
       
    
        $("#new-min-max").click(function(){
//Here yoy can set your new steper value;            
           var a=50;           
           $controlledByButtons.updown({
            defaultStep:a
        });
           
           
        });

.demo-input {
        width: 200px;
    }

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/updown.js"></script>
<script src="http://nakupanda.github.io/number-updown/assets/prettify/run_prettify.js"></script>
<script src="http://nakupanda.github.io/number-updown/assets/bootstrap/js/bootstrap.min.js"></script>
<link href="http://nakupanda.github.io/number-updown/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>

<meta charset="utf-8" />
<title>jQuery number-updown plugin examples</title>

</head>
<body style="padding-bottom: 100px;">
<div class="container">
    <button id="new-min-max" >new min/max</button>
    <h3>Controlled by buttons</h3>

    <div class="demo">
        <div style="display: inline-block"><input type="text" class="form-control demo-input" id="controlledByButtons" value="0" /></div>
        <div style="display: inline-block">
            <button class="btn btn-default" id="btnIncrease">+</button>
            <button class="btn btn-default" id="btnDecrease">-</button>
        </div>
    </div>
</div>
</body>
</html>

在文档就绪

1 个答案: