Question

我在MVC3中有一个简单的视图，有三个类型编号的输入。我需要做的是显示一个JQueryUI滑块而不是输入。我试过这样，但它只改变输入形式的形状，没有滑块。

代码：

<script>
        $(function () {
            $(".nmbr").slider({
                range: "min",
                min: 1,
                max: 100,
                slide: function (event, ui) {
                    $("input[name=" + $(this).attr("id") + "_value]").val(ui.value);
                }
            });
        });
</script>

和html：

<div>
<label for="number">Value:</label>
<input type="text" name="first_value" style="border:0;" />
<input type="number" class="nmbr" id="first" />
<br />
<br />

<label for="number">Value:</label>
<input type="text" name="second_value" style="border:0;" />
<input type="number" class="nmbr" id="second" />
<br />
<br />

<label for="number">Value:</label>
<input type="text" name="third_value" style="border:0;" />
<input type="number" class="nmbr" id="third" />
<br />
<br />

我从哪里走了？

Answer 1

jQuery UI's Slider使用div而非input （容易犯错）。

进行以下更改：

JAVASCRIPT：

$(function () {
    $(".nmbr").slider({
        range: "min",
        min: 1,
        max: 100,
        slide: function (event, ui) {
            $("input[name=" + $(this).attr("id") + "_value]").val(ui.value);
        }
    });
});

HTML：

<label for="number">Value:</label>
<input type="text" name="first_value" style="border:0;" />
<div class="nmbr" id="first"></div>
<br />
<br />

<label for="number">Value:</label>
<input type="text" name="second_value" style="border:0;" />
<div class="nmbr" class="nmbr" id="second"></div>
<br />
<br />

<label for="number">Value:</label>
<input type="text" name="third_value" style="border:0;" />
<div class="nmbr" class="nmbr" id="third"></div>
<br />
<br />

样本： http://jsfiddle.net/dirtyd77/qN59g/5/

JQueryUI滑块而不是数字输入类型

1 个答案: