All geek questions in one place

Mobiscroll Numpad Custom Preset

im working on a project, I used mobiscroll input panel. It works great with default presets.

Can I create my own presets?

For example: I want to have a thousands separator for typed numbers, but this should only be visual, and the set value should be without these separators.

I researched user presets and found this one .

So, I tried this, with custom setting of numpad. For my first attempt, I wanted the behavior of the presets, as in the demo Mobiscroll: Demo

They use a "variable fraction", but I want to define a preset, so I don’t have to write "parseValue: ....." - Code every time I use this type of numpad.

This is the code I used (didn't work): I think I did something wrong.

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>

My last question is, am I right, or are there other (better) ways to do this?

Addition: Sorry for my poor English.

+4
source share
1 answer

I figured out how to make my own preset. I used the decimal preset code as a base and changed it a bit.

Example: This is a preset in which you can enter numbers as a percentage. You cannot dial more than 100%. I did this by turning off the numbers.

    $(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'],
});
    });
+2
source

Source: https://habr.com/ru/post/1588982/

More articles:


All Articles