ios - 如何使用phonegap在jquery mobile中自定义data-role = header？

Question

我必须使用自定义图像背景和按钮自定义标题部分，我尝试通过覆盖其“.ui-header”但无法正常工作。
那么我该如何解决这个问题？

<div data-role="page" id="categories" data-title="categories" data-theme="b">
<div data-role="header">
    <!-- Header Content -->
</div>

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

<div data-role="footer">
    <!-- Footer Content -->
</div>
</div>

Answer 1

如果你想在没有 id 的情况下这样做，你可以这样做：

.ui-page-theme-a .ui-header.ui-bar-inherit {
    <css here>
}

这适用于 jqm 1.4 及更高版本。请注意，如果您使用不同的页面主题 (b) 或自定义主题，则需要更改 -a 部分。

Answer 2

Header 得到一个 ui-header 和 ui-bar-a 的类，所以覆盖 ui-header 是行不通的。一个更简单的方法是给你的标题 div 一个 ID，然后在 CSS 中设置背景图像：

<div data-role="header" id="customHeader">
    <h1>My Custom Header</h1>
</div>

#customHeader {
     background-image: url('http://www.therabreath.com/images/emails/optin/stripes.jpg');
}

这是一个演示