javascript - 布局 Dojo 移动应用程序-6ren

javascript - 布局 Dojo 移动应用程序

转载作者：行者123 更新时间：2023-11-29 10:52:42

你好，有人有布局 dojo 移动应用程序的经验吗？我想在我的应用程序中有一个标题部分，在一个页面上有一个标题下方的子导航，然后是一个可滚动的内容部分，最后是底部的主导航。所有内容都应一次显示，这样您就无需滚动即可到达任何导航。问题是，如果所有内容都可见，我将无法再看到可滚动内容部分的所有内容，因为导航位于其上方，或者如果可滚动内容部分完全可读，我必须滚动才能到达每个导航。有人知道如何完成该布局吗？这是我的代码，也是您可以观看的示例。

示例:click here

代码:

 <!DOCTYPE html>
    <html>
    <head>

    <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>Layout</title>

                <link href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/mobile/themes/iphone/iphone.css" rel="stylesheet"></link>

                <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js.uncompressed.js"></script>

                <script type="text/javascript">
                               // Use the lightweight parser
                               dojo.require("dojox.mobile.parser");
                               // Require Dojo mobile
                               dojo.require("dojox.mobile");
                               dojo.require("dojox.mobile.TabBar");
                               dojo.require("dojox.mobile.ScrollableView");
                               //Require the compat if the client isn't Webkit-based
                               dojo.requireIf(!dojo.isWebKit,"dojox.mobile.compat");

                               dojo.ready(function() {
                                               // Parse the page!
                                               dojox.mobile.parser.parse();
                               });

                </script>

    </head>
    <body>

    <div dojoType="dojox.mobile.View" id="content-1" selected="true">

                               <div dojoType="dojox.mobile.Heading" id="heading-1">
                                               Heading 1
                               </div>                  

                               <ul dojoType="dojox.mobile.TabBar" barType="segmentedControl" id="top-nav">
                                               <li dojoType="dojox.mobile.TabBarButton" id="top-nav-1" moveTo="content-1-1" selected="true">Top-Nav 1</li>
                                               <li dojoType="dojox.mobile.TabBarButton" id="top-nav-2" moveTo="content-1-2">Top-Nav 2</li>
                                               <li dojoType="dojox.mobile.TabBarButton" id="top-nav-3" moveTo="content-1-3">Top-Nav 3</li>
                               </ul>

                               <div dojoType="dojox.mobile.ScrollableView" id="content-1-1" selected="true">

                                               <h3>Content 1-1</h3>

                                               Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
                                               Aenean commodo ligula eget dolor. Aenean massa. Cum sociis 
                                               natoque penatibus et magnis dis parturient montes, nascetur
                                               ridiculus mus. Donec quam felis, ultricies nec, pellentesque
                                               eu, pretium quis, sem. Nulla consequat massa quis enim. Donec
                                               pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                                               In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
                                               Nullam dictum felis eu pede mollis pretium. Integer tincidunt.
                                               Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate 
                                               eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, 
                                               eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis,
                                               feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
                                               Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.
                                               Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. 
                                               Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper 
                                               libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit 
                                               vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et
                                               ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
                                               Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt.
                                               Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis
                                               magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nun. 
                               </div>

                               <div dojoType="dojox.mobile.ScrollableView" id="content-1-2">

                                               <h3>Content 1-2</h3>

                                               Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
                                               Aenean commodo ligula eget dolor. Aenean massa. Cum sociis 
                                               natoque penatibus et magnis dis parturient montes, nascetur
                                               ridiculus mus. Donec quam felis, ultricies nec, pellentesque
                                               eu, pretium quis, sem. Nulla consequat massa quis enim. Donec
                                               pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                                               In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
                                               Nullam dictum felis eu pede mollis pretium. Integer tincidunt.
                                               Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate 
                                               eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, 
                                               eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis,
                                               feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
                                               Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.
                                               Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. 
                                               Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper 
                                               libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit 
                                               vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et
                                               ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
                                               Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt.
                                               Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis
                                               magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nun. 
                               </div>

                               <div dojoType="dojox.mobile.ScrollableView" id="content-1-3">

                                               <h3>Content 1-3</h3>

                                               Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
                                               Aenean commodo ligula eget dolor. Aenean massa. Cum sociis 
                                               natoque penatibus et magnis dis parturient montes, nascetur
                                               ridiculus mus. Donec quam felis, ultricies nec, pellentesque
                                               eu, pretium quis, sem. Nulla consequat massa quis enim. Donec
                                               pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                                               In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
                                               Nullam dictum felis eu pede mollis pretium. Integer tincidunt.
                                               Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate 
                                               eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, 
                                               eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis,
                                               feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
                                               Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.
                                               Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. 
                                               Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper 
                                               libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit 
                                               vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et
                                               ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
                                               Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt.
                                               Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis
                                               magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nun. 
                               </div>

                </div>

                <div dojoType="dojox.mobile.ScrollableView" id="content-2">

                               <div dojoType="dojox.mobile.Heading" id="heading-2" fixed="top">
                                               Heading 2
                               </div>                  

                               <h3>Content 2-1</h3>

                               Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
                               Aenean commodo ligula eget dolor. Aenean massa. Cum sociis 
                               natoque penatibus et magnis dis parturient montes, nascetur
                               ridiculus mus. Donec quam felis, ultricies nec, pellentesque
                               u, pretium quis, sem. Nulla consequat massa quis enim. Donec
                               pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                               In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
                               Nullam dictum felis eu pede mollis pretium. Integer tincidunt.
                               Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate 
                               eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, 
                               eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis,
                               feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
                               Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.
                               Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. 
                               Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper 
                               libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit 
                               vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et
                               ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
                               Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt.
                               Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis
                               magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nun. 

                </div>

                <div dojoType="dojox.mobile.ScrollableView" id="content-3">

                               <div dojoType="dojox.mobile.Heading" id="heading-3" fixed="top">
                                               Heading 3
                               </div>                  

                               <h3>Content 3-1</h3>

                               Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
                               Aenean commodo ligula eget dolor. Aenean massa. Cum sociis 
                               natoque penatibus et magnis dis parturient montes, nascetur
                               ridiculus mus. Donec quam felis, ultricies nec, pellentesque
                               eu, pretium quis, sem. Nulla consequat massa quis enim. Donec
                               pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                               In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
                               Nullam dictum felis eu pede mollis pretium. Integer tincidunt.
                               Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate 
                               eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, 
                               eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis,
                               feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
                               Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.
                               Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. 
                               Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper 
                               libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit 
                               vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et
                               ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
                               Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt.
                               Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis
                               magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nun. 

                </div>

                <ul id="bottom-nav" dojoType="dojox.mobile.TabBar">
                               <li id="bottom-nav-1" dojoType="dojox.mobile.TabBarButton" selected="true" moveTo="content-1">Content 1</li>
                               <li id="bottom-nav-2" dojoType="dojox.mobile.TabBarButton" moveTo="content-2">Content 2</li>
                               <li id="bottom-nav-3" dojoType="dojox.mobile.TabBarButton" moveTo="content-3">Content 3</li>
                </ul>

    </body>
</html>

编辑:为了更精确一点，我制作了一些您可以找到的图像 here

我希望这些图像有助于理解我想要实现的目标。我想要一个应用程序布局，它有一个标题，在它下面是一个子导航，然后是一个可滚动的内容区域，最后是一个带有主导航的页脚。一切都应该一次可见!!!所以内容区域应该获得显示的高度 - 页眉 - 页脚 - subNav。

|-------------------------------|
|           Header              |
|-------------------------------|
|        Sub navigation         |
|-------------------------------|
|                               |
|     Scrollable content        |
|                               |
|    Height = display-height -  |
|    header - subNav - footer   |
|                               |
|-------------------------------|
|    Footer / Main navigation   |
|-------------------------------|

我希望 Dojo 移动版可以实现这样的布局。

感谢您的支持!!!拉尔夫

最佳答案

你快到了。只需使用 fixed="top" 和 fixed="bottom"。

因为您已经在 ScrollableView 之外有了页脚，只需添加 fixed="bottom"。根据文档，您需要在两个标题元素上使用 fixed="top"，但没有这些元素似乎也能正常工作。

此处提供更多信息(具体请参见页面底部的示例):http://docs.dojocampus.org/dojox/mobile/ScrollableView .

关于javascript - 布局 Dojo 移动应用程序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7154398/

文章推荐： javascript - 获取字体向量

文章推荐： javascript - 如何从 javascript 文件复制 href

文章推荐： mysql - 使用 Laravel 语法的 Sql leftJoin 查询显示错误

文章推荐： javascript - 拉斐尔 svg 导入大小

C 程序我想知道是否有办法简化我的 dayofyear 程序？
我是 C 语言新手，我编写了这个 C 程序，让用户输入一年中的某一天，作为返回，程序将输出月份以及该月的哪一天。该程序运行良好，但我现在想简化该程序。我知道我需要一个循环，但我不知道如何去做。这是程序
java - GUI Java 程序 - Paint 程序
我一直在努力找出我的代码有什么问题。这个想法是创建一个小的画图程序，并有红色、绿色、蓝色和清除按钮。我有我能想到的一切让它工作，但无法弄清楚代码有什么问题。程序打开，然后立即关闭。 import ja
homebrew - 从 Homebrew 程序/欺骗程序到 Homebrew 程序/核心的迁移是什么？
我想安装screen，但是接下来我应该做什么？ $ brew search screen imgur-screenshot screen
python - 客户端(python 程序)没有收到服务器(c 程序)返回的响应？
我有一个在服务器端工作的 UDP 套接字应用程序。为了测试服务器端，我编写了一个简单的 python 客户端程序，它发送消息“hello world how are you”。服务器随后应接收消息，将
python - 运行一个 shell 脚本，该脚本运行一个 python 程序，然后运行一个 R 程序
我有一个 shell 脚本，它运行一个 Python 程序来预处理一些数据，然后运行一个 R 程序来执行一些长时间运行的任务。我正在学习使用 Docker 并且我一直在运行 FROM r-base:l
python - 在 Linux 中从 Python 启动一个 c 程序，将一个大文本字符串作为参数传递给 c 程序
在 Linux 中。我有一个 c 程序，它读取一个 2048 字节的文本文件作为输入。我想从 Python 脚本启动 c 程序。我希望 Python 脚本将文本字符串作为参数传递给 c 程序，而不是将
在网页上调起本机C#程序
前言最近开始整理笔记里的库存草稿，本文是 23 年 5 月创建的了（因为中途转移到 onedrive，可能还不止）网页调起电脑程序是经常用到的场景，比如百度网盘下载，加入 QQ 群之类的我
VHDL 程序
对于一个类，我被要求编写一个 VHDL 程序，该程序接受两个整数输入 A 和 B，并用 A+B 替换 A，用 A-B 替换 B。我编写了以下程序和测试平台。它完成了实现和行为语法检查，但它不会模拟。尽
haskell 程序
module Algorithm where import System.Random import Data.Maybe import Data.List type Atom = String ty
求给定N个数的最小公倍数的C++程序
我想找到两个以上数字的最小公倍数求给定N个数的最小公倍数的C++程序最佳答案 int lcm(int a, int b) { return (a/gcd(a,b))*b; } 对于gcd，请查看
索引器的c#程序
这个程序有错误。谁能解决这个问题？ Error is :TempRecord already defines a member called 'this' with the same paramete
铁路围栏密码的C++程序
当我运行下面的程序时，我在 str1 和 str2 中得到了垃圾值。所以 #include #include #include using namespace std; int main() {
死兔子的C++程序
这是我的作业: 一对刚出生的兔子(一公一母)被放在田里。兔子在一个月大时可以交配，因此在第二个月的月底，每对兔子都会生出两对新兔子，然后死去。注:在第0个月，有0对兔子。第 1 个月，有 1 对兔子
十进制转十六进制的C++程序
我编写了一个程序，通过对字母使用 switch 命令将十进制字符串转换为十六进制，但是如果我使用 char，该程序无法正常工作!没有 switch 我无法处理 9 以上的数字。我希望你能理解我，因为我
连接MySQL的C++程序
我是 C++ 新手(虽然我有一些 C 语言经验)和 MySQL，我正在尝试制作一个从 MySQL 读取数据库的程序，我一直在关注这个 tutorial但当我尝试“构建”解决方案时出现错误。 (我正在使
Swift If 程序
仍然是一个初学者，只是尝试使用 swift 中的一些基本函数。有人能告诉我这段代码有什么问题吗？ import UIKit var guessInt: Int var randomNum = arc
折叠常量的C++程序
我正在用 C++11 编写一个函数，它采用 constant1 + constant2 形式的表达式并将它们折叠起来。 constant1 和 constant2 存储在 std::string 中，
2个矩阵相加和相乘的C++程序
我用 C++ 编写了这段代码，使用运算符重载对 2 个矩阵进行加法和乘法运算。当我执行代码时，它会在第 57 行和第 59 行产生错误，非法结构操作(两行都出现相同的错误)。请解释我的错误。提前致谢:
交换字符串中两个字符的C++程序
我是 C++ 的初学者，我想编写一个简单的程序来交换字符串中的两个字符。例如；我们输入这个字符串:“EXAMPLE”，我们给它交换这两个字符:“E”和“A”，输出应该类似于“AXEMPLA”。我在
确定三角形的C++程序
我需要以下代码的帮助: 声明 3 个 double 类型变量，每个代表三角形的三个边中的一个。提示用户为第一面输入一个值，然后将用户的输入设置为您创建的代表三角形第一条边的变量。将最后 2 个步

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 布局 Dojo 移动应用程序