jQuery UIアイコンの使用

jQuery UIには、スプライトイメージに便利なアイコンが付いています。 themerollerを参照してください。jQuery UIアイコンの使用

私は時計アイコン（クラス.ui-icon-clock）を背景画像にしたいinput要素を持っています。背景アイコンをinputに設定するにはどうすればよいですか？

2011-09-03 Randomblue

空のスパンを使用してjQuery UIクラスを追加するだけです。あなたはそれではなくブロックよりもインラインブロックにする表示スタイルをオーバーライドする必要が

<span class="ui-icon ui-icon-clock" style="display:inline-block"></span><input type="text" />

それ以外の入力は、次の行にプッシュされます。

それ以外は、クロックをバックグラウンドイメージと言うとき、あなたが何をしているのか正確にはわかりません。

出典

2011-09-03 03:04:38 BZink

が、これは本当に正しい答えですか？ HTMLのスタイルを明示的に定義することは、「コンテンツ」と「表示」の関心事をマージすることを強くお勧めしました。 –

あなたは正しいですが、CSSのベストプラクティスは読者のためのエクササイズです。答えは、jQueryアイコンを表示するために必要なものを識別します。 'ui-icon'と' ui-icon-clock'クラスとあなたのhtml要素を空間にする。 – BZink

-1ベストプラクティスは皆のためのものです。ここで最高の答えを出さない理由はありません。 –

$("span").css({ 
width: 16px; 
height: 16px; 
background-image: url(images/ui-icons_222222_256x240.png); // change to correct location 
background-position: -80px -112px; 
});

出典

2011-09-03 03:06:19

http://jqueryui.com/themeroller/からjqueryuiテーマをdonwloadする必要があります ThemeRollerのギャラリータブをクリックし、好きなものを選択してください –

これはJQuery UIスクリプトで行うことができます。

JS：

$(function() { 
    $("input").button({ 
    icons: { 
     primary: ".ui-icon-clock" 
    }, 
    text: false 
    }) 
});

HTML：

<input>some text</input>

http://jqueryui.com/button/#icons

出典

2013-01-23 22:21:44

答えて

関連する問題