javascript - jQuery mobile - 适用于 iPad 的 block 和分屏

Question

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

现在我的问题是:我正在搜索代码来创建这个分屏，但我在 jquerymobile 文档中没有找到任何相关内容——我是漏掉了还是没理解？如果这个网站上没有分屏的代码，我在哪里可以找到相关的东西？

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

解释:在 jQuerymobile 文档中，我找到了一个名为 "content formatting>layout grid (column)" 的类别(http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/content/content-grids.html)所以我想创建两个 block 来制作分屏。但是我不需要 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; } 

有人知道我做错了什么吗？ 如何改变 block 的大小？这样做正确吗？提前致谢。

Answer 1

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

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