2

jQuery Mobile .js を jQuery Mobile .css と一緒に使用する場合、リンク ボタンなどの既定のスタイルをカスタマイズする最適な方法は何ですか?

jQM を使用すると、次のコードを使用して単純なリンクをボタンに変えることができます。

<a href="index.html" data-role="button">Link button</a>

data-role="button" を使用すると、jQM はリンクにクラスを追加できるため、次のようにモバイル ボタン タッチ対応にスタイル設定できます。

<a href="index.html" 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 
ui-btn-corner-all"><span class="ui-btn-text">Link button</span></span></a>

ui-btn-up-c クラスなどの jQM css ファイルを実際に編集しても問題ありませんか? それとも、おそらく外部スタイルシートで、スタイルを何らかの方法でオーバーライドする方がよいでしょうか?

いくつか懸念があります。jQMはスタイルシートを多用しているように見えるので、jQM.cssを直接編集することで機能の一部を壊すことができるかどうか疑問に思っています。

また、更新時に問題が発生しますか? jQM は、メインの jQM スタイルシートへの編集を上書きする新しいバージョンが出たときに、新しいスタイルシートをリリースしますか?

基本的に私が求めているのは、jQuery Mobile の組み込みテーマを編集するにはどうすればよいですか?

ありがとう、そしてあなたの答えを楽しみにしています:)

4

3 に答える 3

3

はじめに

従来の jQuery Mobile を変更したい場合、CSSすべては何をしたいかによって異なります。

テーマローラー

古典的な方法は、まったく新しいテーマのセットを作成するか、既存のものに追加することです。これは、jQuery Mobileテーマ ローラーを介して行われます。それを開くと、3 つのテーマが自動的に作成され、必要に応じて変更できます。または、現在のテーマをインポートして、CSSさらにいくつかのテーマを追加することもできます (完全な外観を変更したい場合は、これがおそらく最良の解決策です)。

カスタムCSS変更

このソリューションには、少し手腕が必要です。最初に、何をしているのか 100% 確信がない限り、オリジナルを変更しないでください。CSSたとえば、デフォルトのボタン クラスを変更すると、多くのボタン クラスを使用する他のウィジェットにも影響します。

正しい方法は、カスタムCSSファイルで単一/複数の要素を変更することです。このようにして、元のCSSファイルはそのまま残り、新しいファイルはいつでも変更/削除できます。これを行うには、Chrome ウェブマスター ツールまたは Firebug と呼ばれる追加のプラグイン (Chrome および FireFox 用) を使用する必要があります。他にもいくつかの解決策がありますが、この 2 つが最も一般的に使用されています。

考えるべき問題

このソリューションですべてがうまくいくわけではありません。たとえば、従来のタグ ボタンは簡単に変更できます。これにより、同じタグが将来のスタイルの jQuery ボタンの親として保持されます。ただし、ボタンが入力タグから作成されている場合は、次のようになります。

<input type="text" value="Some value" id="change-me"/>

#change-me id を使用してその を修正することはできませんCSS。主に、この入力は将来のボタンの親タグではないため、jQuery Mobile がスタイルを設定すると、ボタンの内部部分になります。次のようになります。

<div class="ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-c">
    <input type="text" id="change-me" value="Some value" class="ui-input-text ui-body-c"/>
</div>

これを修正するには、その入力を別の div 要素でラップします。id を input から div 要素に移動し、それを使用して内部CSSスタイルを変更します。

CSSスタイルを正しくオーバーライドする方法

これは、この StackOverflow グループで最もよく寄せられる質問の 1 つです。定義済みのルールを変更するときは、キーワードCSSを使用する必要があります。!important通常、変更はそれなしでは機能しません。たとえば、入力ボタンのスタイルの背景 (前の例から div でラップ) を変更する場合は、次のようにします。

#change-me .ui-input-text {
    background-color: red !important;
}

他に何も機能しない場合は、元の CSS ファイルを変更します

jQuery Mobile は、1 つまたは 2 つのCSSファイルを持つことができます。1 つのファイルを使用する場合、テーマと構造の両方が含まれます。または、2 つのファイルに分割することもできます。CSS直接変更したい場合に便利です。テーマは、構造ファイルCSSに影響を与えることなく、テーマ ローラーに簡単にインポートおよびエクスポートできます。CSS

CSS最後に、元の構造ファイルを変更することによってのみ変更できるものがあります。たとえば、jQuery Mobile は恐ろしい青色のグロー効果を使用して、要素が押されたことを示します。CSS構造ファイルから直接のみ削除できます。

于 2013-07-10T07:02:33.880 に答える
1

スタイルを変更するだけの場合は、jQuery Mobile テーマローラーを使用できます。

http://jquerymobile.com/themeroller/index.php

それ以外の場合は、jQuery モバイル スタイルシートを直接編集するのではなく、別のスタイルシートを使用することをお勧めします。

訪問者に提供するファイルの数を減らしたい場合は、両方のスタイルシートを圧縮してから、スタイルをそのスタイルの下にプロダクション コピーとして挿入します。そうすれば、本番用に圧縮して結合したままにしておくことができますが、後で簡単にアップグレードしたり、開発を使いやすくするために別々に保つことができます。

于 2013-07-10T06:00:23.593 に答える