0
我在應用程序中使用了一些YUI split buttons,現在我想在按鈕的左側顯示一個任意的小圖標。我按照常規YUI push buttons的示例CSS進行操作,我可以看到我的圖標,但小分離器圖像隨即消失。該按鈕似乎表現得好像分離器在那裏,即使垂直條和下拉圖標不存在。這似乎是因爲拆分按鈕也使用CSS背景圖片網址。那麼,通過YUI分割按鈕顯示我自己的圖標的最佳方式是什麼?如何顯示帶圖標的YUI分割按鈕?
這是我的示例代碼。
CSS:
.yui-button#splitbutton1 button,
.yui-button#regularbutton button
{
padding-left: 2em;
background: url(http://developer.yahoo.com/yui/examples/button/assets/add.gif) 0.5em 50% no-repeat;
}
HTML:
<div>
<input type="button" id="regularbutton" value="My regular button">
</div>
<div>
<input type="button" id="splitbutton1" value="My first split button">
<select id="splitbutton1menu">
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
<div>
<input type="button" id="splitbutton2" value="My other split button">
<select id="splitbutton2menu">
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
腳本:
YAHOO.util.Event.onContentReady("container", function() {
var button = new YAHOO.widget.Button("regularbutton");
var splitbutton = new YAHOO.widget.Button("splitbutton1",
{
type: "split",
menu: "splitbutton1menu"
});
var splitbutton = new YAHOO.widget.Button("splitbutton2",
{
type: "split",
menu: "splitbutton2menu"
});
});