Последние учебники веб-разработки
 

jQuery Mobile Кнопка Значки


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" класса добавлен в контейнер.