0

JQueryMobileアプリを持っています。「ヘッダー」で使用されているボタンのスタイルを設定したいと思います。現在、私は次のものを持っています：

.my-btn-hdr { text-transform:uppercase; background-color:blue; color:white; min-height:33px; width:93px; }
...

<div id="myPage" data-role="page" data-dom-cache="false">
  <div data-role="header" data-position="fixed">
    <a href="#" data-icon="arrow-l" data-iconpos="notext" data-direction="reverse" class="ui-btn-left jqm-back">Back</a>
    <h1>MyApp</h1>
    <a id="saveButton" href="#" class="ui-btn-right my-btn-hdr">Save</a>
  </div>

  <div data-role="content">        
    ...
  </div>
</div>

ページがレンダリングされると、ui-btn、ui-btn-up-a、ui-shadow、およびui-button-corner-すべてのcssクラスが追加されていることに気付きました。また、data-corners = "true"、data-shadow = "true"、およびdata-iconshadow="true"属性が追加されていることにも気づきました。

jqueryモバイルアプリのヘッダーにあるボタンのスタイルをカスタマイズするにはどうすればよいですか？

4

2 に答える 2

2

知っておく必要のあることはすべて、公式ドキュメントにあります：http: //api.jquerymobile.com/button/

たとえば、ボタンのテーマを変更する場合は、次の関数を使用します。

$( "a" ).buttonMarkup({ theme: "c" });

これが実際の例です：http：//jsfiddle.net/Gajotres/eqLVV/

ドキュメントに記載されていないものがある場合は、cssを使用して変更する必要があります。これは、jQMがレンダリングした後のボタンの構造です。

<a href="#" data-role="button" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c">
    <span class="ui-btn-inner">
        <span class="ui-btn-text">Anchor</span>
    </span>
</a>

最後に、cssを手動で変更する必要がある場合は、何かが機能していない場合に備えて、css行の最後に！importantを常に追加してください。

たとえば、これを使用してボタンのテキストの色を変更できます。

#btn1 .ui-btn-inner .ui-btn-text {
    color: red;
}

そしてここに例があります：http：//jsfiddle.net/Gajotres/k5jty/

于 2013-03-25T15:42:31.537 に答える
0

ボタンにカスタムクラスを指定してから、変更または削除するスタイルを上書きできます。

<a data-role="button" class="my-button">

CSS：

.my-button {
    background-image: url('images/my-button.png') !important;
}
于 2013-03-25T15:38:56.650 に答える