Ikony przycisków jQuery Mobile

Zestaw ikon oferowanych przez jQuery Mobile może uczynić przyciski bardziej atrakcyjnymi.

Dodawanie ikon do przycisków jQuery Mobile

Aby dodać ikonę do przycisku, użyj atrybutu data-icon:

<a href="#anylink" data-role="button" data-icon="search">Szukaj</a>

Wskazówka:Możcesz takę używać atrybutu data-icon w elemencie <button> lub <input>.

Poniżśymy przedstawili niektóre z dostępnych ikon oferowanych przez jQuery Mobile:

Wartość atrybutu Opis Ikona Przykład
data-icon="arrow-l" Strzałek w lewo Test
data-icon="arrow-r" Strzałek w prawo Test
data-icon="delete" Usuwanie Test
data-icon="info" Informacje Test
data-icon="home" Strona gówna Test
data-icon="back" Powrót Test
data-icon="search" Wyszukiwanie Test
data-icon="grid" Siatka Test

Dla żkręciwszych informacji o ikonach przycisków jQuery Mobile, odwiedż nasz Przegląd ikon jQuery Mobile.

Umieszczanie ikon

Możcesz takę zdefiniował pozycję umieszczenia ikony: gora, prawo, dółno lub lewo.

Użycie atrybutu data-iconpos, aby zdefiniował pozycję:

poziom ikony:

<a href="#link" data-role="button" data-icon="search" data-iconpos="top">gora
<a href="#link" data-role="button" data-icon="search" data-iconpos="right">prawo
<a href="#link" data-role="button" data-icon="search" data-iconpos="bottom">dolłno
<a href="#link" data-role="button" data-icon="search" data-iconpos="left">Lewo</a>

Spróbuj sam

Wskazówka:Domyślnie, ikony w wszystkich przyciskach są umieszczane po lewej stronie.

Pokazuj tylko ikony

Jeśli chcesz wyświetlić tylko ikonę, ustaw data-iconpos na "notext":

Cofnij:

<a href="#link" data-role="button" data-icon="search" data-iconpos="notext">Szukaj</a>

Spróbuj sam