我正在测试
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挂在元素上(滑块控制按钮).
水龙头钩在滑块的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是在用户用鼠标或手指左右滑动滑块移动后将其释放的.
伊万