Fatal编程技术网
  • javascript/
  • Javascript 布局Dojo移动应用程序

Javascript 布局Dojo移动应用程序

javascript mobile dojo

Javascript 布局Dojo移动应用程序,javascript,mobile,dojo,Javascript,Mobile,Dojo,Hi， 有没有人有过部署dojo移动应用程序的经验？我想在我的应用程序中有一个标题部分，在一个页面上，标题下面有一个子导航，后面是一个可滚动的内容部分，最后是底部的主导航。所有内容都应该一次显示，这样您就不需要滚动来访问任何导航。问题是，如果所有内容都可见，我将无法再看到可滚动内容部分的所有内容，因为导航位于可滚动内容部分上方，或者如果可滚动内容部分完全可读，我必须滚动以访问每个导航。有人知道如何完成这个布局吗？这是我的代码，也是一个你可以看的例子 例如： 代码： 我希望这样的布局在Dojo m

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

例如：

代码：

我希望这样的布局在Dojo mobile中是可能的

谢谢你的支持！！！
拉尔夫

你就快到了。只需使用
fixed=“top”
和
fixed=“bottom”

由于页脚已经位于ScrollableView之外，只需添加
fixed=“bottom”
。根据文档，您需要在两个标题元素上添加
fixed=“top”
，但如果没有这些元素，它似乎可以正常工作

这里有更多信息（特别是，请参见页面底部的示例）：.

更详细地说明您想要实现的目标。也许画一幅画吧。很明显，如果你的页眉+内容+页脚（你称之为导航部分）比屏幕的高度长，那么其中一个，必须滚动，你不能全部显示。嗨，Stephen，我添加了更多的细节和图片。希望这有助于理解我的努力，有人可以帮助我：-）这是一个非常简单/标准的移动布局，可以用CSS快速完成。问题是，Dojo Mobile似乎为每个具有dojoType视图或ScrollableView的div分配了一个高度，即视口的高度。我想知道是否还有其他一些属性可以让dojo在不使用javascript的情况下为div分配动态高度。因为正如你所说，这是一个非常简单和基本的移动布局，我无法想象如果不使用额外的javascript，这是不可能的。顺便说一句，Css不起作用，因为高度是由框架在运行时通过javascript设置的。1）其他Dojo小部件（如dijit）重量太重，即下载的代码太多，2）数字不总是在触摸屏上运行（1.6之前），3）dijit采用鼠标和键盘模式，而不是触摸，所以你没有很好的滑动效果等（1.7之前）。dojox.mobile的重量要轻得多。非常感谢您的回答！在这种情况下，fixed=“top”和fixed=“bottom”的问题是，标题下仍然有子导航，需要空间。我没有发现任何一个星座，其中的内容是完全可滚动/可读的，而没有任何东西覆盖。如果所有内容都在屏幕上，或者如果内容是完全可滚动/可读的，那么页脚或页眉部分的导航部分不在实际的视口中。你知道怎么处理吗？没有子导航，这就是解决问题的方法！但是，你的朋友呢？谢谢我将
fixed=“top”
添加到标题
heading-1
和选项卡栏
top-nav
。在Safari中运行，用户代理设置为iPhone Safari，它对我来说运行正常。是的，除了一个事实，顶部导航位于标题1的前面，因此您只能看到顶部导航，而不能再看到标题1。这是我唯一需要解决的问题：-）啊，我忘了提到我正在使用Dojo1.7b2。移动小部件在Dojo1.7中得到了相当大的更新。你看到的是1.7中的一个bug。哦，好吧，有趣的是：-）1.7b2为你工作？上一次我尝试它时，它破坏了我的整个布局：你知道最终/稳定版本1.7是什么时候发布的吗？谢谢：） 
 <!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>

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