使用jqMobi开发app基础：panel之间的跳转方式

浏览数：25 / 时间：2015年06月11日

PC端的web程序有很多种跳转方式，但使用jqMobi开发app页面之间如何跳转呢？

　　　还可以使用传统的a标签吗？

　　　分析jqMobi的demo，发现所有的页面都写在一个页面中，似乎也只能在这一个页面中跳转？

　　　使用panel属性data-defer把页面分开后，如何跳转呢？

　　　例如：一个列表页面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基础：页面传值方式

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

使用jqMobi开发app基础：panel之间的跳转方式