私のあるプロジェクトでは、jQuery-UIのアイコンのアイコンパレットを拡張する必要があります。少し大きく（22x22）カラフルなものが必要でした。
そこで、jQuery-UIがどのようにアイコンを作成するかを見て、同じことを自分のアイコンで行いました。「拡張機能」をできるだけjQuery-UIっぽくしたかったので、いくつかのcssクラスも上書きし始めました。私の考えは
<div class="ui-rw-icon">
<span class="ui-icon ui-icon-pencil"></span>
</div>
cssの動作を制御できるjQuery-UIのアイコンクラスをラップするui-rw-icon（またはカラフルなアイコンの）クラスを使用します。ui-rw-icon-color私のcssファイルには次の内容が含まれています。
.ui-rw-icon .ui-icon {
width: 22px;
height: 22px;
background-image: url(images/ui-rw-icons_grayscale_246x246.png);
}
.ui-state-default .ui-rw-icon .ui-icon { background-image: url(images/ui-rw-icons_grayscale_pale_246x246.png); }
.ui-state-hover .ui-rw-icon .ui-icon { background-image: url(images/ui-rw-icons_grayscale_246x246.png); }
.ui-rw-icon-color .ui-icon { width: 22px; height: 22px; background-image: url(images/ui-rw-icons_color_246x246.png); }
.ui-state-default .ui-rw-icon-color .ui-icon { background-image: url(images/ui-rw-icons_color_pale_246x246.png); }
.ui-state-hover .ui-rw-icon-color .ui-icon { background-image: url(images/ui-rw-icons_color_246x246.png); }
/* positioning */
.ui-rw-icon-color .ui-icon-pencil, .ui-rw-icon .ui-icon-pencil { background-position: 0 0; }
.ui-rw-icon-color .ui-icon-remove, .ui-rw-icon .ui-icon-remove { background-position: -32px 0; }
これは正常に機能し、アイコンが表示されます。唯一の問題は、アイコンがjQuery-UIのアイコンよりも6ピクセル大きいことです。場合によっては、アイコンの位置を変更して、より適切に収まるようにします。たとえばここ
<button name="pencil" class="menubar-button ui-rw-icon" id="menubar-meassure">Measures</button>
<button name="script" class="menubar-button" id="menubar-newmeasure">New Measure</button>
<script>
$('.menubar-button').each(function() {
$(this).button({
icons: {
primary: "ui-icon-" + $(this).attr("name")
}
})
});
</script>
これはそれがどのように見えるかです：
（出典：sakuranohana.org）
鉛筆を数ピクセル高くしたいのですが。ボタン内の位置を制御するjquery-ui-cssファイルのルールを見つけました：
.ui-button-icon-only .ui-icon,
.ui-button-text-icon-primary .ui-icon,
.ui-button-text-icon-secondary .ui-icon,
.ui-button-text-icons .ui-icon,
.ui-button-icons-only .ui-icon {
position: absolute;
top: 50%;
margin-top: -8px;
}
background-imageしたがって、ここでは、属性を使用した場合と同じことができると思いました。
.ui-rw-icon .ui-button-icon-only .ui-icon,
.ui-rw-icon .ui-button-text-icon-primary .ui-icon,
.ui-rw-icon .ui-button-text-icon-secondary .ui-icon,
.ui-rw-icon .ui-button-text-icons .ui-icon,
.ui-rw-icon .ui-button-icons-only .ui-icon {
top: 40%;
}
しかし、これは機能しません。Opera dragonflyとFirebugはどちらも、ポジショニングルールが私のからのものjquery-ui-1.9.0.custom.cssであり、私のものからのものではないことを示していrw-ui.cssます。button()関数はこのコードを作成しました：
<button name="pencil" class="menubar-button ui-rw-icon ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary ui-state-focus" id="menubar-" role="button" aria-disabled="false">
<span class="ui-button-icon-primary ui-icon ui-icon-pencil"></span>
<span class="ui-button-text">Measures</span>
</button>
cssクラスが無視される理由がわかりません。私はcssセレクターを使ってみましたが、どちらも役に立ちませんでした。オブジェクトにが含まれている場合の動作を拡張しようとしたときに同様の問題が発生しましたが、ui-state-hoverjQuery-UIのcssルールを上書きできませんでした。
ここで何が欠けていますか？
編集
クラスセレクターのセクションを読んだ後、私の問題は、クラスui-button-text-icon-primaryが同じクラスのセットに含まれているui-rw-iconため、セレクター.ui-rw-icon .ui-button-text-icon-primary .ui-iconが機能しないことであることに気付きました。しかし、これは役に立ちました：
.ui-rw-icon.ui-button-icon-only .ui-icon,
.ui-rw-icon.ui-button-text-icon-primary .ui-icon,
.ui-rw-icon.ui-button-text-icon-secondary .ui-icon,
.ui-rw-icon.ui-button-text-icons .ui-icon,
.ui-rw-icon.ui-button-icons-only .ui-icon {
top: 40%;
}
小さな変更ですが、重要な変更です。