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基础:弹出内容的设计