我正在做一个项目，我是否使用了 mobiscroll 数字键盘。
它适用于默认预设。
可以制作我自己的预设吗？
例如:我想为输入的数字设置千位分隔符，但这应该只是可视化的，并且设置的值应该没有这些分隔符。
我研究了自定义预设并发现了这个
one 。
所以我尝试了它，使用自定义小键盘预设。
对于我的第一次尝试，我想要像 Mobiscroll 演示示例中的预设行为:Demo
他们使用“可变分数”，但我想定义一个预设，所以我每次使用这种数字键盘时都不需要编写“parseValue:.....”-Code。
这是我使用的代码(不起作用):
我想我做错了什么。
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>
我的最后一个问题，我是在正确的方式还是有另一种(更好的)方法来做到这一点？
添加:
对不起，我的英语不好。
最佳答案
我想出了如何制作自己的预设。
我使用十进制预设代码作为基础并对其进行了一些更改。
例子:
这是一个预设，您可以在其中输入百分比数字。
你不能输入超过 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/