如何顯示帶圖標的YUI分割按鈕？

我在應用程序中使用了一些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" 
          }); 


});

來源

2011-03-04 Chris Farmer

改變你的CSS看起來像這樣：

.yui-button#splitbutton1 span, 
.yui-button#regularbutton span 
{ 
    padding-left: 20px; 
    background: url(http://developer.yahoo.com/yui/examples/button/assets/add.gif) 0.5em  50% no-repeat; 
}

你是對的，該按鈕已經有一個背景圖像。因此，所有我們要做的，就是地方的背景圖片有點高，所以我們將目標包裹該按鈕

這裏看到演示的span http://jsfiddle.net/gmedina/Bvhpm/5/

編輯：事實上，如果你想要將你的圖標應用到所有的分割按鈕，我會替換上面的css贊成這個：

.yui-split-button span { 
    padding-left: 20px; 
    background: url(http://developer.yahoo.com/yui/examples/button/assets/add.gif) 0.5em 50% no-repeat;   
}

來源

2011-03-05 05:01:07 gmedina

如何顯示帶圖標的YUI分割按鈕？

回答

相關問題