子标题的jQuery移动标题背景颜色答案

【问题标题】：Jquery mobile header background color for sub headings子标题的jQuery移动标题背景颜色
【发布时间】：2013-01-28 08:57:58
【问题描述】：

我目前正在开发 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>

【问题讨论】：

你可以使用导航栏而不是多个标题jquerymobile.com/demos/1.2.0/docs/toolbars/docs-navbar.html

标签： javascript jquery html css jquery-mobile

【解决方案1】：

您可以轻松地在 jQuery Mobile 中使用多个 one 标头，下面是一个示例：

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>

【讨论】：