-
樓主 / rainfly
- 時間: 2013-3-18 14:40JQuery Mobile編程問題:how to change page's content after being loaded?
假設在一個multi-page template的應用中,先用loadpage()把一個空page load進來.
在後面的操作中,如果收到一個參數,就在此page中加入一個
,更新此page.代碼: <div>bla bla</div>
e.g.
空的page如下:
代碼: <div data-role="page" id="nav_conf_page" data-position="fixed" ontouchmove="touchMove(event)" data-theme="b">
<div data-role="header">
<h1>Page on config</h1>
<a href="#nav_home" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
</div><!-- /header -->
<div data-role="content" id="divid_test_content" style="margin-top:0px;padding: 0px 1px;">
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#nav_home">Home</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page -->
更新後的page如下:
代碼: <div data-role="page" id="nav_conf_page" data-position="fixed" ontouchmove="touchMove(event)" data-theme="b">
<div data-role="header">
<h1>Page on config</h1>
<a href="#nav_home" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
</div><!-- /header -->
<div data-role="content" id="divid_test_content" style="margin-top:0px;padding: 0px 1px;">
<div id="divid_slider" data-role="fieldcontain" style="margin-top: 15px;"><label for="test_slider" id="lbl_snd_latency" style="width:100%">Test slider value</label><input name="test_slider" id="test_slider" value="50" min="0" max="100" data-mini="true" type="range"></div>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#nav_home">Home</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page -->
代碼如下:
代碼: document.getElementById('divid_test_content').innerHTML = "<div id='divid_slider' data-role='fieldcontain' style='margin-top: 15px;'>" + "<label for='test_slider' id='lbl_snd_latency' style='width:100%'>Test slider value</label>" + "<input type='range' name='test_slider' id='test_slider' value='50' min='0' max='100' data-mini='true' />" + "</div>";
$.mobile.loadPage('index.html#nav_conf_page');
目前的問題是:
page更新了,但顯示不正常.
示例中,新增加的div是一個slider可以調節.
第二段的page code如果是靜態頁面中就沒問題.
用JS修改的顯示不正常:有label,有輸入框,但沒slider顯示.
很明顯是range CSS沒有正常加載.
有請JS大蝦解惑 -
-
- 時間: 2013-3-18 14:43
-
-
- 時間: 2013-3-18 15:00
-
- 時間: 2013-3-18 15:30
陸壓 寫道:if the css is conflict with your container page, why not just reference statically in your container page.
I am looking for the solution to generate pages(and elements within) based on a config file which is saved on device, and don't know what is inside except the format.
e.g.
config.txt
A, min 50, max 500
B, min -100, mas 200
C,
... -
- 時間: 2013-3-18 15:32
-
- 時間: 2013-3-18 15:35 mike20030405 寫道:
I am sure the js worked, just some parts of JQuery Mobile framework need to reload, but don't know which parts.
This is an app for BB10, so really doubt iframe can do help.
iframe是標准元素,木有問題的。
另外有沒有可能預先load進來,只是隱藏著 -
- 時間: 2013-3-18 15:41
-
- 時間: 2013-3-18 15:42 mike20030405 寫道:
把參數A,B,C都全load好
根據config來決定顯示和隱藏某些參數
也是方案之一
iframe不知道怎麼用(我一直寫後台程序的,還在學怎麼弄這些)
web的iframe tag用於顯示與當前頁面不同的另外一個網頁,占據網頁的一個部分 -
- 時間: 2013-3-18 15:48
-
- 時間: 2013-3-18 15:57 mike20030405 寫道:
don't know how the iframe can benefit the app
你可以重定義其src屬性,那麼就可以重新裝載一個頁面
JQuery 編程問題:how to change page's content after being loaded?
