Проблема с иконками пользовательского интерфейса jQuery - как получить только отображаемое изображение

Question

Используя значки пользовательского интерфейса jQuery, я просто хочу, чтобы значок отображался в соответствии с остальными («просто отображать значок, без разрывов строк и т. Д.). В основном я хочу получить ряд интерактивных изображений, в то время как я использую JQuery UI темы для моей страницы .

Вот некоторые вещи, которые я пробовал:

1: <div style="display:inline-block;width:20px;height:20px" class="ui-icon ui-icon-trash"/>
2: <input type="image" onclick=".." class="ui-icon ui-icon-search" alt="Look up" title="Look up (to address)" value="Reverse Lookup" />

1: полностью испортил макет. 2: дает мне дополнительный разрыв строки вокруг изображения

- как более широкий контекст запроса -

 <tr class="ui-widget-content">
   <td>...</td>
   <td>
      <input name="xy" id="xy" type="text" size="5" />
      <input name="xz" id="xz" type="text" size="5" />
      <input type="image" onclick="...;" class="ui-icon ui-icon-search" alt="Look up" title="Look up (to address)" value="Reverse Lookup" />
    </td>
  </tr>

- диапазон -

Использование span приводит к тому же, что и выше, значок отображается, но в отдельной строке.

  <span class="ui-icon ui-icon-carat-1-n"></span>

Answer 1

Я думаю, что ключ в том, чтобы сделать иконки контейнеров display: inline-block.

<div style="display: inline-block" class="ui-state-default">
    <span class="ui-icon ui-icon-lightbulb"></span>
</div> 

См. Этот пример: http://jsfiddle.net/2U5TN/1/.

Также эта страница может оказаться полезной: http://jquery -ui.googlecode.com / svn / trunk / tests / static / icons.html . Он отображает все возможные значки, которые вы можете использовать с jQuery UI CSS.

Answer 2

Использование панели инструментов Пример на сайте пользовательского интерфейса Jquery http://jqueryui.com/demos/button/#toolbar

Если для текста задано значение false, просто отобразится значок:

$( "#beginning" ).button({
            text: false,
            icons: {
                primary: "ui-icon-seek-start"
            }
        });

Похоже, они также используют текстовое значение для сохраненияотслеживать состояние кнопки.Проверьте кнопки воспроизведения / паузы и остановки в примере.