Aplikacje mobilne są zbudowane na prostocie dotykając rzeczy, którą chcesz wyświetlić.
Tworzenie przycisku w jQuery Mobile
Przycisk w jQuery Mobile możesz być tworzone na trzy sposoby:
- Korzystanie z <input> element,
- Używając <button> elementu z class="ui-btn"
- Korzystanie z <a> elementu z class="ui-btn"
Przyciski w jQuery mobilne są automatycznie stylu, co czyni je atrakcyjnym i zdatne do użytku w obu urządzeniach mobilnych i komputerach stacjonarnych. Zaleca się używanie <a> elementu z class="ui-btn" powiązanie między stronami, a <input> i <button> elementy do składania formularza.
Uwaga: Przed wersją 1.4, użyliśmy data-role="button" atrybutu utworzyć przycisk w jQuery Mobile. Począwszy od 1.4, ramy klas pomocą CSS przyciski typu (z wyjątkiem <input> przycisków).
Przyciski nawigacyjne
Aby połączyć się między stronami za pomocą przycisków, użyj <a> elementu z class="ui-btn" :
zgrupowane Przyciski
jQuery Mobile oferuje łatwy sposób grupowania przycisków razem.
Użyj data-role="controlgroup" atrybutów wraz z data-type="horizontal|vertical" w elemencie pojemnika, aby określić, czy przyciski grupy poziomo lub pionowo:
Przykład
<div data-role="controlgroup" data-type="horizontal" >
<a href="#" class="ui-btn">Button 1</a>
<a href="#"
class="ui-btn">Button 2</a>
<a href="#"
class="ui-btn">Button 3</a>
</div>
Spróbuj sam " Domyślnie zgrupowane przyciski są zgrupowane w pionie bez marginesów i przestrzeni między nimi. I tylko pierwszy i ostatni guzik ma zaokrąglone narożniki, co stwarza miły wygląd, gdy zgrupowane razem.
Powrót Przyciski
Aby utworzyć przycisk Wstecz, użyj data-rel="back" atrybut (UWAGA: To będzie ignorować kotwicy w href wartości):
Inline Przyciski
Domyślnie przyciski zajmują całą szerokość ekranu. Jeśli chcesz przycisk, który jest tak szeroki jak jego treścią, albo jeśli chcesz dwa lub więcej przycisków pojawiać się obok siebie, należy dodać "ui-btn-inline" klasę:
Więcej klas CSS dla przycisków Łącze
| Klasa | Opis | Przykład |
|---|---|---|
| ui-btn-b | Zmienia kolor przycisku na czarnym tle z białym tekstem (domyślnie szare tło z czarnym tekstem). | Spróbuj |
| ui-corner-all | Dodaje zaokrąglonymi narożnikami do przycisku | Spróbuj |
| ui-mini | Sprawia przycisk mniejsze | Spróbuj |
| ui-shadow | Dodaje cienie do przycisku | Spróbuj |
Jeśli chcesz korzystać z więcej niż jedną klasę, oddziel każdą klasę z przestrzeni, takich jak: class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow"
Domyślnie <input> przyciski mają cień i zaokrąglone narożniki. <a> I <button> element nie robi.
Aby uzyskać pełną odniesień do klas CSS dla typowych stylów, odwiedź naszą jQuery Komórka CSS Classes Reference .
Kolejny rozdział pokazuje, jak dołączyć ikony przycisków.