Dojo转换到同一项目中的另一个html文件

时间:2012-05-04 08:07:24

标签: html mobile transition dojo

我正在使用Dojo 1.7。用Phonegap实现Android移动应用程序。 我的问题是,我已经在我的项目中的index.html中实现了一个tabbar。现在我想通过点击index.html中的tabbar-icon到view2.html的view-div(名为testdiv)进行转换,这是同一个项目中的另一个html文件。

2 个答案:

答案 0 :(得分:1)

使用data-dojo-prop属性中可用的url属性,如下所示 -

Index.html - 链接到另一个页面上的视图

<div id="detailsHeading" data-dojo-type="dojox.mobile.Heading"
        data-dojo-props="fixed: 'top', label: 'Details', back:'Back', moveTo:'view1', transition:'slide', transitionDir:'-1',url:'sample.html'">
</div>

上面的url属性包含要引用的html的名称,moveTo包含要显示的视图(您的另一个html可能有多个视图)

Sample.html - 视图定义

<div data-dojo-type="dojox.mobile.ScrollableView" id="view1"
    data-dojo-props="selected:false,scrollDir:'v'">
</div>

单击“detailsHeading”时,应用程序将加载sample.html并呈现视图 - view1

答案 1 :(得分:0)

这里不是很多;但我几乎100%肯定'tabbar'你说的是dojox.mobile.TabBar?

如果是这样,拉入远程页面没有支持开箱即用,但你可以通过在标签栏中添加dijit.layout.ContentPane来实现这一点。

为您的项目试用此代码,每个窗格都会加载viewX.html

<div id="groupview1" data-dojo-type="dojox.mobile.View"
       data-dojo-props='selected:true'>
  <ul data-dojo-type="dojox.mobile.TabBar"
       data-dojo-props='barType:"segmentedControl", fixed:"top"'>
    <li data-dojo-type="dojox.mobile.TabBarButton"
        data-dojo-props='moveTo:"subview1", selected:true'>New</li>
    <li data-dojo-type="dojox.mobile.TabBarButton"
       data-dojo-props='moveTo:"subview2"'>What's Hot</li>
  </ul>

 <div id="subview1" data-dojo-type="dojox.mobile.ScrollableView"
        data-dojo-props='selected:true'>
    <ul data-dojo-type="dijit.layout.BorderContainer">
      <li data-dojo-type="dijit.layout.ContentPane"
       data-dojo-props='region:"center", href:"view1.html"'>Hello</li>
    </ul>
 </div>

  <div id="subview2" data-dojo-type="dojox.mobile.ScrollableView" data-dojo-props=''>
    <ul data-dojo-type="dijit.layout.BorderContainer">
        <li data-dojo-type="dijit.layout.ContentPane"
             data-dojo-props='region:"center", href:"view2.html"'></li>
  </ul>
</div></div>

 <script type="text/javascript">
       require(["dojox/mobile/TabBar", "dojox/mobile/TabBarButton", "dojox/mobile/TabBarButton", "dojox/mobile/ScrollableView", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"], function() {
              dojo.parser.parse();
       });
 </script>