CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-mobile
FR STAR
FR STAR

Reputation: 702

Jquery mobile header background color for sub headings

I'm currently developing jquery custom mobile template. I need to know can we use data-role="header" tag more than once in a page ? Because in my page as per the header and footer I've couple of in the middle also. For example headings should be wrapped with background color and even though I used will it be validate http://validator.w3.org/mobile/. Also I tried applying following jquerymobile class to a div class="ui-bar" but it's not working as I expected eg :(not reading the background color).

Alternatively I can define a custom class but I need to know have jquery already defined a class something similar to my requirement.

FYI: here is my HTML example

<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>

Upvotes: 2

Views: 4518

Answers (1)

Gajotres
Gajotres

Reputation: 57309

You can easily use more the one header in jQuery Mobile, and here's an example:

http://jsfiddle.net/Gajotres/UGVwW/

Background color of every element can also be easily achieved but you will need to fore it with !important:

#second-header {
    background: red !important;      
}

Here's an HTML example:

<!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>

Upvotes: 2

Related Questions