CODEWITHSUNDEEP
javascriptdojodojox.mobile
bguiz
bguiz

Reputation: 28587

dojo mobile - tab bar beneath home bar

Intended layout:

------------------------
| (back)  (title)      |
------------------------
| (tab1) (tab2) (tab3) |
------------------------
|                      |
|                      |
|                      |
|                      |
|                      |
|                      |
|                      |
|                      |
|                      |
------------------------

The intent here is to have a dojox.mobile.Heading right at the top, a dojox.mobile.TabBar beneath it, and the rest of the screen taken up by the content, as depicted above.

When the user navigates between the various screens within the app, the Heading must change (title and back button), but the TabBar does NOT change. On some screens however, the TabBar is hidden.

Now I am trying to figure out how to do this w.r.t. to dojox.mobile.Views. I see two potential ways of achieving this:

  1. Have both the Heading and the TabBar in a root View, which contains several sub Views which the TabBar navigates between. Rewrite the contents of the Heading, triggered by navigation events on the TabBar.

  2. Have several Views which contain a Heading, and an empty div. Rewrite the empty div's contents with the contents of a div somewhere else in the page, not contained within any View, which contains a Heading.

Which of the above methods is the preferred/ standard way of accomplishing this in DOJO mobile?

Are there yet more ways in which this can be accomplished?

Thanks!

Upvotes: 0

Views: 961

Answers (1)

edurocher
edurocher

Reputation: 316

You can also just put the heading and the tab bar at the toplevel (i.e. as direct children of your body), both with a fixed="top" attribute. They will be stacked one below the other. Then just put your different views after that (still as children of the body).

Below is a sample that shows this solution (no Back button in the heading, but you get the idea...). Save this in an HTML file in the dojox/mobile/tests directory of your Dojo install to run it. This is for Dojo 1.7.2.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>

<title>Heading + TabBar</title>

<link href="../themes/iphone/base.css" rel="stylesheet">
<link href="../themes/iphone/TabBar.css" rel="stylesheet">

<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true, mblAlwaysHideAddressBar: true"></script>

<script type="text/javascript">
    require([
        "dojo/ready",
        "dojo/_base/array",
        "dojox/mobile/parser",
        "dojox/mobile",
        "dojox/mobile/compat",
        "dojox/mobile/ScrollableView",
        "dojox/mobile/TabBar"
    ], function(ready, array){
        ready(function(){
            var f = function(view, moveTo, dir, transition, context, method){
                var child = array.filter(this.getChildren(), function(w){
                    return w.moveTo === view.id; })[0];
                if(child){ 
                    child.select();
                    heading.set("label", child.get("label"));
                }
            };
            tabBar.subscribe("/dojox/mobile/afterTransitionIn", f);
            tabBar.subscribe("/dojox/mobile/startView", f);
        })
    });
</script>

<style>
html, body{
    height: 100%;
    overflow: hidden;
}
</style>
</head>
<body style="visibility:hidden;">
<h1 jsId="heading" data-dojo-type="dojox.mobile.Heading" data-dojo-props='fixed:"top"'>Heading</h1>
<ul jsId="tabBar" data-dojo-type="dojox.mobile.TabBar" data-dojo-props='fixed:"top"' style="border-bottom:none;">
    <li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props='icon1:"images/tab-icon-16.png", icon2:"images/tab-icon-16h.png", moveTo:"featured"'>Featured</li>
    <li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props='icon1:"images/tab-icon-15.png", icon2:"images/tab-icon-15h.png", moveTo:"categ"'>Categories</li>
    <li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props='icon1:"images/tab-icon-10.png", icon2:"images/tab-icon-10h.png", moveTo:"top25"'>Top 25</li>
</ul>

<div id="featured" data-dojo-type="dojox.mobile.ScrollableView">
    <ul data-dojo-type="dojox.mobile.RoundRectList">
        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='moveTo:"categ"'>
            Categories
        </li>
        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='moveTo:"top25", transitionDir:-1'>
            Top 25
        </li>
    </ul>
</div>

<div id="categ" data-dojo-type="dojox.mobile.ScrollableView">
    <ul data-dojo-type="dojox.mobile.RoundRectList">
        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='moveTo:"top25"'>
            Top 25
        </li>
        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='moveTo:"featured", transitionDir:-1'>
            Featured
        </li>
    </ul>
</div>

<div id="top25" data-dojo-type="dojox.mobile.ScrollableView">
    <ul data-dojo-type="dojox.mobile.RoundRectList">
        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='moveTo:"featured"'>
            Featured
        </li>
        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='moveTo:"categ", transitionDir:-1'>
            Categories
        </li>
    </ul>
</div>


</body>
</html>

Upvotes: 1

Related Questions