web-dev-qa-db-ja.com

独自の画像でjQuery UIボタンのアイコンを変更する

現在、次のjQuery UIボタンがあります。

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

「custom.png」というボタンに独自の画像を使用したいと思います。

どうすればそれを達成できますか？

jqueryimagejquery-uibuttonuibutton
24
Ivelin Nikolaev

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

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

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

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

これは、カスタムアイコンがCSSの下の画像フォルダーにあることを前提としています... 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); 
}

したがって、あなたのスタイルでは、background-imageをオーバーライドしているだけです。必要に応じて、幅や高さなどを変更してください。

32
Nick Craver

Nick Craverのコメントを見てください。私は彼の答えをそのまま試してみましたが、それでも私には役に立ちませんでした。問題（私は思います）は、ui-icon-customクラスがクラスリストの最後にあり、それを元のui-iconクラスの背景画像に上書きしていないようでした。

それを機能させるために私がしたことは、アイコンの最後に！

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

高さと幅のプロパティを変更する必要があるかもしれませんが、これは私にとってはうまくいきました。

34
Jim Gilmartin

OPに何か足りないかもしれませんが、これで問題なく動作します。ボタンをDIVとして定義し、その中にテーブルを置くことができます。 CSSのオーバーライドはありません。jqueryで定義されたアイコンと独自のカスタムサイズのアイコンの両方を使用できます。アイコンをテキストの周りのどこにでも配置できます（上、左、右など）。

$(document).ready(function()
{
    $('#btn').button();
});

<div id='btn'>
<table>
<tr>
<td><img src='images/custom.png' width="24" height="24" /></td>
<td>Search</td>
</tr>
</table>
</div>
5
tschlarm

ラベルやテキストなしでボタンに表示する画像のみの場合、私はこれを行います：

$('#button').button();

この画像要素をボタンに置​​き換えるには：

<img src="images/custom.png" width="28" height="28" id="button">

ただし、ラベルまたはテキストをフォローする場合は、上記のtschlarmの説明の方が適しています。

1
PutihTua

jquery ui cssファイルでui-icon-circle-plusクラスを検索し、それをコピーして独自のイメージを作成します。

1
Paul Creasey

このリンクを確認してください：

http://www.andymatthews.net/read/2011/02/13/Creating-and-using-custom-icons-in-jQuery-Mobile

.bouton-image { background: #004963; width: 80px; }
.ui-icon-wifi {
   width: 80px;
   height: 80px;
   background-color: #004963;
   background-image: url(../images/icones/icone_wifi_ispsm_mobile.png);
   background-position: 40% 40%;
}
<a title="" class="bouton-image" data-role="button" data-icon="wifi" data-iconpos="notext" data-inline="true"></a>

「data-icon」には、好きなものを置くだけで、jqueryがクラスを作成します。

0
jftremblay