语义 UI 数字上下控制

Question

是否有任何带有最小值、最大值和步数选项的语义UI数字上下控制？

Answer 1

没有找到这样的控件所以我做了这个代码：

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.

Answer 2

我们可以使用 type as 'number' 来获得所需的 increment/decrement 控件。

<Input type="number"  />

语义 UI 数字上下控制

Semantic UI Numeric Up Down control

numericupdown

spinner

semantic-ui