jQuery Mobile Rangeslider达到最大值时加+号

Ben

我想知道如何在选择/命中最大值时向Jquery Mobile范围滑块添加一个加号(+)更高的值。对于例如在价格顶部范围内,它有一个+选择最大值时。

我尝试更改<input type="range" name="range-1b" id="range-1b" min="400" max="2000+" value="1500" step="50">它不起作用的最大值,也尝试使用脚本来更改它,但是它也不起作用。不知道是否有可能这样做。

  <script>
  $(document).on('pageshow',function(){
    var value = document.getElementById("range-1b").value;
    if(value =2000){
     document.getElementById("range-1b").value="2000+";
    }
  });
  </script>
赞克

当jQM增强Rangeslider时,输入将设置为type =“ number”。此类型仅接受数字,因此不能将文本“ 100+”设置为输入值。

一种解决方法是将'+'放在100旁边:

在rangeslider标记中,添加<span>带有labelPlus类的:

<div data-role="rangeslider">
    <label for="range-1a">Rangeslider:</label>
    <input type="range" name="range-1a" id="range-1a" min="0" max="100" value="40" />
    <label for="range-1b">Rangeslider:</label>
    <input type="range" name="range-1b" id="range-1b" min="0" max="100" value="80" />
    <span class="labelPlus">+</span>
</div>

使用labelPlus类CSS最初隐藏跨度并将其绝对定位在正确的位置:

.labelPlus{
    display: none;
    position: absolute;
    right: 0px;
    font-size: 14px;
    font-weight: bold;
    text-align: right;
    width: 12px;
    line-height: 30px;
    margin-right: 18px;
    margin-top: 0px;
}

在javascript中,处理高输入时的change事件,并检查我们是否在100。如果是,则显示加号跨度,否则将其隐藏:

$("#range-1b").on("change", function(){
    var val = $(this).val();
    if (parseInt(val) >= 100) {
        $(".labelPlus").show(); 
    } else {
        $(".labelPlus").hide();
    }
});    

演示

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章