jQueryMobile：如何处理滑块事件？

Question

我正在测试jQueryMobile 中的slider 事件，我一定遗漏了一些东西。

页面代码是：

<div data-role="fieldcontain">
    <label for="slider">Input slider:</label>
    <input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
</div>

如果我这样做：

$("#slider").data("events");

我明白了

blur, focus, keyup, remove

我想要做的是在用户释放滑块手柄后获取值

并与 keyup 事件挂钩

$("#slider").bind("keyup", function() { alert('here'); } );

什么都不做:(

我必须说我错误地假设 jQueryMobile 使用了jQueryUI 控件，因为这是我的第一个想法，但现在深入研究事件我可以看到情况并非如此，仅在条款CSS 设计。

我能做什么？

jQuery Mobile Slider source code 可以在Git 上找到，如果它对任何人都有帮助的话，测试页面可以在JSBin 上找到

---

据我了解，#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>

并检查处理程序锚中的事件，我只得到click 事件

$("#slider").next().find("a").data("events");

---

修复

从伊万的回答中，我们只需要：

<div data-role="fieldcontain">
    <label for="slider">Input slider:</label>
    <input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
</div>

然后

$(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()); 
}

谢谢您 Ivan 的提醒。

Answer 1

<input type="range" id="player-slider" value="25" min="0" max="100"/>

$( "#player-slider" ).bind( "change", function(event, ui) {
    alert ("changed!");
});

Answer 2

您可以查看以下链接的最佳简便方法。您将获得适用于所有移动设备的代码。

http://trentrichardson.com/2011/11/11/jquery-ui-sliders-and-touch-accessibility/

Answer 3

试试这个代码：

$( "#slider-1").on('slidestop', function( event ) {
   var slider_value=$("#slider-1").slider().val();
   alert('Value: '+slider_value);
});

我希望这对你有用

Answer 4

基于@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");

简而言之，它将事件侦听器绑定到文档对象，该对象侦听由.ui-slider 元素触发的mousedown 和touchstart 事件。一旦触发，处理函数将找到位于被单击的.ui-slider 控件旁边的input 元素并触发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);
});

Answer 5

 $('#slider').next().children('a').bind('taphold', function () {
        $('#slider').live("change", function (event, ui) {
          //do these.....
        });
    });

Answer 6

如果您只想在释放滑块时捕获事件（很可能是为了优化 ajax 请求）。

这对我有用：

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);
}
});

这还可以防止您在控件尚未初始化（或创建）时添加事件，因此我认为等待创建事件更正确。

Answer 7

我发现使用 Ivan 的解决方案存在一些问题。如果拖动滑块，请暂停一会儿（不要抬起鼠标按钮）并继续拖动滑块，不会再触发 taphold 事件。

通过将 vmouseup 和 mouseup 事件添加到滑块 div 中，您可以获得改进，但如果鼠标光标从滑块上方移开，滑块仍然无法触发事件。

Answer 8

我找到了一个更简单的解决方案来解决这个问题。使用此代码，您可以将开始和停止事件改装到滑块上。

$('.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');});

Answer 9

我对您的问题的解决方案是在点击和点击事件上连接处理程序。 tap 挂在滑块的 div 元素上，而 taphold 挂在一个元素（滑块控制按钮）上。

滑块的 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：

$('#' + 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')); });

函数makeAjaxChange(elem) 对服务器进行更新。 这里还有一件事要注意，更改输入字段中的值不会更新服务器，因此您必须绑定函数来更改输入元素的事件。此外，您必须注意，这样做的每个滑块控件移动都会触发输入元素更改，因此您也必须解决这个问题。

这就是为什么 jQuery Mobile 不是用于移动设备的 jQuery UI。这些事情你没有解决，必须自己做。

我希望这会有所帮助。

编辑： 我忘了解释为什么点击 div.ui-slider 和点击 a.ui-slider-handle。 div.ui-handler tap 用于当用户在滑动条上点击或点击手指时的点击/点击事件。 a.ui-slider-handle tabhold 是在用户用鼠标或手指向左/向右向下移动并释放它之后。

伊万