1

したがって、ページのクラスをオーバーライドしてボタンのパディングを削除する方法について詳しく説明します。Jquery Mobile でボタンのパディングを調整できますか?

しかし、どうすればこれを取ることができますか:

.ui-btn-inner {
padding: 0;}

そして、それを 1 つのボタンに選択的に適用します。

<button data-icon="false" onclick="alert('clicked me')">Button Name</button>

このようなことをしてもうまくいきません:

<button style="padding:0" data-icon="false" onclick="alert('clicked me')">Button Name</button>

考え？クリエイティブなソリューション?

ありがとう

4

3 に答える 3

5

そのボタンに新しいクラスを設定してから、以下のようにサブクラスを変更してください。

HTML:

<a href"#" data-role="button" class="myClass">Text</a>

CSS:

.myClass .ui-btn-inner{
    padding: 0px;
}
于 2012-11-03T17:04:34.723 に答える
3

私はついに解決策を見つけたと思います（しばらくの間それを理解しようとしていました）！

CSS の「カスケード」部分を使用してください。たとえば、ボタンがテーマ「a」を使用している場合、.ui-btn-inner のパディング ルールをテーマ「a」のボタンのみに適用できます。変更しようとしているクラスの前に、themed プロパティを付けてください。

HTML:
<a href"#/mypath" data-role="button" data-theme="a">Touch Me</a>

CSS:
.ui-btn-up-a .ui-btn-inner,
.ui-btn-hover-a .ui-btn-inner,
.ui-btn-down-a .ui-btn-inner
{ padding: 0px; }

ご覧のとおり、これはボタンの状態ごとにルールを作成する必要があることを意味します。そうしないと、ボタンに触れたときにパディングが一瞬だけ返されます。

パディングを維持するボタンに別のテーマ (「b」など) を適用するだけです。このタイプの CSS 継承を使用すると、ボタンを完全に狂わせることができます。

無制限の数のテーマを持つことができます。テーマ ローラーに移動し、アルファベットのすべての文字の既定のテーマを作成します。次に、それらを CSS で心ゆくまでオーバーライドします。

仕事のプロジェクトで jQuery Mobile を使おうとしたとき、これが大きな問題でした。彼らはすでに UI 設計を行っており、私は jQuery Mobile をそれと完全に一致させることを任されました。

于 2012-09-26T16:42:44.960 に答える
0

アイコンを境界線や背景なしで表示したかったので、例を使用しましたが、アイコンが上に移動したため、これを使用して再配置しました:

.ui-btn-up-mytheme .ui-btn-inner, 
.ui-btn-hover-mytheme .ui-btn-inner, 
.ui-btn-down-mytheme .ui-btn-inner {
margin-top: 2px;
border: none;
}

HTML マークアップ:

<a href="schedules" data-rel="back" data-icon="arrow-l" data-iconpos="notext"
 data-theme="mytheme" data-shadow="false"  ></a>
于 2013-03-30T23:58:43.187 に答える