Question

预期布局：

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

这里的目的是让dojox.mobile.Heading位于顶部，dojox.mobile.TabBar位于其下方，屏幕的其余部分由内容占据，如上所示。

当用户在应用内的各个屏幕之间导航时，Heading必须更改（标题和后退按钮），但TabBar不会更改。但是在某些屏幕上，TabBar是隐藏的。

现在我想弄清楚怎么做w.r.t.至dojox.mobile.View。我看到了实现这一目标的两种可能方式：

在根Heading中同时拥有TabBar和View，其中包含View之间导航的多个子TabBar。重写由Heading上的导航事件触发的TabBar内容。
包含View和空Heading的多个div。使用页面中其他位置div的内容重写空的div内容，而不包含在View内的Heading内。

上述哪种方法是在DOJO mobile中实现此目的的首选/标准方式？

还有更多方法可以实现这一目标吗？

谢谢！

Answer 1

您也可以将标题栏和标签栏放在顶层（即身体的直接子项），两者都具有fixed =“top”属性。它们将堆叠在一起。然后在此之后放置你的不同观点（仍然是身体的孩子）。

下面是一个显示此解决方案的示例（标题中没有“后退”按钮，但您明白了......）。将其保存在Dojo安装的dojox / mobile / tests目录中的HTML文件中以运行它。这适用于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>

dojo mobile - 家庭酒吧下方的标签栏

1 个答案: