jquery-mobile - jQuery Mobile ボタンの高さを増やす

Question

jQuery Mobile で作成したいくつかのボタンの高さを上げたいのですが、次のような CSS が機能しません。

a[data-role="button"] {
  height: 200px;
  font-size: 48px;
}

これを行う別の方法はありますか？おそらく、jQuery を使用して新しい高さを動的に適用し、関数を呼び出してボタンを再描画しますか?

score 11 · Accepted Answer

これは私のjQueryモバイルアプリで機能しました：

.ui-btn { height: 200px; font-size: 48px; }

ただし、jquery モバイル css がロードされた後に css が発生していることを確認してください (具体的には jquery.mobile.structure.css )。

それでも問題が発生する場合は、ボタンをコンテナーにラップして使用してみてください。

#container-id .ui-btn { height: 200px; font-size: 48px; }

それでも問題が発生する場合は、いつでも (推奨されません) !important ステートメントを使用できます。

.ui-btn { height: 200px !important; font-size: 48px !important; }

しかし、繰り返しになりますが、「重要な」ステートメントは本当にお勧めできません。通常、デバッグ中に正しい要素を選択していることを確認するためのサニティチェックとしてのみ使用します。

編集：

動的ルートが必要な場合:

jQuery コード:

$(document).ready(function() {
  styles = { 'height': '200px', 'font-size': '48px' };
  $('.ui-btn').css(styles);
});

動作するはずですが...考えてみると、jqueryモバイルはJavaScript処理を行っていると思います(現在のページのURLへの参照を使用して、マークアップをdivでラップしていることがわかります)。

score 4 · Accepted Answer

以下のコードは私のために働いた。ボタンの場合:

    <a href="index.html" data-role="button" data-theme="d" class="big">Big button</a>

次に、big および ui-btn-inner は次のスタイルを持つことができます。

    .big { height: 80px;}
    .big .ui-btn-inner { padding-top:25px; }

テキストが中央揃えに見えるようにパディングを追加しました。このようにして、ボタンのスタイルはグローバルに変更されず、ボタンを変更したい場所をコントロールできます。それが誰かを助けることを願っています:)

2 に答える 2