Question

我想知道是否有人知道如何修改jQuery Mobile Slider来显示金额？或者至少在任何时候都显示2个小数点。即如果用户选择10，我希望它显示10.00而不是10.使用我当前的HTML，如果用户选择10，它只是舍入到10而没有任何小数点。

我尝试使用以下代码时使用和不使用美元符号前缀，每次更改滑块位置时，只需将滑块重置为最小值8.15。

我开始认为我正在寻找的东西无法完成，但我很好奇是否有人知道该怎么做....

的jQuery

    $(function() {
        $('#mySlider').on( 'slidestop', function( event ) {
            var amt = parseFloat($('#mySlider').value);
            $('#mySlider').val('$' + amt.toFixed(2));
            $('#mySlider').slider('refresh');
        });
    });

HTML

<input type='range' name='mySlider' id='mySlider' min='8.15' max='16.00' value='<?php echo $startWage; ?>' data-popup-enabled='true' step='0.05'>

Answer 1

执行此操作的一种方法是隐藏输入并在其位置使用您自己的文本框。

我已将滑块标记放在指定的容器中，并向容器中添加了一个输入，该输入将显示美元金额：

<div id="theDollars" class="dollar-slider">
    <label for="mySlider">Dollars:</label>
    <input type="range" name="mySlider" id="mySlider" data-highlight="true" min="8.15" max="16" value="10" data-popup-enabled='true' step='0.05' />
    <input type="text" data-role="none" class="dollarLabel ui-shadow-inset ui-body-inherit ui-corner-all ui-slider-input" value="$10.00" disabled />
</div>

在CSS中，我隐藏了现有的输入，然后将新输入放在旧输入的位置：

.dollar-slider input[type=number] {
    display: none; 
}
.dollar-slider .dollarLabel{
    position: relative;
    top: -38px;
    width: 50px;
}

然后在代码中处理滑块的更改事件，将值转换为所需的美元字符串（$ 10.00）：

$("#mySlider").on("change", function(){
    var dollars = '$' + parseFloat($(this).val()).toFixed(2);
    $("#theDollars .dollarLabel").val(dollars);
    $("#theDollars .ui-slider-popup").html(dollars);
    $("#theDollars .ui-slider-handle").prop("title", dollars);
});

<强> DEMO

jQuery Mobile Slider的金额

1 个答案: