2

最近、jquery モバイル SDK を使用して Web アプリを作成しました。すべてが魅力のように機能しますが、32px ではなく 44px にサイズ変更された navbar に合わせて、navbar ボタンのサイズを変更したいと考えています。次のコードを使用してボタンを作成しました。

<div data-role="header" data-position="fixed" class="header-custom">
        <a href="#" class="ui-btn-right" data-icon="refresh" data-iconpos="notext" id="refreshButton">Refresh</a>
    </div><!-- /header -->

私の目的は、ボタン（およびアイコンも！:)）のサイズを変更して、新しいカスタムヘッダーに再度収まるようにすることです。

4

2 に答える 2

2

残念ながら、アイコンを鮮明に保ちたい場合は、カスタム アイコンを作成する必要があります。

指示を参照してください:
http://jquerymobile.com/test/docs/buttons/buttons-icons.html

于 2013-01-09T13:43:22.057 に答える
2

アイコンのサイズを変更する可能性があります。jquery.mobile.icons.min.css ファイルを調べてください。svg 文字列として定義されたアイコンがあります。編集したいクラスをコピーして、独自の custom.css ファイルに書き込みます。今探します

width%3D%2214px%22%20height%3D%2214px

svg文字列で、14を好きなものに変更してください! 新しい css クラスの最後に、background-image に「!important」を追加して、既存の jquery クラスをオーバーライドすることを確認できます。

a 要素からアイコンのサイズを変更する場合は、追加のクラスを追加する必要があります。(この場合、svg String を 50px に変更します)

.icon50px {     
    height: 50px !important;
    width: 50px !important;
    font-size: 13px !important; }

.icon50px:after {
    height: 50px !important;
    width: 50px !important;
    margin-left: -25px;
    margin-top: -25px; }

楽しむ ;）

于 2014-12-12T14:20:48.413 に答える