1

这是我的 JSFiddle 的链接

目前,您可以移动滑块,文本输入将从 0 变为 100。

问题:我想在文本框前添加一个“$”,在文本框后添加一个“k”——即 20 显示为 $20k,而 50 显示为 $50k

最好,我想使用 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"
    });
});
4

1 回答 1

4

活生生的例子: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/

于 2013-07-04T15:39:55.237 回答