Mobile Anwendungen sind auf die Einfachheit der Dinge tippen gebaut angezeigt werden sollen würde.
Erstellen Sie ein Button in jQuery Mobile
Eine Schaltfläche in jQuery Mobile kann auf drei Arten erstellt werden:
- Mit dem <input> Element
- Mit der <button> Element mit class="ui-btn"
- Mit dem <a> Element mit class="ui-btn"
Buttons in jQuery Mobile automatisch gestylt, sie attraktiv und nutzbar auf beiden mobilen Geräten und Desktop - Computer zu machen. Wir empfehlen Ihnen , das verwenden <a> Element mit class="ui-btn" zwischen den Seiten zu verknüpfen und <input> oder <button> Elemente für die Formulareinreichung.
Hinweis: Vor der Version 1.4 haben wir verwendet , um die data-role="button" Attribut auf eine Schaltfläche in jQuery Mobile zu erstellen. Ab 1.4, die Rahmen Verwendung CSS - Klassen zu Schaltflächen ( mit Ausnahme von <input> Tasten).
Navigationstasten
Um eine Verknüpfung zwischen den Seiten mit den Tasten, verwenden Sie das <a> Element mit class="ui-btn" :
gruppiert Buttons
jQuery Mobile bietet eine einfache Möglichkeit für Tasten zusammen zu gruppieren.
Verwenden Sie die data-role="controlgroup" Attribut zusammen mit data-type="horizontal|vertical" in einem Container - Element, um festzulegen , ob auf Gruppentasten horizontal oder vertikal:
Beispiel
<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>
Versuch es selber " Standardmäßig werden gruppiert Tasten gruppiert vertikal ohne Ränder und Raum zwischen ihnen. Und nur die erste und die letzte Taste hat abgerundete Ecken, die einen schönen Blick schafft, wenn sie zusammen gruppiert.
Zurück-Tasten
Um eine Zurück - Taste zu erstellen, verwenden Sie die data-rel="back" Attribut (Hinweis: Dies ignoriert die den Anker href Wert):
Inline-Buttons
Standardmäßig nehmen Tasten, um die volle Breite des Bildschirms. Wenn Sie auf eine Schaltfläche möchten , dass ist nur so breit wie sein Inhalt, oder wenn Sie wollen zwei oder mehr Tasten nebeneinander angezeigt werden , fügen Sie den "ui-btn-inline" Klasse:
Weitere CSS-Klassen für Link-Buttons
| Klasse | Beschreibung | Beispiel |
|---|---|---|
| ui-btn-b | Ändert die Farbe der Schaltfläche auf einem schwarzen Hintergrund mit weißer Schrift (Standard ist grau Hintergrund mit schwarzem Text). | Versuch es |
| ui-corner-all | Fügt abgerundete Ecken auf die Schaltfläche | Versuch es |
| ui-mini | Macht die Taste kleiner | Versuch es |
| ui-shadow | Fügt Schatten auf die Schaltfläche | Versuch es |
Wenn Sie mehr als eine Klasse verwenden möchten, trennen Sie jede Klasse mit einem Raum, wie: class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow" - class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow"
In der Standardeinstellung <input> Tasten haben Schatten und abgerundeten Ecken. Die <a> und <button> Element nicht.
Für eine komplette Referenz der CSS - Klassen für gemeinsame Stile, besuchen Sie unsere jQuery Mobile CSS - Klassen Referenz .
Das nächste Kapitel zeigt, wie Symbole, um Ihre Schaltflächen zu befestigen.