Question

我们正在使用基于HTML5的iPad应用程序的图形界面jQuery Mobile的框架。因为我们正在为iPad创建一个应用程序，我们基本上需要像ipad一样的典型分屏：左侧是窄边栏，右侧是主要内容：

enter image description here

现在我的问题：我正在搜索代码来创建这个分割屏幕，我在jquerymobile文档中找不到任何相关内容 - 我是否错过了或者我不理解它？如果本网站上不存在分屏的代码，我在哪里可以找到相关的内容？

因为我没有发现任何与我需要的相关的东西，所以我尝试了另一种方法来获得这个分屏。所以我正在使用css样式表中的块：

解释：在jQuerymobile文档中，我找到了一个名为“content formatting＆gt; layout grid（column）”（http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/content/content-grids.html）的类别所以我想创建两个块来制作分屏。但我不需要50/50的分屏，但更需要20/80或30/70。我试着把它改成我的样式表：

.ui-grid-x { overflow: hidden; }
.ui-block-x, .ui-block-y { margin: 0; padding: 0; border: 0; float: left; min-height:1px;}

/* grid a: 20/80 */
.ui-grid-x .ui-block-x  { width: 20%; }
.ui-grid-x .ui-block-y { width: 80%; }
.ui-grid-x .ui-block-x { clear: left; }

原来是：

.ui-grid-a, .ui-grid-b, .ui-grid-c, .ui-grid-d { overflow: hidden; }
.ui-block-a, .ui-block-b, .ui-block-c, .ui-block-d, .ui-block-e { margin: 0; padding: 0; border: 0; float: left; min-height:1px;}


.ui-grid-a .ui-block-a, .ui-grid-a .ui-block-b { width: 50%; }
.ui-grid-a .ui-block-a { clear: left; }

有人知道我做错了什么吗？ 如何更改块的大小？这样做是否正确？非常感谢。

Answer 1

使用JQuery Mobile的网格布局，只需覆盖“ui-block-a”和“ui-block-b”上的“width”，即可根据需要拆分屏幕。

示例演示页结帐此博客 http://mdshannan1.blogspot.com/2011/08/jquery-mobile-split-screen-20-80-hack.html

Answer 2

如果您在jQM演示页面上查看源代码，您可以看到他们已经添加了class =“content-secondary”的div标签。这用于平板电脑布局上的侧栏。如果您在移动设备上使用较小的屏幕和平板电脑查看同一页面，它也会堆叠。

HTML：

<div data-role="page" id="jqm-home" class="type-home"> 
    <div data-role="content"> 


        <div class="content-secondary"> 

            <div id="jqm-homeheader"> 
                <h1 id="jqm-logo"><img src="docs/_assets/images/jquery-logo.png" alt="jQuery Mobile Framework" /></h1> 
                <p>A Touch-Optimized Web Framework for Smartphones &amp; Tablets</p> 
                <p id="jqm-version">Beta Release</p> 
            </div> 


            <p class="intro"><strong>Welcome.</strong> Browse the jQuery Mobile components and learn how to make rich, accessible, touch-friendly websites and apps.</p> 

            <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"> 
                <li data-role="list-divider">Overview</li> 
                <li><a href="docs/about/intro.html">Intro to jQuery Mobile</a></li> 
                <li><a href="docs/about/features.html">Features</a></li> 
                <li><a href="docs/about/accessibility.html">Accessibility</a></li> 
                <li><a href="docs/about/platforms.html">Supported platforms</a></li> 
            </ul> 

        </div><!--/content-primary-->   

        <div class="content-primary"> 
            <nav> 


                <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b"> 
                    <li data-role="list-divider">Components</li> 
                    <li><a href="docs/pages/index.html">Pages &amp; dialogs</a></li> 
                    <li><a href="docs/toolbars/index.html">Toolbars</a></li> 
                    <li><a href="docs/buttons/index.html">Buttons</a></li> 
                    <li><a href="docs/content/index.html">Content formatting</a></li> 
                    <li><a href="docs/forms/index.html">Form elements</a></li> 
                    <li><a href="docs/lists/index.html">List views</a></li> 

                    <li data-role="list-divider">API</li> 
                    <li><a href="docs/api/globalconfig.html">Configuring defaults</a></li> 
                    <li><a href="docs/api/events.html">Events</a></li> 
                    <li><a href="docs/api/methods.html">Methods &amp; Utilities</a></li> 
                    <li><a href="docs/api/mediahelpers.html">Responsive Layout</a></li> 
                    <li><a href="docs/api/themes.html">Theme framework</a></li> 


                </ul> 
            </nav> 
        </div> 



    </div> 

    <div data-role="footer" class="footer-docs" data-theme="c"> 
            <p>&copy; 2011 The jQuery Project</p> 
    </div>  

</div>

jQuery mobile - Blocks＆amp;适用于iPad的分屏

2 个答案: