2

現在、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>
4

1 に答える 1

2

jQueryMobileでは複数のヘッダーを簡単に使用できます。例を次に示します。

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>
于 2013-01-28T09:14:12.870 に答える