jQueryMobile：如何处理滑块事件？

我正在测试 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

我想做的是一旦用户释放滑块手柄就可以获得该值

并且与键盘事件挂钩

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

绝对没有:(

我必须说,我错误地认为jQueryMobile使用jQueryUI控件,因为这是我的第一个想法,但是现在正在深入的事件我可以看到,事实并非如此,只是在CSS设计方面.

What can I do?

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>

并检查处理程序锚点中的事件,我只得到点击事件

$("#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',ui){ makeAjaxChange($(this).siblings('input')); });
    $('#slider').siblings('.ui-slider a').bind('taphold',ui){ makeAjaxChange($(this).parent().siblings('input')); 

});

function makeAjaxChange( elem ) { 
    alert(elem.val()); 
}

谢谢伊万的头脑.

解决方法

我解决你的问题是连接处理程序的tap tap和taphold事件.
水龙头钩在滑块的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是在用户用鼠标或手指左右滑动滑块移动后将其释放的.

伊万

原文地址：https://www.jb51.cc/jquery/179341.html

jQueryMobile：如何处理滑块事件？

解决方法

相关推荐