JQuery Mobile предоставляет набор иконок, которые сделают ваши кнопки выглядят более желательным.
Добавление значков для Jquery мобильных кнопок
Чтобы добавить иконку на кнопку, используйте ui-icon класса, и поместите иконку с классом позиции значок (ui-btn-icon - pos ) :
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left" >Search</a>
Примечание: Для других кнопок, как кнопки в представлениях списка и форм, вы должны использовать атрибут-значок данных. Это будет объяснено в следующей главе.
Ниже мы перечислили некоторые доступные иконки, которые обеспечивают JQuery Mobile:
| класс Иконка | Описание | Значок | пример |
|---|---|---|---|
| ui-icon-arrow-l | Стрелка влево | Попробуй | |
| ui-icon-arrow-r | Правая стрелка | Попробуй | |
| ui-icon-info | Информация | Попробуй | |
| ui-icon-delete | Удалить | Попробуй | |
| ui-icon-back | назад | Попробуй | |
| ui-icon-audio | Динамики | Попробуй | |
| ui-icon-lock | Замок | Попробуй | |
| ui-icon-search | Поиск | Попробуй | |
| ui-icon-alert | бдительный | Попробуй | |
| ui-icon-grid | сетка | Попробуй | |
| ui-icon-home | Главная | Попробуй |
Для полного ведения всех значков JQuery Mobile кнопки, пожалуйста , перейдите на наш JQuery Mobile иконки Reference .
Позиционирование иконки
Вы можете выбрать одну из четырех значений , где значок должен быть установлен в кнопке: top, right, bottom или left .
Используйте ui-btn-icon класса для указания позиции:
Значок для установки кнопок Link
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-top" >Top</a>
<a href="#anylink"
class="ui-btn ui-icon-search ui-btn-icon-right" >Right</a>
<a href="#anylink"
class="ui-btn ui-icon-search ui-btn-icon-bottom" >Bottom</a>
<a href="#anylink"
class="ui-btn ui-icon-search ui-btn-icon-left" >Left</a>
Попробуй сам " Если вы не указываете позицию иконок для кнопок ссылок, значок не будет отображаться.
Отображение только значок
Для того, чтобы отображать только значок, используйте "notext" в качестве значения для позиции иконок:
пример
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-notext" >Search</a>
Попробуй сам " Удаление круга
По умолчанию все значки имеют серый круг (диск) вокруг них. Чтобы удалить круг, добавьте "ui-nodisc-icon" класса к элементу или его контейнера:
пример
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left">With circle (default)</a>
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left ui-nodisc-icon" >Without circle</a>
Попробуй сам " Черные или белые иконки
По умолчанию все иконки белые. Чтобы изменить цвет значка на черный, добавить "ui-alt-icon" к элементу или его контейнера:
пример
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left">White</a>
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left ui-alt-icon" >Black</a>
Попробуй сам " Еще примеры
Добавьте "ui-nodisc-icon" класс в контейнер
Примером "ui-nodisc-icon" класса добавлен в контейнер.
Добавьте "ui-alt-icon" класс в контейнер
Примером "ui-alt-icon" класса добавлен в контейнер.