如何显示带图标的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分割按钮？

回答

相关问题