Иконки Jquery Мобильные кнопки

Далее: JQuery Mobile панель инструментов

JQuery Mobile предоставляет набор кнопок позволяет выглядеть более желательным значок.

Кнопка для добавления иконки к JQuery Mobile

Мы можем использовать UI-значок класса, чтобы добавить значок на кнопку, и кнопку можно установить с помощью указанного класса.

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>

Примечание: На другие кнопки способом, например в виде списка или виде кнопок использовать атрибут-значок данных. В следующем разделе мы представим конкретный.

Ниже перечислены некоторые из доступных значков JQuery Mobile обеспечивает:

класс Button	описание	примеров
UI-значок стрелка-л	Стрелка влево	пробовать
UI-значок стрелка-р	стрелка вправо	пробовать
UI-значок-инфо	информация	пробовать
UI-значок-удалить	удалять	пробовать
UI-значок-обратно	отбой	пробовать
UI-значок аудио	динамик	пробовать
Пользовательский интерфейс-значок блокировки	Навесной замок	пробовать
UI-значок-поиска	поиск	пробовать
UI-значок-оповещения	предупреждение	пробовать
UI-значок сетки	меш	пробовать
UI-значок-хозяева	дома	пробовать

Для полного справочного руководства для всех кнопок значков JQuery Mobile, посетите наш JQuery Mobile значок Reference Manual .

значок Расположение

Кроме того, можно указать значок, расположенную кнопку, какую позицию в: верхний (вверху), с правой стороны (справа), внизу (внизу), левый (слева).

Пожалуйста, используйте Ui-БТН-значок атрибут, чтобы указать местоположение:

Иконка Расположение:

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-top"> топ </a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-right"> правая сторона </a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-bottom"> дно </a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left"> левая сторона </a>

Попробуйте »

	Если вы не указать расположение изображения кнопки не будет отображаться значок.

Показывать только значок

Если вы хотите, чтобы отобразить значок, вы можете использовать "notext":

Пример:

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-notext"> Поиск </a>

Попробуйте »

Удалить круг

По умолчанию все значки имеют серый круг. Если вам не нужен, вы можете использовать категорию "-nodisc-значок уй» элемент:

примеров

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left"> использование круг (по умолчанию) </a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left ui-nodisc-icon"> удалить круг </a>

Попробуйте »

Черный, белая кнопка

По умолчанию все иконки белые. Если вам нужно изменить цвет значка черного цвета, вы можете добавить "UI-Alt-значок" в элементах:

примеров

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left"> белый </a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left ui-alt-icon"> черный </a>

Попробуйте »