2

我对 Google Closure 库比较陌生，我目前的障碍是获得一个按钮以编程方式呈现图像（而不是文本）。我尝试添加一个 img 标签作为按钮的内容：

var image = goog.dom.createDom('img', { 'src' : 'foo.png' });
var button = new goog.ui.Button(image);

但是，尽管页面中确实呈现了一个空白按钮，但没有出现图像。检查生成的 HTML 会显示一个没有内容的按钮标记。

我还考虑过添加一个样式属性来指定background-image. 但是，我不清楚如何通过 Button API 完成此操作。

关于如何做到这一点的任何想法或例子？感谢帮助。

编辑：这是我在 Dave Paroulek 的帮助下得出的解决方案：

var button = new goog.ui.CustomButton();
button.render(goog.dom.getElement('button-row'));
var style = button.getElement().style;
style.backgroundImage = 'url(foo.png)';
style.backgroundPosition = 'center center';
style.backgroundRepeat = 'no-repeat';
4

1 回答 1

2

CustomButton 似乎工作：

var image = goog.dom.createDom('img', { 'src' : '/images/foo.png' });
var button = new goog.ui.CustomButton(image);

我不确定为什么它不适用于 Button，但注意到 Button 呈现 a<button>并且 CustomButton 呈现几个<div>元素，这些元素的样式看起来像一个按钮，所以也许这与它有关？

另外，如果你想使用背景图像，那么你可以试试这个：

var div = goog.dom.createDom('div', { 'class' : 'icon goog-inline-block' });
span = goog.dom.createDom('span', { 'style': 'vertical-align:middle'}, 
                              'Button with css image');

button = new goog.ui.CustomButton([div, span]);
var btn2 = goog.dom.$('button2');
button.render(btn2);

然后，像这样添加css：

.icon {
  height: 16px;
  width: 16px;
  margin: 0 1px;
  background-image: url(/images/foo.png);
  background-repeat: no-repeat;
  vertical-align: middle;
}
于 2011-11-09T14:44:34.147 回答