1

jQueryMobileテーマにカスタムクラスを追加しようとしています。CSSは次のようになります。

.ui-icon-form-ok-f {
    background-color: #f09000 !important;
    data-icon: check !important;
}

しかし、どうすればjQuery Mobileにこれを認識させることができますか？ありがとう。

4

2 に答える 2

1

jqmにカスタムアイコンスタイルを認識する方法

任意の要素ごとに

ボタンを設定[data-icon=AAA]すると、jqmが<span class="ui-icon-AAA">ボタンの内側に作成されます。

あれは：

<a data-role="button" data-icon="form-ok-f">custom icon button</a>

このhtmlをロードすると、jqmは次のように作成します。

<a href="#" data-role="button" data-icon="form-ok-f" 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-icon-left ui-btn-up-c">
   <span class="ui-btn-inner ui-btn-corner-all">
      <span class="ui-btn-text">custom icon button</span>
      <span class="ui-icon ui-icon-form-ok-f ui-icon-shadow">&nbsp;</span>
   </span>
</a>

したがって、jqmはカスタムアイコンクラスを認識できます。

.ui-icon-form-ok-f {
    background-color: #f09000 !important;
    background-position:-252px 50% !important; /* this mean 'data-icon="check"' on css */
}​​​​

このように適用することで、ページは「ui-icon-alt」をロードできます

<a data-role="button" data-icon="check ui-icon-alt">custom icon button</a>

Jqmは、白のアイコンではなく黒のアイコン（Altアイコンの色）をレンダリングします。

任意のテーマごとに

いずれかのテーマごとにアイコンを「カスタマイズ」する場合は、次のようにjsをロードする必要があります。

$(function(){
 var $alttheme = new Array( "f", "g" );　// this arr means 'data-theme="f", data-theme="g"' 
 var at = new Array();
 for( t in $alttheme ){
  at.push(':jqmData(theme="' + alttheme[t] + '"):jqmData(icon="check") > span > .ui-icon');
 }
 $(at.join()).addClass('ui-icon-"YOUR CUSTOM NAMES"');
});

*お客様のカスタム名（例：form-ok、form-ng ...）

また

$(function(){
 $(':jqmData(theme="f"):jqmData(icon="check") > span > .ui-icon').addClass('ui-icon-form-ok-f');
 $(':jqmData(theme="g"):jqmData(icon="check") > span > .ui-icon').addClass('ui-icon-form-ok-g');
});

前者は「themeg」と「themef」のアイコンに同じクラスを追加し、後者は「themeg」と「themef」のアイコンにそれぞれ別のクラスを追加します。

やっと

いくつかのサンプルを準備する必要があります。

于 2012-07-05T11:56:54.013 に答える
0

、、、 ...など.ui-bar-fの他のクラスもオーバーライドしてから、各タグの属性を使用して、この新しいテーマをコンポーネントに使用することを指定する必要があると思いますが、テストできませんでした。.ui-body-f.ui-btn-up-fdata-theme="f"

詳細については、jQuery-テーマに関するモバイルドキュメントをご覧ください。

それが役に立てば幸い！

于 2012-05-29T14:45:40.737 に答える