Question

我在应用中使用了一些YUI split buttons，现在我想在按钮的左侧显示一个任意小图标。我跟着常规YUI push buttons的示例CSS，我可以看到我的图标，但是小分割器图像然后消失了。即使没有垂直条和下拉图标，该按钮似乎表现得像分割器一样。这似乎是因为拆分按钮也使用CSS背景图像网址。那么，在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"
                          } );


});

Answer 1

将您的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;
}

你是对的，按钮已经有了背景图片。所以我们要做的就是将bg图像放高一点，这样我们就会定位包裹按钮的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;        
}

如何显示带图标的YUI分割按钮？

1 个答案: