javascript - ヘッダーの複数のボタン

Question

jQuery Mobile フレームワークで次の効果​​を得ようとしています。

|-------------------------------------------------|
|[button1]      HeaderText/Image  [b1] [b2] [b3]  |
|-------------------------------------------------|

とは、ヘッダー[b1]の小さな画像ボタンです。[b2][b3]

これは現在でも可能ですか？

Answer 1

このように単純です

<div class="ui-btn-right">
    <a href="index.html" data-role="button" data-iconpos="notext"></a>
    <a href="index.html" data-role="button" data-iconpos="notext"></a>
    <a href="index.html" data-role="button" data-iconpos="notext"></a>
</div>

Answer 2

私は過去にこれに悩まされてきました。トリックは、すべてのリンクを強制し、そのリンクを(それぞれ)data-role="button"でコンテナにラップすることです。これにより、従来のヘッダー ボタンの配置とマークアップが処理されます。class="ui-btn-[left/right]"

<div data-role="header">
    <div class="ui-btn-left">
        <a href="#" data-role="button">Button1</a>
    </div>
    <h1>HeaderText/Image</h1>
    <div class="ui-btn-right">
        <a href="#" data-role="button" data-icon="gear" data-iconpos="notext">B1</a>
        <a href="#" data-role="button" data-icon="gear" data-iconpos="notext">B2</a>
        <a href="#" data-role="button" data-icon="gear" data-iconpos="notext">B3</a>
    </div>
</div>

Answer 3

可能であるかのように、このリンクをチェックしてください：

jQuerymobileFrameworkWebサイトのグループ化されたボタン。

Answer 4

これが私がやった方法です。親 div で使用されるクラスで十分であるため、スタイリングの一部は必要ない場合があります。

<div data-type="horizontal" style="top:10px;position:absolute;float:right;z-index:10;display:inline;" align="right" class="ui-btn-right"> 
        <a href="index.html" data-role="button" data-icon="settings" data-ajax="false">Team Call</a>
        <a href="index.html" data-role="button" data-icon="delete" data-ajax="false">Logout</a> 
    </div>

Answer 5

右側に独自の画像ボタンを使用するには、右側に div をフロートまたは配置してから、ボタンを追加する必要があります。

次に、これらの特定のボタンの jQuery モバイル スタイルをオーバーライドして、ライブラリによって自動的に追加される丸みを帯びたグラデーションのボタン スタイルを取得しないようにする必要があります。

#header {
    float: right;
}

#header .ui-btn-up-b,
#header .ui-btn-hover-b, 
#header .ui-btn-down-b 
#header .ui-btn-active { 
    border: 0px; 
    background: none;  
}