0

意図したレイアウト:

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

ここでの意図は、上に示したようdojox.mobile.Headingに、上部に を、dojox.mobile.TabBarその下に を配置し、画面の残りの部分をコンテンツが占めるようにすることです。

ユーザーがアプリ内のさまざまな画面間を移動するとき、Heading変更する必要があります (タイトルと戻るボタン) がTabBar変更されません。ただし、一部の画面では、TabBar が非表示になっています。

今、私はこのwrtをdojox.mobile.Viewsにする方法を理解しようとしています。これを実現するには、次の 2 つの方法が考えられます。

  1. Headingと の両方TabBarを rootに含めます。ルートには、 が移動するView複数の sub が含まれます。のナビゲーション イベントによってトリガーされた のコンテンツを書き換えます。ViewTabBarHeadingTabBar

  2. と空Viewの を含む がいくつかあります。emptyの内容を、 aを含むany に含まれていない、ページ内のどこか別の場所の内容で書き換えます。HeadingdivdivdivViewHeading

上記の方法のうち、DOJO モバイルでこれを達成するための推奨/標準的な方法はどれですか?

これを達成できる方法は他にもありますか?

ありがとう！

4

1 に答える 1

1

また、見出しとタブ バーをトップレベルに配置することもできます (つまり、body の直接の子として)。どちらも 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 に答える