1

標準の jQuery UI テーマにカスタム アイコンを追加するにはどうすればよいですか? への回答に基づいて、いくつかのカスタム jqueryui ボタンを作成しようとしています。、特に Matthew/Panayiotis の回答で、ここにいくつかのカスタム jqueryUI ボタン​​を作成します。

http://nie-wieder.net/metronom/test.html

ご覧のとおり、ボタンが表示されていません。要するに、何が問題なのかわかりません。

ここにボタンを作成しました: http://nie-wieder.net/metronom/img/plus-normal.png (他に 2 つのファイル plus-hover.png と plus-active.png があります)ファイルはロードされていますが...ご覧のとおり、ボタンはありません:(

css ファイルはこちら: http://nie-wieder.net/metronom/css/style.css (下にスクロールして、phil-plus-classes)

アイデアがありません。助けていただければ幸いです。

よろしく、 ドミニク

4

2 に答える 2

3

jQuery UI ボタン​​でカスタム アイコンを使用する場合に理解すべき重要な点は、アイコンがカスタムかどうかに関係なく、ui-button.

したがって、デフォルトの jQuery UI テーマを使用している可能性が高く、ボタンの背景がこの銀灰色の色になるため、青い四角とプラスのアイコンが銀色の長方形に表示されています。

ここでやりたいことを解決するには、Theme Rollerを採用して助けてもらいたいと思うでしょう。

そのページで、クリッカブル: デフォルト状態、クリッカブル: ホバー状態、クリッカブル: アクティブ状態の背景色を、画像とほぼ一​​致する色に変更します (そうです、単色よりも凝った色だと思いますが、ここで私と一緒に）。

色の変更により、アイコンが追加されたボタンがデフォルトではなく選択した色を使用するようになります。

そこから、カスタム アイコンを実行する最善の方法を決定する必要があります。

すでに見てきたことから、30x30 のアイコンが に追加されたui-button場合、そのボタンにはデフォルトで両側に追加のパディングがあることに注意してください。

もう少し深く掘り下げたい場合は、jquery-ui CSS ファイル (デフォルトまたはカスタムのいずれか) を開いて、Interaction states.

この見出しの下には 7 行のクラスがあり、ここでクラスの背景色やその他の色ui-state-defaultが宣言されます。

また、その CSS ファイルで、 を検索しbutton text elementます。

その見出しの下の 3 行目は で始まり、.ui-button-icon-onlyこの行の要素に関連付けられているスタイルにpadding: .4em; は次のものが含まれます。

[補足: と という名前のクラスがあることに続く 2 行を見るとui-button-icon-primary、ボタンにアイコンのみが含まれていることを宣言するui-button-icon-secondaryためではなく、その 1 つのボタンを宣言するのではなく、ボタンがボタン スタイルを使用していることを宣言するためのものです。は別です。 】ui-button-icon-onlyonlyprimarysecondary

これで満足のいくボタンを作成できると思いますが、ご不明な点がありましたらお知らせください。

于 2012-04-29T18:51:52.057 に答える
1

どのボタンについて話しているのかわかりませんが、<button>どの要素にもテキストが含まれていません。span背景画像用に幅と高さでスタイル設定されていますが、spans幅や高さ（またはパディングやマージン）を指定できないインライン要素です。表示値をinline-blockui-iconスパンに設定すると、画像が表示されます。

于 2012-04-29T17:07:37.773 に答える