私は頭が痛いです ！私は（私が信じている）非常に単純なjQuery UIプロセスである何かをしようとしていますが、それを機能させることができません。問題の原因となっている変数として何を特定すればよいかわかりません。
かもしれない：
- 私のコード
- ビジュアル スタジオ 2012 RC
- jQuery UI 1.8.22
私がやろうとしているのは、jQuery ボタンを作成し、その上にアイコンを配置することです。欲しいアイコンはplus-thickアイコンです。
ページのcssとjs"インポート" は次のとおりです (順序が間違っていますか?):
<link rel="stylesheet" type="text/css" href="Content/Default.css" />
<link rel="stylesheet" type="text/css" href="Content/themes/cupertino/jquery-ui-1.8.22.custom.css" />
<script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.8.22.custom.min.js"></script>
これを行うために使用しているコードは次のとおりです。
$('.headerButtonsDiv > a')
.button()
.button("option", "icons", { primary: 'ui-icon-plus-thick' })
.click(function () {
var text = $(this).text();
alert(text + ' clicked!');
return false;
});
これは私の最初の試みでした（ちなみに、上記と同じ結果です）：
$('.headerButtonsDiv > a')
.button( { icons: { primary: 'ui-icon-plus-thick' } } )
.click(function () {
var text = $(this).text();
alert(text + ' clicked!');
return false;
});
このコードの影響を受けるボタンは 3 つあります。
結果は次のとおりです。
- 要素は
<a>jQuery ボタンに正しく変換されます。 - 各ボタンには、ボタンの左側にアイコンが正しく表示されます。
- 各ボタンには、誤って の
carat-1-n代わりにアイコンが表示されますplus-thick。
ページ インスペクタ (IE や Chrome を使用) に入ると、button(変換された<a>要素) にドリルダウンし、それとその 2 つ<span>のサブ要素を確認します。<span>アイコンの要素にはui-icon-plus-thickクラスが適用されていますが、何も適用されていませんbackground-position。
したがって、クラスは存在しますが、実際には適用されていません。background-position手動で属性 ( background-position: -32px -128px;)を追加すると、 「魔法のように」正しいアイコンが表示されます;-)。
<span>ボタンを作成し、正しいサブ要素を選択してから「手動で」background-position自分自身を適用するという回避策を見つけることができると思いますが、それはまさにjQueryライブラリが行うべきことではありませんか?
いずれにせよ、私が脱線した場所を誰かが見てくれたら、本当に感謝します! これは本当に小さな問題ですが、これを機能させることができない場合、より複雑な問題について確信が持てません。