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

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

2 голосов
/ 08 ноября 2011

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

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

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

Я также рассмотрел добавление атрибута стиля, который задает background-image. Однако мне не ясно, как это сделать с помощью 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';

1 Ответ

2 голосов
/ 09 ноября 2011

CustomButton, кажется, работает: 

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

Я не совсем уверен, почему он не работает с Button, но заметил, что Button рендерит <button>, а CustomButton рендерит несколько <div> элементов, которыестилизованы так, чтобы выглядеть как кнопки, так что, может быть, это как-то связано с этим?

Кроме того, если вы хотите использовать background-image, вы можете попробовать это: 

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;
}
...