? PC端的web程序有很多種跳轉方式,但使用jqMobi開發app頁面之間如何跳轉呢?
還可以使用傳統的a標簽嗎?
分析jqMobi的demo,發現所有的頁面都寫在一個頁面中,似乎也只能在這一個頁面中跳轉?
使用[panel屬性data-defer](http://blog.csdn.net/xuexiaodong009/article/details/18217063)把頁面分開后,如何跳轉呢?
例如:一個列表頁面list.html,單擊某一條就跳轉到詳細信息頁面。如何實現呢?
? ? ? ? ?
~~~
<div id="list" class="panel" data-load="loadFirstpage" data-defer="list.html" data-tab="navbar_picture">
</div>
~~~
list.html的頁面內容: ?
~~~
<a href="detail.html" data-persist-ajax="true" class='icon home big' >產品1</a>
<a href="detail.html" data-persist-ajax="true" class='icon home big' >產品2</a>
<a href="detail.html" data-persist-ajax="true" class='icon home big' >產品3</a>
<a href="detail.html" data-persist-ajax="true" class='icon home big' >產品4</a>
~~~
detail.html頁面會根據不同的產品通過ajax展示不同的產品信息。
測試發現在IOS模擬器中不能加載的不同產品信息,看來這種方式不行。
難道真的只能在各個panel之間跳轉嗎?
以上的需求如何實現?
經過測試發現:
似乎真的是只能在panel之間跳轉,實現以上需求要做以下修改:
第一步:在index.html中添加detailpanel
~~~
<div id="list" class="panel" data-load="loadFirstpage" data-defer="list.html" data-tab="navbar_picture">
</div>
<div id="detail" class="panel" data-load="loaddata" data-defer="detail.html" data-tab="navbar_picture">
</div>
~~~
第二步,修改list.html中的a標簽 ?
~~~
<a href="#detail" class='icon home big' >產品1</a>
<a href="#detail" class='icon home big' >產品2</a>
<a href="#detail" class='icon home big' >產品3</a>
<a href="#detail" class='icon home big' >產品4</a>
~~~
第三步,就是在detail.html中根據list.html中的a標簽 的不同值,來更新detail.html頁面的具體顯示內容。
?頁面之間的傳值方式參考[使用jqMobi開發app基礎:頁面傳值方式](http://blog.csdn.net/xuexiaodong009/article/details/18817517)
- 前言
- 使用jqMobi開發app基礎
- jqMobi開發app頁面注意事項
- 使用jqMobi開發app基礎:定義header
- 使用jqMobi開發app基礎:定義footer
- 使用jqMobi開發app基礎:通過panel添加內容
- 使用jqMobi開發app基礎:panel屬性data-defer介紹
- 使用jqMobi開發app基礎:Side Menu
- 使用jqMobi開發app基礎:Styled Lists布局
- 使用jqMobi開發app基礎:Grid布局
- 使用jqMobi開發app基礎:響應式布局介紹
- 使用jqMobi開發app基礎:Toggle Switches開關按鈕
- 使用jqMobi開發app基礎:HTML5 LocalStorage 本地存儲
- 使用jqMobi開發app基礎:登錄頁面的實現
- 使用jqMobi開發app基礎:注銷頁面的實現
- 使用jqMobi開發app基礎:viewport指令
- 使用jqMobi開發app基礎:a標簽的使用
- 使用jqMobi開發app基礎:Scrolling的使用,向上向下拖動,動態添加數據
- 使用jqMobi開發app基礎:頁面傳值方式
- 使用jqMobi開發app基礎:panel之間的跳轉方式
- 使用jqMobi開發app基礎:panel之間的跳轉方式總結
- 使用jqMobi開發app基礎:下拉select
- 使用jqMobi開發app基礎:真的只能存在一個DOM嗎?
- 使用jqMobi開發app基礎:使用 jQuery
- 使用jqMobi開發app基礎:Scrolling的使用,拖動后大量空白的解決方法
- 使用jqMobi開發app基礎:Scrolling的使用,停止和繼續拖動有關的問題
- 使用jqMobi開發app基礎:Badge的使用
- 使用jqMobi開發app基礎:如何撥打電話?
- 使用jqMobi開發app基礎:彈出內容的設計