2

このように定義された各ページのヘッダーに、右のログオフ ボタンがあります。

<div data-role="page" id="displaySchedule" data-title="Display Schedule">
<div data-role="header" data-theme="a">
<a href="#home" data-icon="home" data-iconpos="notext"></a>
<h1>Schedule</h1>
<div class="ui-btn-right">
<a class="logoffButton" data-role="button" id="logoffButton" href="#logout" data-icon="delete" data-iconpos="notext"></a>
</div>
.....

これは 1.1.1 ではうまくいきました。ただし、ページが 1.2.0-Beta-1 で表示されると、ヘッダーは次のようになります (X アイコンがホーム ボタンの水平線 (高さの約 1/2) とスケジュールという単語の下にあることに注意してください)。 ）。1.1.1 では、3 つすべてが正しく並んでいました。

ここに画像の説明を入力

もちろん、どんな助けでも大歓迎です。

4

1 に答える 1

2

実際、div 内に右ボタンを含めるべきではありません。

試してみてください:

<html>
    <head>
        <meta name='viewport' content='minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no'/>

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile.structure-1.2.0-beta.1.min.css" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile-1.2.0-beta.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile-1.2.0-beta.1.min.js"></script>

    </head>

    <body>

        <div data-role="page" id="displaySchedule" data-title="Display Schedule">
            <div data-role="header" data-theme="a">

                <a href="#home" data-icon="home" data-iconpos="notext"></a>
                <h1>Schedule</h1>
                <a class="logoffButton" data-role="button" id="logoffButton"
                    href="#logout" data-icon="delete" data-iconpos="notext"></a>

            </div>
        </div>

    </body>
</html>

スクリーンショット

ヘッダー内に複数の整列ボタンを追加する場合は、次の操作を実行できます。

  • ヘッダー タイトルの右(左) 側に配置されるボタンのクラスclass="ui-btn-right"(またはclass="ui-btn-left") をボタン/リンクに含めます。<a>

  • CSS で遊んで、margin-rightおよび/またはmargin-left異なるボタンを同じ側 (右/左) から分離します。それ以外の場合、ボタンは積み重ねられます。

いくつかのボタンを含む簡単な例を次に示します。

<html>
    <head>
        <meta name='viewport' content='minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no'/>        

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile.structure-1.2.0-beta.1.min.css" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile-1.2.0-beta.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile-1.2.0-beta.1.min.js"></script>                        
    </head>

    <body>
        <div data-role="page" id="page_1">
            <div data-role="header" data-theme="a">

                <!-- 1st LEFT BUTTON FROM THE LEFT -->
                <a href="#" data-icon="arrow-l" data-iconpos="notext" 
                    class="ui-btn-left"></a>

                <!-- 2nd LEFT BUTTON FROM THE LEFT -->
                <a href="#" data-icon="arrow-r" data-iconpos="notext" 
                    class="ui-btn-left" style="margin-left: 30px"></a>

                <!-- HEADER TITLE -->   
                <h1>hello</h1>

                <!--  1st RIGHT BUTTON FROM THE RIGHT -->
                <a href="#" data-icon="gear" data-iconpos="notext" 
                    class="ui-btn-right"></a>

                <!--  2nd RIGHT BUTTON FROM THE RIGHT -->
                <a href="#" data-icon="arrow-r" data-iconpos="notext" 
                    class="ui-btn-right" style="margin-right: 30px;"></a>

                <!--  3rd RIGHT BUTTON FROM THE RIGHT -->
                <a href="#" data-icon="arrow-l" data-iconpos="notext" 
                    class="ui-btn-right" style="margin-right: 60px;"></a>

            </div>
        </div>
    </body>
</html>

上記の例のスクリーンショットを次に示します。

  • 縦向きモードの場合:

ポートレートモード

  • 横向きモードの場合:

横長モード

于 2012-10-04T08:35:11.610 に答える