dojo mobile — панель вкладок под домашней панелью

Предполагаемый макет:

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

Цель здесь состоит в том, чтобы dojox.mobile.Heading справа вверху, dojox.mobile.TabBar под ним, а остальная часть экрана была занята контентом, как показано выше.

Когда пользователь перемещается между различными экранами в приложении, Heading должен измениться (заголовок и кнопка «Назад»), но TabBar НЕ изменится. Однако на некоторых экранах TabBar скрыт.

Теперь я пытаюсь понять, как это сделать w.r.t. до dojox.mobile.Viewс. Я вижу два возможных пути достижения этого:

  1. Имейте как Heading, так и TabBar в корне View, который содержит несколько подчиненных View, между которыми перемещается TabBar. Перепишите содержимое Heading, вызванное событиями навигации на TabBar.

  2. Имейте несколько View, которые содержат Heading и пустой div. Перепишите пустое содержимое div содержимым div в другом месте страницы, не содержащемся ни в одном View, содержащем Heading.

Какой из вышеперечисленных методов является предпочтительным/стандартным для выполнения этого в DOJO mobile?

Есть ли еще способы, которыми это можно сделать?

Спасибо!


javascript dojo dojox.mobile
person bguiz    schedule 17.06.2012    source источник
comment
@mschr Не могли бы вы рассказать, как бы вы это сделали, на примере кода?   -  person bguiz    schedule 19.06.2012

Ответы (1)


arrow_upward
1
arrow_downward

Вы также можете просто поместить заголовок и панель вкладок на верхний уровень (т.е. как прямые дочерние элементы вашего тела), оба с атрибутом fixed="top". Они будут располагаться друг под другом. Тогда просто поставьте свои разные взгляды после этого (еще как дети тела).

Ниже приведен пример, демонстрирующий это решение (в заголовке нет кнопки «Назад», но вы поняли...). Сохраните это в файле HTML в каталоге dojox/mobile/tests вашей установки 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>
person edurocher    schedule 19.06.2012
comment
Спасибо за ваш вклад - сейчас мы изучаем это! - person bguiz; 19.06.2012