0

预期布局：

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

这里的意图是dojox.mobile.Heading在顶部有一个右边，dojox.mobile.TabBar在它下面有一个，以及由内容占据的屏幕的其余部分，如上所示。

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

现在我正试图弄清楚如何对dojox.mobile.Views 执行此操作。我看到了两种可能的方法来实现这一目标：

  1. 在 root中同时包含theHeading和 the ，其中包含几个 sub ，它们在其中导航。重写 的内容，由 上的导航事件触发。TabBarViewViewTabBarHeadingTabBar

  2. 有几个View包含 aHeading和一个空的 s div。用页面中其他地方的 a 的内容重写空div的内容，不包含在 any中，其中包含 a 。divViewHeading

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

还有更多的方法可以实现这一点吗？

谢谢！

4

1 回答 1

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>
于 2012-06-19T11:45:23.520 回答