我目前正在开发 jquery 自定义移动模板。我需要知道我们可以在页面中多次使用 data-role="header" 标签吗？因为在我的页面中，根据页眉和页脚，我在中间也有几个。例如标题应该用背景颜色包裹，即使我使用它也会验证 http://validator.w3.org/mobile/ 。我还尝试将以下 jquerymobile 类应用到 div class="ui-bar" 但它没有按我的预期工作，例如:(不读取背景颜色)。
或者，我可以定义一个自定义类，但我需要知道 jquery 是否已经定义了一个与我的要求类似的类。
仅供引用:这是我的 HTML 示例
<div data-role="page" data-theme="a">
<header data-role="header">
<div>Main Heading</div>
</header>
<!-- logo -->
<hr/>
<div class="ui-grid-b">
<div class="ui-block-a">
<a href="#">
<div class="h_bag"></div>
BAG (0)
</a>
</div>
<div class="ui-block-b">
<a href="#">
<div class="lust_list"></div>
LUST LIST
</a>
</div>
<div class="ui-block-c">
<a href="#">
<div class="search_size"></div>
SEARCH SIZE
</a>
</div>
</div>
<!-- header options -->
<div class="ui-bar">
<h1>This Sub heading should to wrapped with background colour</h1>
</div>
</div>
最佳答案
您可以轻松地在 jQuery Mobile 中使用多个 header ，下面是一个示例:
http://jsfiddle.net/Gajotres/UGVwW/
每个元素的背景颜色也可以轻松实现，但您需要使用 !important 来实现它:
#second-header {
background: red !important;
}
这是一个 HTML 示例:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
<a href="#second" class="ui-btn-right">Next</a>
</div>
<div data-theme="a" data-role="header" id="second-header">
<h3>
First Page
</h3>
<a href="#second" class="ui-btn-left">Next</a>
</div>
<div data-role="content">
<a href="#" data-role="button" id="test-button">Test button</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
关于javascript - Jquery移动标题子标题的背景颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14558520/