Latest web development tutorials

Przycisk jQuery komórkowy

Aplikacje mobilne są zbudowane na prostym kliknięciem rzeczy, które chcesz wyświetlić.





Utwórz przycisk w jQuery Mobile

W jQuery Mobile, przycisk można utworzyć na trzy sposoby:

  • Zastosowanie <button> Element
  • Zastosowanie <input> Element
  • Użyj <a> elementy z data-role = "button" z

<Button>

<button>按钮</button>

Spróbuj »

<Input>

<input type="button" value="按钮">

Spróbuj »

<a>

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

Spróbuj »

lampa W jQuery Mobile, przycisk automatycznie stylizacji, uczynić je bardziej atrakcyjnymi i dostępności na urządzeniach mobilnych. Zaleca się stosowanie elementów z danymi <a>-role = "button" łącza, użyj znacznika <input> lub <link> element łączący strony formularza zgłoszeniowego.


przyciski nawigacyjne

Za pośrednictwem łącza przycisku między stronami, należy <a> elementy z data-role = "button" nieruchomości:

Przykłady

< a href="#pagetwo" data-role="button" >访问第二个页面</a>

Spróbuj »


przycisk inline

Domyślnie, przycisk zajmuje całej szerokości ekranu. Jeśli chcesz zawartość tylko jako szeroki jako przycisk lub, jeśli chcesz wyświetlać dwa lub więcej przycisków obok siebie, dodać dane-inline = "true":

Przykłady

<a href="#pagetwo" data-role="button" data-inline="true" >访问第二个页面</a>

Spróbuj »


Kombinacja przycisków

jQuery Mobile oferuje prosty sposób na połączenie przycisku.

Proszę umieścić data-role = "controlgroup" atrybuty i data-type = "horizontal | pionowe" stosowane razem w celu określenia, czy kombinacje poziomych lub pionowych przycisków:

Przykłady

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

Spróbuj »

lampa Domyślnie przyciski są połączeniem kompozycji pionowej, nie pozostawiają miejsca i przestrzeni między nimi. Tylko przez pierwsze i ostatnie przyciski są zaokrąglone, tak, że gdy są one połączone ze sobą, tworząc piękny wygląd.


przycisk Wstecz

Aby utworzyć przycisk Wstecz, użyj danych-rel = "powrót" własność (który ignoruje kotwicy wartość href):

Przykłady

<a href="#" data-role="button" data-rel="back" >返回</a>

Spróbuj »


Więcej linków przycisk instancji

kategoria opis Przykłady
ui-btn-b Przycisk Modyfikuj kolor jest czarny, czcionka jest białe (domyślnie szare tło, czarna czcionka). próbować
ui-corner-all Przycisk dodać zaokrąglone narożniki próbować
ui-mini Dokonywanie małych przycisków próbować
ui-shadow Przycisk, aby dodać cień próbować

uwaga Jeśli potrzebujesz więcej stylów, każda klasa w stylu oddzielone spacją, takich jak: class = "ui ui-btn btn-inline-ui-btn-corner-all ui-shadow"

Domyślnie <input> Przycisk ma zaokrąglone narożniki i efekt cienia. Ra i <button> Elementy nie.

Dokładniejsze klasy CSS, można znaleźć na naszej Instrukcja jQuery Komórka Klasa CSS Reference .

Następny rozdział pokazuje, jak dodać ikonę na przycisku.