Das beste jQuery Mobile-Knopf-Tutorial im Jahr 2024. In diesem Tutorial können Sie Erstellen Sie eine Schaltfläche in jQuery Mobile,<Button>,<Input>,<a>,Navigationstasten,Beispiele,Inline-Taste,Beispiele,Eine Kombination von Knöpfen,Beispiele,Zurück-Taste,Beispiele,Weitere Links Button-Instanz, lernen
Mobile Anwendungen sind auf dem einfachen Klick auf Dinge, die Sie anzeigen möchten gebaut.
In jQuery Mobile kann die Schaltfläche auf drei Arten erstellt werden:
In jQuery Mobile, wird der Button automatisch Styling, machen sie attraktiver und Verfügbarkeit auf mobilen Geräten. Wir empfehlen Ihnen , <a> Elemente mit Daten-role = "Taste" der Verbindung, verwenden Sie die <input> oder <button> Element zwischen den Seiten verwenden bilden Unterwerfung. |
Für über die Schaltfläche Verbindung zwischen Seiten, <a> Elemente mit Daten-Rolle verwenden = "button" Eigenschaft:
Standardmäßig nimmt die Taste, um die gesamte Breite des Bildschirms. Wenn Sie einen Inhalt wollen nur so breit wie eine Taste, oder wenn Sie wollen einander zwei oder mehr Tasten Seite angezeigt werden, fügen Sie die Daten-inline = "true":
jQuery Mobile bietet eine einfache Möglichkeit, einen Knopf zu kombinieren.
Bitte legen Sie Daten-role = "Kontrollgruppe" Attribute und Daten-type = "horizontal | vertikal" zusammen verwendet werden, ob horizontal oder vertikal Kombinationen von Tasten zu spezifizieren:
Standardmäßig sind die Tasten eine Kombination aus vertikalen Zusammensetzung, ohne Rand und Raum zwischen ihnen. Und nur die erste und letzte Tasten sind abgerundet, so dass, wenn sie kombiniert sind, zusammen einen schönen Aussehen zu schaffen. |
Um eine Zurück-Taste zu erstellen, verwenden Daten-rel = "zurück" Eigenschaft (die Anker href Wert ignoriert):
Kategorie | Beschreibung | Beispiele |
---|---|---|
ui-btn-b | Schaltfläche Ändern Farbe ist schwarz, die Schrift ist weiß (Standard grauem Hintergrund, schwarze Schrift). | versuchen |
ui-Ecke-all | Knopf abgerundeten Ecken hinzufügen | versuchen |
ui-mini | Machen kleine Tasten | versuchen |
ui-Schatten | Knopf einen Schatten hinzufügen | versuchen |
Wenn Sie mehr Arten benötigen, jeden Stil Klasse durch ein Leerzeichen getrennt, wie zum Beispiel: class = "ui ui-btn-btn-Inline-ui-btn-Ecke alle ui-Schatten" Standardmäßig hat die <input>, um Ecken und Schatteneffekt abgerundet. <a> und <button> nicht. |
Ausführlichere CSS - Klassen finden Sie in unserer jQuery Mobile CSS - Klasse - Referenzhandbuch .
Der nächste Abschnitt zeigt, wie Sie auf die Schaltfläche ein Symbol hinzuzufügen.