使用jqMobi开发app基础:panel之间的跳转方式详解手机开发

    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基础:页面传值方式

 

原创文章,作者:奋斗,如若转载,请注明出处:https://blog.ytso.com/tech/app/5268.html

(0)
上一篇 2021年7月16日 23:40
下一篇 2021年7月16日 23:40

相关推荐

发表回复

登录后才能评论