gpt4 book ai didi

javascript - 刷新 jQuery 移动范围 slider

转载 作者:行者123 更新时间:2023-11-28 07:42:14 26 4
gpt4 key购买 nike

在动态更改幻灯片值后,我很难刷新 jQuery Mobile 范围 slider 。 slider 两侧框中的值会发生变化,但幻灯片位置不会改变,鼠标悬停的文本也不会改变。

$( 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>

jsFiddle在这里:http://jsfiddle.net/uca97444/

请注意,我已经在 StackOverflow 上看到了几个相关问题,但未能找到基于这些问题的解决方案。我已经审查过的内容是:

Jquery mobile dual range slider reload with new range

How to refresh rangeslider in jquerymobile

最佳答案

尽管对元素进行了部分更改,但“pagecontainerbeforeshow”的更新似乎为时已晚。

将其更改为“pagecreate”事件有效:

$( 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/

关于javascript - 刷新 jQuery 移动范围 slider ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27876619/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com