Question

令人惊讶的是你开始使用这个框架的速度有多快，但我仍然坚持一个看似显而易见的事情。在我见过的所有布局中，包括Theme Roller，所有元素都有一个可爱的填充。出于某些奇怪的原因，在整个文档中，没有提到在UI和视口之间创建这个急需的空间。

如何定义这个？

在HTML桌面中，它就像

一样简单

body{margin:20px}

非常感谢任何帮助。

可以肯定的是，我甚至下载了Theme Roller上的默认设置，但没有任何反应。

我想知道jQuery mobile没有关于所有个别类的文档吗？或者至少在某个页面列出不同的类，以便人们可以使用它们？

下面我添加了一个我的意思的例子。它实际上形成了jQuery Mobiles自己的文档。让事情更加混乱的是，按钮呈现的按钮具有填充，而不是菜单。

为了澄清一点，jQuery Mobile有一个“内置”方法，可以简单地为事物添加圆角，你只需添加class="ui-corner-bl ui-corner-br" ...我正在寻找理想的方法。

enter image description here

Answer 1

由于jQuery mobile中的页面绝对定位，您将不得不添加一个位置：相对div包装器，带有边距。

<body>
  <div style='margin:20px; position:relative'>
    <div data-role="page">
    ...

我建议使用Google Chrome的检查工具或Firefox的firebug检查工具来帮助您理解和修改元素的CSS。

编辑：

通过发布的屏幕截图，显然边距实际上是填充，这是自然给出的。这个jquery文档页面特别缺少一个标题，所以你没有看到它的全宽。但是，如果向下滚动，则可以看到页脚是全宽的。

Answer 2

jQuery Mobile文档的部分问题在于它们会向您显示结果，但不会显示到达此处所需的标记。

首先，您应该很少直接将CSS类添加到标记中。大多数渲染都是由data- *属性控制的。要为列表视图提供圆角效果，请使用data-inset="true"。这也提供了填充。

这是标记http://jsfiddle.net/kiliman/W48wn/

的jsFiddle

<html>
<head>
    <title>jQuery Mobile Test</title>
</head>
<body>
<div id="page" data-role="page">
    <div data-role="content">
    <ul data-role="listview" data-inset="true">
        <li data-role="list-divider">Overview</li>
        <li><a href="#">Intro to jQuery Mobile</a></li>
        <li><a href="#">Quick start guide</a></li>
        <li><a href="#">Features</a></li>
        <li><a href="#">Accessibility</a></li>
        <li><a href="#">Supported Platforms</a></li>
    </ul>                        
    <ul data-role="listview" data-inset="true">
        <li data-role="list-divider">Components</li>
        <li><a href="#">Pages &amp; dialogs</a></li>
        <li><a href="#">Toolbars</a></li>
    </ul>                        
    </div>
</div>

Answer 3

您可以使用data-role =＆＃34;内容＆＃34;在您的data-role =＆＃34; page＆＃34;并且元素将不再填充屏幕的宽度，但周围有一个很好的标准20px边距。

Fiddle

<div data-role="page">
    <div data-role="content">
        <ul data-role="listview" data-inset="true">
            <li>1st Item</li>
            <li>2nd Item</li>
            <li>3rd Item</li>
        </ul>
    </div>
</div>

但数据角色=＆＃34;内容＆＃34;现在是deprecated。所以我们留下：

旧：

<div data-role="content">
</div>

新：

<div class="ui-content" role="main">
</div>

如何在jQuery Mobile中为元素添加填充

3 个答案: