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

Question

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

<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

标题获取一类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'); 
} 

这里是一个DEMO

Answer 2

如果你想这样做，没有ID你可以这样做：

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

这适用于jqm 1.4及以上版本。请注意，如果您使用的是不同的页面主题（b）或者可能是自定义的主题，则需要更改-a部分。