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

【问题标题】：Dojo transition to another html file in same projectDojo 转换到同一项目中的另一个 html 文件
【发布时间】：2012-05-13 18:34:36
【问题描述】：

我正在使用 Dojo 1.7。使用Phonegap 实现一个Android 移动应用程序。那么我的问题是，我在我的项目中的 index.html 中实现了一个标签栏。现在我想通过单击从 index.html 到 view2.html 的 view-div（称为 testdiv）的 tabbar-icon 进行转换，这是同一项目中的另一个 html 文件。

【问题讨论】：

标签： html mobile transition dojo

【解决方案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

【讨论】：

【解决方案2】：

这里没什么可说的；但我几乎 100% 确定您所说的“标签栏”是 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>

【讨论】：