jQuery jQueryMobile：如何处理滑块事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4583083/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQueryMobile: how to work with slider events?
提问by balexandre
I'm testing the sliderevents in jQueryMobileand I must been missing something.
我正在jQueryMobile 中测试滑块事件，但我一定遗漏了一些东西。
page code is:
页面代码是：
<div data-role="fieldcontain">
<label for="slider">Input slider:</label>
<input type="range" name="slider" id="slider" value="0" min="0" max="100" />
</div>
and if I do:
如果我这样做：
$("#slider").data("events");
I get
我得到
blur, focus, keyup, remove
What I want to do is to get the value once user release the slider handle
我想要做的是在用户释放滑块手柄后获取该值
and having a hook to the keyup event as
并与 keyup 事件挂钩
$("#slider").bind("keyup", function() { alert('here'); } );
does absolutely nothing :(
什么都不做:(
I must say that I wrongly assumedthat jQueryMobile used jQueryUIcontrols as it was my first thought, but now working deep in the events I can see this is not the case, only in terms of CSS Design.
我必须说，我错误地认为jQueryMobile 使用了jQueryUI控件，因为这是我的第一个想法，但现在深入研究事件，我可以看到情况并非如此，仅在 CSS 设计方面。
What can I do?
我能做什么？
jQuery Mobile Slider source codecan be found on Gitif it helps anyone as well a test pagecan be found at JSBin
jQuery Mobile Slider源代码可以在Git上找到，如果它对任何人有帮助，也可以在JSBin上找到测试页面
As I understand, the #slideris the textbox with the value, so I would need to hook into the slider handle as the generated code for this slider is:
据我了解，这#slider是带有值的文本框，因此我需要挂钩滑块句柄，因为此滑块的生成代码是：
<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
<label for="slider" class="ui-input-text ui-slider" id="slider-label">Input slider:</label>
<input data-type="range" max="100" min="0" value="0" id="slider" name="slider" class="ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c ui-slider-input" />
<div role="application" class="ui-slider ui-btn-down-c ui-btn-corner-all">
<a class="ui-slider-handle ui-btn ui-btn-corner-all ui-shadow ui-btn-up-c" href="#" data-theme="c" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="54" aria-valuetext="54" title="54" aria-labelledby="slider-label" style="left: 54%;">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text"></span>
</span>
</a>
</div>
</div>
and checking the events in the handler anchor I get only the clickevent
并检查处理程序锚点中的click事件我只得到事件
$("#slider").next().find("a").data("events");
Fix
使固定
From Ivan answer, we just need:
根据伊万的回答，我们只需要：
<div data-role="fieldcontain">
<label for="slider">Input slider:</label>
<input type="range" name="slider" id="slider" value="0" min="0" max="100" />
</div>
and then
进而
$(document).bind("pagecreate", function(event, ui) {
$('#slider').siblings('.ui-slider').bind('tap', function(event, ui){ makeAjaxChange($(this).siblings('input')); });
$('#slider').siblings('.ui-slider a').bind('taphold', function(event, ui){ makeAjaxChange($(this).parent().siblings('input'));
});
function makeAjaxChange( elem ) {
alert(elem.val());
}
Thank youIvan for the heads up.
感谢您伊万的对决。
采纳答案by Ivan Hu?njak
My solution to your problem is to hookup handlers on tap and taphold events. Tap is hooked on div element of slider, while taphold is hooked on a element (slider control button).
我对您的问题的解决方案是在 tap 和 taphold 事件上连接处理程序。Tap 钩在滑块的 div 元素上，而 taphold 钩在一个元素上（滑块控制按钮）。
HTML markup of slider:
滑块的 HTML 标记：
<div class="ui-field-contain ui-body ui-br" data-role="fieldcontain" id="element-boravak3">
<label class="ui-input-text ui-slider" id="boravak3-label" for="boravak3">strop</label>
<input class="ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c ui-slider-input" name="boravak3" id="boravak3" value="0" min="0" max="100" data-type="range">
<!-- this is code that jQMobile generates -->
<div role="application" class="ui-slider ui-btn-down-c ui-btn-corner-all">
<a class="ui-slider-handle ui-btn ui-btn-up-c ui-btn-corner-all ui-shadow" href="#" data-theme="c" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-valuetext="0" title="0" aria-labelledby="boravak3-label" style="left: 0%;">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text"></span>
</span>
</a>
</div>
</div>
JS:
JS：
$('#' + id).slider();
$('#' + id).siblings('.ui-slider').bind('tap', function(){ makeAjaxChange($(this).siblings('input')); });
$('#' + id).siblings('.ui-slider a').bind('taphold', function(){ makeAjaxChange($(this).parent().siblings('input')); });
Function makesAjaxChange(elem) makes the update to the server. There is one other thing to note here, changing value in input field does not updates server so you have to bind function to change event of input element. Also you must pay attention that by doing this every slider control move will trigger input element change so you have to workaround that too.
函数makesAjaxChange(elem) 更新服务器。这里还有一件事要注意，更改输入字段中的值不会更新服务器，因此您必须绑定函数来更改输入元素的事件。此外，您还必须注意，通过执行此操作，每个滑块控件移动都会触发输入元素更改，因此您也必须解决该问题。
This is why jQuery Mobile is NOT jQuery UI for mobile devices. You dont have these things sorted out and must do them yourself.
这就是为什么 jQuery Mobile 不是用于移动设备的 jQuery UI。你没有整理这些东西，必须自己做。
I hope this helps.
我希望这有帮助。
EDIT: I forgot to explain why tap on div.ui-slider and taphold on a.ui-slider-handle. div.ui-handler tap is for click/tap event when user just clicks or taps a finger on slidebar. a.ui-slider-handle tabhold is after user was moving with mouse or finger left/right down the slidebar and released it.
编辑：我忘了解释为什么点击 div.ui-slider 并点击 a.ui-slider-handle。div.ui-handler tap 用于当用户在滑动条上点击或点击手指时的点击/点击事件。a.ui-slider-handle tabhold 是在用户用鼠标或手指向左/向右向下滑动滑块并释放它之后。
Ivan
伊万
回答by Cristianpark
Try this code:
试试这个代码：
$( "#slider-1").on('slidestop', function( event ) {
var slider_value=$("#slider-1").slider().val();
alert('Value: '+slider_value);
});
I hope this work for you
我希望这对你有用
回答by VTWoods
I found a much simpler solution to this problem. Using this code, you can retrofit start and stop events onto the slider.
我找到了一个更简单的解决方案来解决这个问题。使用此代码，您可以将开始和停止事件改装到滑块上。
$('.ui-slider').live('mousedown', function(){$('#'+id).trigger('start');});
$('.ui-slider').live('mouseup', function(){$('#'+id).trigger('stop');});
$('.ui-slider').live('touchstart', function(){$('#volumeSlider').trigger('start');});
$('.ui-slider').live('touchend', function(){$('#volumeSlider').trigger('stop');});
回答by Anssi Moilanen
I found out that there's some issues in using Ivan's solution. If you drag the slider, pause for a while (not lifting the mouse button) and keep on dragging the slider the taphold -event won't be triggered anymore.
我发现使用 Ivan 的解决方案存在一些问题。如果拖动滑块，请暂停一段时间（不要抬起鼠标按钮）并继续拖动滑块，taphold 事件将不再被触发。
By adding the vmouseup and mouseup events in to the slider div you get an improvement but the slider still fails to trigger the event if the mouse cursor is moved away from above the slider.
通过将 vmouseup 和 mouseup 事件添加到滑块 div 中，您会得到改进，但如果鼠标光标从滑块上方移开，滑块仍然无法触发事件。
回答by JonnyReeves
Based on @VTWood's solution; here's a generic 'fix' for all jQuery-Mobile 1.1 sliders so they dispatch startand stopevents at the appropriate times. You just need to drop this code into your page once to patch up all future sliders.
基于@VTWood 的解决方案；这是所有 jQuery-Mobile 1.1 滑块的通用“修复”，以便它们在适当的时间分派start和stop事件。您只需将此代码放入页面一次即可修补所有未来的滑块。
$(document).on({
"mousedown touchstart": function () {
$(this).siblings("input").trigger("start");
},
"mouseup touchend": function () {
$(this).siblings("input").trigger("stop");
}
}, ".ui-slider");
In a nutshell, it binds an event listener to the document object which listens for both mousedownand touchstartevents triggered from .ui-sliderelements. Once triggered the handler function will find the inputelement which sits alongside the .ui-slidercontrol that was clicked and trigger a startevent. You can consume this like so:
简而言之，它将事件侦听器绑定到文档对象，该对象侦听元素触发的事件mousedown和touchstart事件.ui-slider。一旦触发，处理函数将找到input位于.ui-slider被点击的控件旁边的元素并触发一个start事件。你可以这样消费：
$("#my-slider").on("start", function () {
console.log("User has started sliding my-slider!");
});
$("#my-slider").on("stop", function (event) {
var value = event.target.value;
console.log("User has finished sliding my slider, its value is: " + value);
});
回答by grigb
<input type="range" id="player-slider" value="25" min="0" max="100"/>
$( "#player-slider" ).bind( "change", function(event, ui) {
alert ("changed!");
});
回答by keyur ajmera
Best and easy way you can check below link. you will get code for all mobile devices.
您可以查看以下链接的最佳和简单方法。您将获得所有移动设备的代码。
http://trentrichardson.com/2011/11/11/jquery-ui-sliders-and-touch-accessibility/
http://trentrichardson.com/2011/11/11/jquery-ui-slider-and-touch-accessibility/
回答by Aldo Reyes
If you want to just catch the event when the slider is released (most probably to optimize ajax requests).
如果您只想在滑块释放时捕获事件（很可能是为了优化 ajax 请求）。
This worked for me:
这对我有用：
var slider = $('#my_slider');
//as the answer from @nskeskin you have to remove the type range from your input on the html code
slider.slider({create:function(){
//maybe this is too much hacking but until jquery provides a reference to this...
$(this).next().children('a').bind('vmouseup', yourOnChangeCallback);
}
});
Also this prevents that you add events when the control is not yet initialized (or created), so waiting for the create event is a bit more correct I think.
这也可以防止您在控件尚未初始化（或创建）时添加事件，因此我认为等待创建事件更正确。
回答by MrGorki
$('#slider').next().children('a').bind('taphold', function () {
$('#slider').live("change", function (event, ui) {
//do these.....
});
});
