Question

我正在研究一个项目，我是否使用了mobiscroll numpad。它可以使用默认预设。

是否可以制作我自己的预设？

例如：我想为键入的数字设置一个千位分隔符，但这应该只是可视的，而设置的值应该没有这些分隔符。

我研究了自定义预设并找到了这个 one

所以我试着用自定义小键盘预设。对于我的第一次尝试，我想要像Mobiscroll演示示例中的预设行为：Demo

他们使用“变量分数”，但我想定义一个预设，所以我不需要写“parseValue：.....” - 每次使用这种小键盘的代码。

这是我使用的代码（不起作用）：我想我做错了。

JQuery的/使用Javascript

$(function(){

    $('#numpad').mobiscroll().numpad({
        theme: 'mobiscroll',
        display: 'modal',
        template: 'dddddddddddddd',
        placeholder: '',
        fill: 'ltr',
        allowLeadingZero: true,
        preset: 'mypreset',
        buttons: ['set','cancel','clear'],
        leftButton: {
            text: '.',
            value: '.'
        }
    });

    $.mobiscroll.presets.numpad.mypreset  = function(inst) {
        return {
            // Typically a preset defines the 'wheels', 'formatResult', and 'parseValue' settings

            parseValue: function (value) {
            if (value) {
                return value.toString().split('');
            }
            return [];
        },
        formatValue: function (value) {
            return value.join('');
        },

        validate: function (values) {
            var disabledButtons = [],
                invalid = false;

            if (!values.length || values.length >= 9 || values.indexOf('.') !== -1) {
                disabledButtons.push('.');
            }

            if (values.length == 1 && values[0] === 0) {
                for (var i = 1; i <= 9; i++) {
                    disabledButtons.push(i);
                }
            }

            if (!values.length || values[values.length - 1] == '.') {
                invalid = true;
            }

            return {
                invalid: invalid,
                disabled: disabledButtons
            };
        },
            // The preset may override any other core settings
            headerText: false
        }
    }
});

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

    <title>Mobiscroll</title>

    <!-- jQuery Include -->
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>


    <!-- Mobiscroll JS and CSS Includes -->
    <link href="css/mobiscroll.custom-2.15.1.min.css" rel="stylesheet" type="text/css" />
    <script src="js/mobiscroll.custom-2.15.1.min.js" type="text/javascript"></script>

    <style type="text/css">
        /* Demo Page styling, you can ignore this in your implementation */
        body { padding: 0; margin: 0; font-size: 16px; font-family: arial, verdana, sans-serif; }
        input, select { width: 100%; padding: .625em; margin: 0 0 .625em 0; border: 1px solid #aaa; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
        .header { padding: .625em; background: #5185a8;}
        .header h1 { margin: 0; padding: 0; color: #fff; text-align: center; font-size: 1.25em; font-weight: bold; text-shadow: 1px 1px 1px #000; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
        .content { padding: 1em; }
    </style>

    <script src="/js/test.js"></script>
</head>

<body>

        <!-- Decimal Numpad demo markup -->
        <div data-role="fieldcontain" class="demo-cont" id="demo_cont_numpad1">
            <label for="demo_numpad1">Try Decimal Numpad</label>
            <input type="text" id="numpad" />  
        </div>    
    </div>
</body>
</html>

我的最后一个问题，我是在正确的方式还是有其他（更好的）方法来做到这一点？

增加：抱歉我的英语不好。

Answer 1

我想出了如何制作自己的Preset。我使用十进制Preset-Code作为基础并稍微改了一下。

实施例：这是一个预设，您可以在其中键入百分比数字。你不能打字超过100％我通过禁用数字

来做到这一点

    $(function(){

        var ms = $.mobiscroll,
        presets = ms.presets.numpad,
        defaults = {
            min: 0,
            max: 100,
            scale: 2,
            prefix: '',
            suffix: '%',
            returnAffix: false,
            fill: 'rtl'
        };

        $.mobiscroll.presets.numpad.mypreset  = function(inst) { 

 function getNumber(value) {
            var i,
                ret = 0;

            while (value.length) {
                ret = ret * 10 + value.shift();
            }

            for (i = 0; i < s.scale; i++) {
                ret /= 10;
            }

            return ret;
        }

        var orig = $.extend({}, inst.settings),
            s = $.extend(inst.settings, defaults, orig);

        // Extended methods
        // ---

        inst.getVal = function (temp) {
            var val = inst._getVal(temp);
            return ms.util.isNumeric(val) ? +val : val;
        };

        // ---

        return {
            template: s.prefix.replace(/d/g, '\\d') + Array((Math.floor(s.max) + '').length + 1).join('d') + s.suffix.replace(/d/g, '\\d'),
            parseValue: function (value) {
                var i, m,
                    v = value || s.defaultValue,
                    ret = [];

                if (v) {
                    v = v + '';
                    m = v.match(/\d+\d*/g);
                    if (m) {
                        m = (+m[0]).toFixed(s.scale);
                        for (i = 0; i < m.length; i++) {
                            if (m[i] != '.') {
                                if (+m[i]) {
                                    ret.push(+m[i]);
                                } else if (ret.length) { // No leading 0s
                                    ret.push(0);
                                }
                            }
                        }
                    }
                }
                return ret;
            },
            formatValue: function (value) {
                var nr = getNumber(value).toFixed(s.scale);
                return s.returnAffix ? (s.prefix + nr + s.suffix) : nr;
            },
            validate: function (value) {
                var v = getNumber(value.slice(0)).toFixed(s.scale),
                    disabled = [];

                if(v>10){
                  var k;
                    for(k=0;k<10;k++)
                    {
                        disabled.push(k);
                    }
                }

                if(v==10){
                  var k;
                    for(k=1;k<10;k++)
                    {
                        disabled.push(k);
                    }
                }

                if (!value.length && !s.allowLeadingZero) {
                    disabled.push(0);
                }

                return {
                    disabled: disabled,
                    invalid: (+v > s.max || +v < s.min) || (s.invalid ? inst._indexOf(s.invalid, +v) != -1 : false)
                };
            }
        }; 
        }

        $('#numpad').mobiscroll().numpad({
            theme: 'mobiscroll',
            display: 'modal',
            placeholder: '0',
            fill: 'rtl',
            allowLeadingZero: false,
            min: 0,
            scale: 0,
            preset: 'mypreset',
            buttons: ['set','cancel','clear'],
});
    });

Mobiscroll Numpad自定义预设

1 个答案: