是否存在具有最小,最大和步数选项的语义UI数字向上控制?
答案 0 :(得分:2)
没有找到这样的控件,所以我制作了这段代码:
<强> HTML 强>
<div class="ui right labeled input">
<input type="text" id="txtNum" value="5">
<div class="ui mini vertical buttons">
<button class="ui icon button" command="Up"> <i class="up chevron icon"></i>
</button>
<button class="ui icon button" command="Down"> <i class="down chevron icon"></i>
</button>
</div>
</div>
<强> JS 强>
// Constants
var KEY_UP = 38,
KEY_DOWN = 40;
// Variables
var min = 0,
max = 30,
step = 1;
$('.ui.icon.button').click(function () {
var command = $(this).attr('command');
HandleUpDown(command);
});
$('#txtNum').keypress(function (e) {
var code = e.keyCode;
if (code != KEY_UP && code != KEY_DOWN) return;
var command = code == KEY_UP ? 'Up' : code == KEY_DOWN ? 'Down' : '';
HandleUpDown(command);
});
function HandleUpDown(command) {
var val = $('#txtNum').val().trim();
var num = val !== '' ? parseInt(val) : 0;
switch (command) {
case 'Up':
if (num < max) num += step;
break;
case 'Down':
if (num > min) num -= step;
break;
}
$('#txtNum').val(num);
}
这是DEMO。
答案 1 :(得分:1)
我们可以使用type作为“数字”来获得所需的增量/减量控制。
<Input type="number" />