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