刷新 jQuery 移动范围滑块
Refreshing jQuery mobile rangeslider
在动态更改幻灯片值后,我很难刷新jQuery Mobile范围滑块。滑块两侧框中的值会更改,但幻灯片位置不会更改,鼠标悬停文本也不会更改。
$( document ).on( "pagecontainerbeforeshow", function ( event, ui ) {
console.log("THIS EVENT WAS ACTUALLY CALLED");
document.getElementById("hoursofdaymin").value = 6;
document.getElementById("hoursofdaymax").value = 16;
$("#hoursofdayslider", ui.prevPage).rangeslider('refresh');
// I've also tried:
//$("#hoursofdaymin", ui.prevPage).slider('refresh');
//$("#hoursofdaymax", ui.prevPage).slider('refresh');
});
<div class="upage ui-page-theme-a" id="mainpage" data-role="page">
<div class="upage-outer">
<div data-role="header" class="container-group inner-element uib_w_2" data-uib="jquery_mobile/header" data-ver="0">
<h1>Heading1</h1>
<div class="widget-container wrapping-col single-centered"></div>
<div class="widget-container content-area horiz-area wrapping-col left"></div>
<div class="widget-container content-area horiz-area wrapping-col right"></div>
</div>
<div data-role="content">
<a class="widget uib_w_1 d-margins" data-uib="jquery_mobile/button" data-ver="0" data-role="button" href="#settings" data-transition="fade">Settings</a>
</div>
</div>
</div>
<div class="upage vertical-col left" id="settings" data-role="page">
<div data-role="header" data-add-back-btn="true" data-direction="reverse" data-back-btn-text="Back" data-uib="jquery_mobile/header">
<h1>Settings</h1>
</div>
<div data-role="content">
<form>
<div data-role="rangeslider" id="hoursofdayslider">
<label for="hoursofdaymin">Hours:</label>
<input type="range" id="hoursofdaymin" min="0" max="24" value="8">
<label for="hoursofdaymax">Hours:</label>
<input type="range" id="hoursofdaymax" min="0" max="24" value="20">
</div>
</form>
</div>
</div>
js小提琴在这里: http://jsfiddle.net/uca97444/
请注意,我已经在StackOverflow上看到了几个相关问题,但无法找到基于这些问题的解决方案。我已经审查过的是:
Jquery移动双量程滑块重新加载与新范围
如何在jquerymobile中刷新范围滑块
似乎"
pagecontainerbeforeshow"的更新为时已晚,尽管元素进行了部分更改。
将其更改为"页面创建"事件有效:
$( document ).on( "pagecreate", "#settings", function() {
$("#hoursofdaymin").val(6);
$("#hoursofdaymax").val(16);
$("#hoursofdayslider").rangeslider('refresh');
});
http://jsfiddle.net/uca97444/1/
$( document ).on( "pagecreate", function ( event, ui ) {
$("#hoursofdaymin").val(6);
$("#hoursofdaymax").val(16);
$("#hoursofdayslider").rangeslider('refresh');
});
http://jsfiddle.net/uca97444/2/
相关文章:
- HTML 范围输入在尝试移动时无响应
- 根据输入范围值移动类/样式
- 刷新 jQuery 移动范围滑块
- 如果我将一个元素从一个容器移动到另一个容器,是否存在范围问题
- 移动范围,鼠标不受脚本引起的移动的干扰
- 如何使用键盘箭头键移动 html5 范围滑块手柄
- 在 JS 中重置 HTML 范围输入不会移动显示的滑块
- 为什么我的范围选择器在我的谷歌地图API3/jQuery移动应用程序中不起作用
- 如何在jqueryui范围滑块中移动两个旋钮
- 带有hammerjs滑动检测的输入类型范围在移动safari上不可用
- 基于javascript中的范围滑块值在画布中移动圆圈
- 如何在不使用Jquery UI的情况下动态移动HTML5范围的输入句柄
- 随着HTML5范围滑动条的移动,不断改变文本框的值
- 如何“解除绑定”Mapbox中的弹出窗口?只允许从一定范围内的标记弹出(当用户移动时改变)
- 将JavaScript方法移动到全局范围
- 如何在Chrome中移动javascript范围的末尾到句子
- jQuery移动范围滑块输入框对齐
- Jquery移动双范围滑动器重载新范围
- text范围移动到点()IE
- 具有最小范围的jQuery移动范围滑块