Создание экземпляра goog.ui.Button с файлом изображения

Я относительно новичок в библиотеке Google Closure, и моим текущим препятствием является получение кнопки для программного рендеринга с изображением (в отличие от текста). Я попытался добавить тег img в качестве содержимого кнопки:

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

Однако, несмотря на то, что пустая кнопка отображается на странице, изображение не появляется. Проверка сгенерированного HTML показывает тег кнопки без содержимого.

Я также подумал о добавлении атрибута стиля, указывающего background-image. Однако мне не ясно, как это сделать через Button API.

Любые мысли или примеры о том, как это сделать? Цените помощь.

РЕДАКТИРОВАТЬ: Вот решение, к которому я пришел с помощью Дэйва Пароулека:

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

javascript ajax google-closure-library google-closure
person Tim Clemons    schedule 07.11.2011    source источник

Ответы (1)


arrow_upward
2
arrow_downward

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;
}
person Upgradingdave    schedule 09.11.2011
comment
Спасибо за ответ. Я дам первое предложение с использованием CustomButton. Проблема со вторым заключается в том, что путь к файлу изображения определяется программно, поэтому мне пришлось бы применять background-image через атрибут стиля непосредственно к элементу кнопки. - person Tim Clemons; 09.11.2011
comment
У меня была возможность подтвердить, что CustomButton работает так, как вы описываете. Также удалось прикрепить информацию о стиле к каждой кнопке — я опишу свое окончательное решение выше. - person Tim Clemons; 15.11.2011