jQuery Mobile zawiera zbiór ikon, które uczynią twoje przyciski wyglądają bardziej pożądane.
Dodawanie ikon do jQuery Telefony Przyciski
Aby dodać ikonę do przycisku, użyj ui-icon klasy, i ustawić ikonę z klasy pozycji ikony (ui-btn-icon - pos ) :
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left" >Search</a>
Uwaga: W przypadku innych przycisków, podobnie jak przyciski w widokach list i formularzy, należy użyć atrybutu danych ikon. Zostanie to wyjaśnione w dalszych rozdziałach.
Poniżej mamy wymienione kilka dostępnych ikon, które zapewniają jQuery komórkowy:
| Klasa Ikona | Opis | Ikona | Przykład |
|---|---|---|---|
| ui-icon-arrow-l | Strzałka w lewo | Spróbuj | |
| ui-icon-arrow-r | Prawa strzałka | Spróbuj | |
| ui-icon-info | Informacja | Spróbuj | |
| ui-icon-delete | Kasować | Spróbuj | |
| ui-icon-back | Plecy | Spróbuj | |
| ui-icon-audio | Głośniki | Spróbuj | |
| ui-icon-lock | Kłódka | Spróbuj | |
| ui-icon-search | Szukanie | Spróbuj | |
| ui-icon-alert | Alarm | Spróbuj | |
| ui-icon-grid | Krata | Spróbuj | |
| ui-icon-home | Dom | Spróbuj |
Aby uzyskać pełny opis wszystkich ikon przycisków jQuery telefonów, przejdź do naszej jQuery Ikony Telefony Reference .
pozycjonowanie ikony
Można określić jeden z czterech wartościach, gdzie ikona powinna być umieszczona w przycisku: top, right, bottom lub left .
Użyj ui-btn-icon klasę, aby określić położenie:
Ikona Pozycja przycisków Łącze
<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>
Spróbuj sam " Jeśli nie określić położenie ikon dla przycisków linków, nie będą wyświetlane ikony.
Wyświetlanie tylko ikona
Aby wyświetlać tylko ikonę, użyj "notext" jako wartość dla położenia ikon:
Przykład
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-notext" >Search</a>
Spróbuj sam " Usuwanie The Circle
Domyślnie wszystkie ikony mają szare koła (płyty) wokół nich. Aby zdjąć koło, dodaj "ui-nodisc-icon" klasę do elementu lub jego opakowaniem:
Przykład
<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>
Spróbuj sam " Czarny lub biały Ikony
Domyślnie wszystkie ikony są białe. Aby zmienić kolor ikony na czarno, należy dodać "ui-alt-icon" do elementu lub jego opakowaniem:
Przykład
<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>
Spróbuj sam " Więcej przykładów
Dodaj "ui-nodisc-icon" klasy do kontenera
Przykładem "ui-nodisc-icon" klasy dodane do pojemnika.
Dodaj "ui-alt-icon" klasy do kontenera
Przykładem "ui-alt-icon" klasy dodane do pojemnika.