Question

我对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';

Answer 1

CustomButton似乎有效：

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

我不确定为什么它不适用于Button，但注意到Button呈现<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;
}

使用图像文件创建goog.ui.Button的实例

1 个答案: