1

次の方法で、 div内にhtmlボタンを配置しました。

<div class="ui-state-highlight">
    <button type="button" class="ui-button ui-state-default ui-corner-all ui-button-text-icon-primary">
        <!-- first span -->
        <span class="ui-button-icon-primary ui-icon ui-icon-disk"></span>
        <!-- second span -->
        <span class="ui-button-text">Save</span>
    </button>
    <!-- third span -->
    <span class="ui-icon ui-icon-info"></span>
    <strong>All</strong> form fields are required.
</div>

divがクラスに割り当てられているためui-state-highlight、ボタンのアイコンの色が青に変わりました。

アイコンの色をデフォルト（黒）の色に戻す方法はありますか？

さらに、の効果（色）を得るには、 3番目のスパンのアイコンが必要ですui-state-highlight。

最初のスパンui-state-default（アイコンを含む）だけにを適用しようとしましたが、期待した効果が得られませんでした。

4

3 に答える 3

1

ui-state-highlightコンテナー ( divs や spansなど) に適用されるクラスを書き直すと、問題が修正されます。

于 2013-03-04T09:00:24.960 に答える
0

デフォルト（黒）のアイコンの色（http://code.jquery.com/ui/1.9.2/themes/base/images/ui-icons_2e83ff_256x240.png）の画像へのパスになる新しいスタイルを追加できます

編集：

または、外側の div クラスを ui-state-default に変更します。

<div class="ui-state-default">
    <button type="button" class="ui-button ui-state-default ui-corner-all ui-button-text-icon-primary">
        <span class="ui-button-icon-primary ui-icon ui-icon-disk"></span>
        <span class="ui-button-text">Save</span>
    </button>
</div>
于 2013-03-01T10:20:55.463 に答える
0

次のように、自分でスタイルを定義します。

.ui-icon-custom { background-image: url(images/custom.png); }

次に、次のように .button() を呼び出すときに使用します。

$('#button').button({
  label: 'Test',
  icons: {primary: 'ui-icon-custom', secondary: null}
});

これは、カスタム アイコンが CSS の下の images フォルダーにあることを前提としています...通常、jQuery UI アイコン マップと同じ場所です。アイコンが作成されると、次のようなクラスを取得します: class="ui-icon ui-icon-custom"、およびその ui-icon クラスは次のようになります (テーマによっては異なる画像になる場合があります)。

.ui-icon { 
  width: 16px; 
  height: 16px; 
  background-image: url(images/ui-icons_222222_256x240.png); 
}

したがって、あなたのスタイルでは、その背景画像をオーバーライドするだけで、必要に応じて幅、高さなどを変更します.

于 2013-03-01T10:32:50.830 に答える