jQueryMobile:如何使用滑块事件? [英] jQueryMobile: how to work with slider events?

问题描述

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

I'm testing the slider events in jQueryMobile and I must been missing something.

页面代码是:

<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事件挂钩

and having a hook to the keyup event as

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

绝对不做任何事情:(

我必须说，我错误地假设，jQueryMobile使用了 jQueryUI 控件这是我的第一个想法，但现在深入研究事件，我发现情况并非如此，仅在CSS Design方面如此.

I must say that I wrongly assumed that jQueryMobile used jQueryUI controls 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.

我该怎么办?

jQuery Mobile Slider 源代码可以在 Git 上找到，只要它也可以帮助任何人找到测试页在 JSBin

jQuery Mobile Slider source code can be found on Git if it helps anyone as well a test page can be found at JSBin

据我了解，#slider是带有值的文本框，所以我需要挂入滑块句柄，因为此滑块的生成代码是:

As I understand, the #slider is the textbox with the value, so I would need to hook into the slider handle as the generated code for this slider is:

<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事件

and checking the events in the handler anchor I get only the click event

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

---

修复

从Ivan的答案中，我们只需要:

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>

然后

$(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提醒大家.

Thank you Ivan for the heads up.

推荐答案

我对您的问题的解决方案是在tap和taphold事件上连接处理程序. Tap钩在滑块的div元素上，而taphold钩在一个元素上(滑块控制按钮).

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).

滑块的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)对服务器进行更新. 这里还有另一件事要注意，在输入字段中更改值不会更新服务器，因此您必须绑定函数以更改输入元素的事件.另外，您还必须注意，通过执行此操作，每次滑动控件都会触发输入元素的更改，因此您也必须解决该问题.

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.

这就是为什么jQuery Mobile不是移动设备的jQuery UI的原因.您没有整理好这些东西，必须自己动手做.

This is why jQuery Mobile is NOT jQuery UI for mobile devices. You dont have these things sorted out and must do them yourself.

我希望这会有所帮助.

我忘了解释为什么点击div.ui-slider并按住a.ui-slider-handle. div.ui-handler tap用于用户仅单击或轻按滑动条上的手指时的单击/轻击事件. a.ui-slider-handle Tab键是在用户用鼠标或手指向左/向右滑动滑块并释放它之后.

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.

伊凡

这篇关于jQueryMobile:如何使用滑块事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！