1

ここに私のJSFiddleへのリンクがあります

現在、スライダーバーを動かすことができ、テキスト入力は 0 から 100 まで変化します。

質問:テキスト ボックスの前に '$' を追加し、テキスト ボックスの後に 'k' を追加したいです。つまり、20 は 20,000 ドル、50 は 50,000 ドルと表示されます。

できれば、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 に答える