Question

目前，您可以移动滑块，文本输入将从0更改为100。

问题：我想在文本框前添加'$'，在文本框后添加'k' - 即20显示为$ 20k，50显示为$ 50 ķ

最好，我想使用CSS附加'$'和'k'，因此该值不受影响。

到目前为止我所拥有的内容（如上面的jsfiddle链接所示）：

HTML：

<div id="container">
<input id="min" type="text" class="sliderValue" data-index="0" value="1" />
<div id="slider"></div>
</div>

CS：

#container {
width:200px;
margin:40px;}

#min, #max {
width: 50px;
height:40px;
border: none;
text-align: center;
font: normal 24px verdana;}

JS：

$(document).ready(function () {
$("#slider").slider({
    range: false,
    min: 0,
    max: 100,
    step: 1,
    values: [1],
    slide: function (event, ui) {
        for (var i = 0; i < ui.values.length; ++i) {
            $("input.sliderValue[data-index=" + i + "]").val(ui.values[i]);
        };
        var delay = function () {
            var handleIndex = $(ui.handle).data('index.uiSliderHandle');
            var label = handleIndex == 0 ? '#min' : '#max';
            $(label).html(ui.value).position({
                my: 'center top',
                at: 'center bottom',
                of: ui.handle,
                offset: "0, -74"
            });
        };
        setTimeout(delay, 0);
    }
});
$("input.sliderValue").change(function () {
    var $this = $(this);
    $("#slider").slider("values", $this.data("index"), $this.val());
    var handle = $(this).attr('id') == 'min' ? 0 : 1;
    $(this).position({
        my: 'center top',
        at: 'center bottom',
        of: $('a.ui-slider-handle:eq(' + handle + ')'),
        offset: "0, -54"
    });
});
$('#min').html($('#slider').slider('values', 0)).position({
    my: 'center top',
    at: 'center bottom',
    of: $('#slider a:eq(0)'),
    offset: "0, -54"
});
$('#max').html($('#slider').slider('values', 1)).position({
    my: 'center top',
    at: 'center bottom',
    of: $('#slider a:eq(1)'),
    offset: "0, -54"
    });
});

Answer 1

活生生的例子：http://jsfiddle.net/qaU7K/92/

首先将其添加到默认值中：

<input id="min" type="text" class="sliderValue" data-index="0" value="$1k" />

然后改变这一行：

 $("input.sliderValue[data-index=" + i + "]").val(ui.values[i]);

为此：

$("input.sliderValue[data-index=" + i + "]").val("$" + ui.values[i] + "k");

让div更长一点width：

#min, #max {
    width: 76px;  /*modified*/
    height:40px;
    border: none;
    text-align: center;
    font: normal 24px verdana;
}

活生生的例子：http://jsfiddle.net/qaU7K/92/

如何在文本框之前附加美元符号，在文本框之后使用CSS附加“k”

1 个答案: