iSocceriRun

rainfly

文章分類

缺省

標題搜索

Our Sponsors

快速導航

首頁

論壇

Classified Search Engine

統計

點擊: 174953
帖子數量: 215
開辟個人空間: 2011-08-11
最後更新: 2017-03-23

RSS訂閱

JQuery 編程問題:how to change page's content after being loaded?

文章內容

2013-03-18 14:40:26

JQuery Mobile編程問題:how to change page's content after being loaded?

假設在一個multi-page template的應用中,先用loadpage()把一個空page load進來.
在後面的操作中,如果收到一個參數,就在此page中加入一個

代碼:


<div>bla bla</div>

,更新此page.

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大蝦解惑

∽rainfly∽　點擊: 0 | 評論: 16 | 分類: 缺省 | 論壇: 電子電玩 | 論壇帖子

分享:

分享到微信

文章評論

我愛溫哥華

無題

可能是有javascript沒有被解析吧,是否有可能使用iframe實現?

2013-03-18 14:43:54 | 引用

無題

if the css is conflict with your container page, why not just reference statically in your container page.

2013-03-18 15:00:36 | 引用

陸壓

rainfly

回復:

陸壓寫道:

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-03-18 15:30:13 | 引用

回復:

我愛溫哥華寫道:

可能是有javascript沒有被解析吧,是否有可能使用iframe實現?

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.

2013-03-18 15:32:12 | 引用

rainfly

我愛溫哥華

Re: 回復:

mike20030405 寫道:

我愛溫哥華寫道:

可能是有javascript沒有被解析吧,是否有可能使用iframe實現?

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-03-18 15:35:50 | 引用

回復: Re: 回復:

我愛溫哥華寫道:

iframe是標准元素,木有問題的。

另外有沒有可能預先load進來,只是隱藏著

把參數A,B,C都全load好
根據config來決定顯示和隱藏某些參數
也是方案之一

iframe不知道怎麼用(我一直寫後台程序的,還在學怎麼弄這些)

2013-03-18 15:41:14 | 引用

rainfly

我愛溫哥華

Re: 回復: Re: 回復:

mike20030405 寫道:

我愛溫哥華寫道:

iframe是標准元素,木有問題的。

另外有沒有可能預先load進來,只是隱藏著

把參數A,B,C都全load好
根據config來決定顯示和隱藏某些參數
也是方案之一

iframe不知道怎麼用(我一直寫後台程序的,還在學怎麼弄這些)

web的iframe tag用於顯示與當前頁面不同的另外一個網頁,占據網頁的一個部分

2013-03-18 15:42:12 | 引用

回復: Re: 回復: Re: 回復:

我愛溫哥華寫道:

web的iframe tag用於顯示與當前頁面不同的另外一個網頁,占據網頁的一個部分

don't know how the iframe can benefit the app

2013-03-18 15:48:00 | 引用

rainfly

我愛溫哥華

Re: 回復: Re: 回復: Re: 回復:

mike20030405 寫道:

我愛溫哥華寫道:

web的iframe tag用於顯示與當前頁面不同的另外一個網頁,占據網頁的一個部分

don't know how the iframe can benefit the app

你可以重定義其src屬性,那麼就可以重新裝載一個頁面

2013-03-18 15:57:36 | 引用

回復: Re: 回復: Re: 回復: Re: 回復:

我愛溫哥華寫道:

你可以重定義其src屬性,那麼就可以重新裝載一個頁面

src帶參數,解析參數來展示頁面內容?
可以試試

2013-03-18 16:05:48 | 引用

rainfly



空間首頁 \| 博客 \| 好友分享 \| 相冊 \| 存檔 \| 朋友和群組 \| 個人資料

JQuery 編程問題:how to change page's content after being loaded?

文章評論

發表評論