[英]Refreshing jQuery mobile rangeslider
動態更改幻燈片值后,我很難刷新jQuery Mobile Rangeslider。 滑塊兩側的框中的值會更改,但滑塊位置不會更改,並且鼠標懸停的文字不會更改。
$( 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上看到了幾個相關的問題,但是還沒有找到基於這些問題的解決方案。 我已經審查過的是:
盡管對元素進行了部分更改,但似乎似乎用“ 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');
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.