个人中心
gpt4 book ai didi

javascript - Mobiscroll Numpad 自定义预设

转载 作者：塔克拉玛干 更新时间：2023-11-02 21:16:11 26 4
gpt4 key购买 nike

我正在做一个项目，当时我使用的是 mobiscroll 数字键盘。它适用于默认预设。

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

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

我研究了自定义预设并发现了这个 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>

我的最后一个问题，我的方法是否正确，还是有其他(更好的)方法可以做到这一点？

添加:抱歉我的英语不好。

最佳答案

我想出了如何制作自己的预设。我以十进制的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'],
});
    });

关于javascript - Mobiscroll Numpad 自定义预设，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30348788/

26 4 0
文章推荐： javascript - 将数据传递给 CKEditor 中的小部件
文章推荐： java - 在android中用 Dagger 注入(inject)适配器
文章推荐： android - java.lang.NoClassDefFoundError : com. acme.R$layout 引用 android 库
文章推荐： javascript - Angular google maps自定义图标仅在更新标记时有效
塔克拉玛干
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com