jQueryMobile：如何使用滑块事件？

Question

我正在测试 slider 事件 jQueryMobile 我一定错过了一些东西。

页面代码是：

<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 滑块 源代码可以在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");

---

< 根据 Ivan的

回答，我们只需要：

<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

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

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

Answer 2

试试这个代码：

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

我希望这对你有用

Answer 3

我对您问题的解决方案是连接点击和点击保持事件的处理程序。
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 是在用户用鼠标或手指向左/向右向下移动滑动条并释放它之后。

伊万

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

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

$('.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 6

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

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

Answer 7

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

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

Answer 8

如果您只想捕获滑块释放时的事件（很可能是为了优化 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 9

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