我想知道如何在选择/命中最大值时向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] 删除。
我来说两句