javascript jQuerymobile - iPad 版块和分屏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6689889/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuerymobile - Blocks & Splitscreen for iPad
提问by Kirinriki
We are working with the framework of jQuery Mobilefor the graphical interface of our iPad app, based on HTML5. Because we're creating an app for the iPad, we essentially need the typical split-screen like it is on ipad: A narrow sidebar on the left side and the main content on the right side:
我们正在使用jQuery Mobile框架为我们的 iPad 应用程序的图形界面，基于 HTML5。因为我们正在为 iPad 创建一个应用程序，所以我们本质上需要像在 iPad 上一样典型的分屏：左侧是一个狭窄的侧边栏，右侧是主要内容：
Now my question: I'm searching for the code to create this splitted screenand I do not find anything for this in the jquerymobile documentation– Did I miss it or didn't I understand it? If the code for the splitscreen doesn't exist on this website, where can I find something related?
现在我的问题是：我正在搜索创建这个分屏的代码，但我在 jquerymobile 文档中没有找到任何相关内容——我是否错过了它或我没有理解它？如果这个网站上没有分屏的代码，我在哪里可以找到相关的东西？
Because I didn't find anything related to what I need, I tried another way to get this splitscreen. So I was working with blocks in the css stylesheets:
因为我没有找到任何与我需要的东西相关的东西，所以我尝试了另一种方法来获得这个分屏。所以我在 css 样式表中使用块：
for explanation: In jQuerymobile documentation, I found a category with the name "content formatting>layout grid (column)"( http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/content/content-grids.html) So I thought about creating two blocks for making the splitted screen. BUT I don't need a splitted screen with 50/50, but much more 20/80 or 30/70. I tried to change it into my stylesheet:
解释：在jQuerymobile文档中，我找到了一个名为“内容格式>布局网格（列）”的类别（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; }
the original was:
原文是：
.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; }
Does anybody know what I did wrong? How to change the size of the blocks?Is it the right way to do it like this? Thanks alot in advance.
有谁知道我做错了什么？如何改变块的大小？这样做是正确的方法吗？非常感谢提前。
采纳答案by Intesar Mohammed
Use JQuery Mobile's Grid Layout and just override "width" on "ui-block-a" and "ui-block-b" to split screen as per your need.
使用 JQuery Mobile 的网格布局，只需覆盖“ui-block-a”和“ui-block-b”上的“宽度”即可根据需要分屏。
for sample demo page checkout this blog http://mdshannan1.blogspot.com/2011/08/jquery-mobile-split-screen-20-80-hack.html
示例演示页面结帐此博客 http://mdshannan1.blogspot.com/2011/08/jquery-mobile-split-screen-20-80-hack.html
回答by Phill Pafford
If you view the source on the jQM Demos page you can see they've added the div tags with the class="content-secondary". This is used for the side bar on a tablet layout. It will also stack if you view the same page on a mobile device with a smaller screen then a tablet.
如果您查看 jQM Demos 页面上的源代码，您会看到他们添加了带有 class="content-secondary" 的 div 标签。这用于平板电脑布局上的侧栏。如果您在屏幕小于平板电脑的移动设备上查看同一页面，它也会堆叠。
HTML:
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 & 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 & 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 & 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>© 2011 The jQuery Project</p>
</div>
</div>
