我正在使用 Jquerymobile。我有一个滑块和一个与之对应的文本框。当我们根据我们定义的范围移动滑块时,默认功能会在文本字段中显示。但我想显示文本而不是数字。这更像是严重性问题。即:当滑块值达到 30 时,它应该在文本框中显示“更少服务器”,当它达到 50 时,文本应该变为“更多服务器”。
问问题
252 次
2 回答
2
@Jeemusu 的解决方案在所有情况下都不适用于我......因此我使用以下信息对其进行了修改:
<script>
$(document).bind('pageinit', function () {
//depending on the device we have a touch or a mouse event
var supportTouch = jQuery.support.touch,
touchStartEvent = supportTouch ? "touchstart" : "mousedown",
touchStopEvent = supportTouch ? "touchend" : "mouseup",
touchMoveEvent = supportTouch ? "touchmove" : "mousemove";
//the event is bound to the .ui-slider inside of the input type range
$('#slider-a').siblings('.ui-slider').bind(touchStopEvent,function(){
var sliderVal = $("#slider-a").attr('value');
if(sliderVal <= 30) {
$('#slider-phrase').html('normal');
} else if(sliderVal >= 30 && sliderVal < 50) {
$('#slider-phrase').html('less severe');
} else if(sliderVal >= 50) {
$('#slider-phrase').html('more severe');
}
});
});
</script>
在此处查看工作示例
于 2012-11-20T21:45:26.127 回答
1
您所要做的就是寻找由 jQuery Mobile 创建的锚点(用于滑块),然后将点击事件绑定到它。在点击事件中,您可以使用条件语句检查值并将它们输出到页面,如下所示:
$(document).ready(function() {
var sliderAnchor = $("#slider-a").closest('div').children('div').children('a');
sliderAnchor.bind('tap',function(e){
var sliderVal = $("#slider-a").attr('value');
if(sliderVal <= 30) {
$('#slider-phrase').html('normal');
} else if(sliderVal >= 30 && sliderVal < 50) {
$('#slider-phrase').html('less severe');
} else if(sliderVal >= 50) {
$('#slider-phrase').html('more severe');
}
});
});
一个工作示例:http: //jsbin.com/igugac/1/
于 2012-11-20T09:54:06.313 回答