Dojo transition to another html file in same proje

Question

I am using Dojo 1.7. to implement a Android mobile App with Phonegap. Well my problem is, that I have implemented a tabbar in index.html in my project. Now I want to make a transition by clicking on a tabbar-icon from index.html to a view-div (called testdiv) of view2.html which is another html file in the same project.

Answer 1

Use the url property available within the data-dojo-prop attribute as shown below -

Index.html - link to view on another page

<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>

The url property above contains the name of the html to be referened and moveTo contains the view to be displayed (your another html may have multiple views)

Sample.html - view definition

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

When the "detailsHeading" is clicked, the application will load sample.html and render the view - view1

Answer 2

theres not a lot to go by here; but im nearly a 100% sure that the 'tabbar' you speak of a dojox.mobile.TabBar?

If so, there's no support out-the-box for pulling in remote pages but you can do this by adding a dijit.layout.ContentPane to the tabbar.

Try out this code for your project, each pane loads 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>