Przyciski jQuery Mobile

Aplikacje mobilne są budowane na wygodzie operacji dotykowych.

Tworzenie przycisków w jQuery Mobile

Przyciski w jQuery Mobile mogą być tworzone na trzy sposoby:

  • Używanie elementu <button>
  • Używanie elementu <input>
  • Używanie elementu <a> z atrybutem data-role="button"

<button>

<button>przycisk</button>

Spróbuj sam

<input>

<input type="button" value="Przycisk">

Spróbuj sam

<a>

<a href="#" data-role="button"> Przycisk </a>

Spróbuj sam

Wskazówka:Przyciski w jQuery Mobile automatycznie otrzymują style, co zwiększa ich interaktywność i dostępność na urządzeniach mobilnych. Zalecamy używanie elementu <a> z atrybutem data-role="button" do tworzenia linków między stronami, a elementów <input> lub <button> do przesyłania formularzy.

Przycisk nawigacyjny

Aby linkować strony za pomocą przycisków, użyj elementu <a> z atrybutem data-role="button":

Przykład

<a href="#pagetwo" data-role="button"> Przejdź do strony drugiej </a>

Spróbuj sam

Przycisk w linii

Domyślnie, przycisk zajmuje całą szerokość ekranu. Jeśli chcesz, aby przycisk dostosował się do zawartości, lub jeśli chcesz wyświetlić dwa lub więcej przycisków równolegle, dodaj data-inline="true":

Przykład

<a href="#pagetwo" data-role="button" data-inline="true"> Przejdź do strony drugiej </a>

Spróbuj sam

Grupowane przyciski

jQuery Mobile oferuje prosty sposób łączenia przycisków.

Użyj atrybutu data-role="controlgroup" razem z data-type="horizontal|vertical", aby zdefiniować kombinację przycisków poziomą lub pionową:

Przykład

<div data-role="controlgroup" data-type="horizontal">
  <a href="#anylink" data-role="button">Przycisk 1</a>
  <a href="#anylink" data-role="button">Przycisk 2</a>
  <a href="#anylink" data-role="button">Przycisk 3</a>
</div>

Spróbuj sam

Wskazówka:Domyślnie, przyciski grupowane są pionowo, bez marginesów zewnętrznych i pustych przestrzeni. Ponadto tylko pierwszy i ostatni przycisk mają zaokrąglone rogi, co tworzy piękny wygląd po zgrupowaniu.

Przycisk powrotu

Aby utworzyć przycisk powrotu, użyj atrybutu data-rel="back" (zignoruje wartość href wkształtu):

Przykład

<a href="#" data-role="button" data-rel="back"> Wróć </a>

Spróbuj sam

Więcej używanych dla przycisków atrybutów data-*

Atrybut Wartość Opis Przykład
data-corners true | false Określa, czy przycisk ma zaokrąglone rogi. Test
data-mini true | false Określa, czy przycisk jest mały. Test
data-shadow true | false Określa, czy przycisk ma cień. Test

Dla pełnych informacji o atrybutach data-* jQuery Mobile, odwiedź naszą Podręcznik referencyjny jQuery Mobile Data.

Następny dział pokazuje, jak dodać ikonę do przycisku.