jQuery Mobile - Kurzanleitung
JQuery Mobile ist ein Benutzeroberflächen-Framework, das auf jQuery Core basiert und zum Entwickeln reaktionsfähiger Websites oder Anwendungen verwendet wird, auf die auf Mobil-, Tablet- und Desktopgeräten zugegriffen werden kann. Es verwendet die Funktionen von jQuery und jQuery UI, um API-Funktionen für mobile Webanwendungen bereitzustellen.
Es wurde vom jQuery-Projektteam im Jahr 2010 entwickelt und in JavaScript geschrieben.
Warum jQuery Mobile verwenden?
Es werden Webanwendungen erstellt, die auf Mobil-, Tablet- und Desktopgeräten auf die gleiche Weise funktionieren.
Es ist kompatibel mit anderen Frameworks wie PhoneGap, Whitelight usw.
Es bietet eine Reihe von berührungsfreundlichen Formulareingaben und UI-Widgets.
Die progressive Verbesserung bietet eine einzigartige Funktionalität für alle Mobil-, Tablet- und Desktop-Plattformen und sorgt für effizientes Laden von Seiten und eine umfassendere Geräteunterstützung.
Funktionen von jQuery Mobile
Es basiert auf jQuery Core und dem UI-Framework "Weniger schreiben, mehr tun".
Es ist ein Open Source Framework und plattformübergreifend sowie browserübergreifend kompatibel.
Es ist in JavaScript geschrieben und verwendet die Funktionen von jQuery und jQuery UI zum Erstellen mobiler Websites.
Es integriert HTML5, CCS3, jQuery und jQuery UI in ein Framework zum Erstellen von Seiten mit minimaler Skripterstellung.
Es enthält ein Ajax-Navigationssystem, das animierte Seitenübergänge verwendet.
Vorteile von jQuery Mobile
Es ist einfach, Anwendungen zu erlernen und zu entwickeln, wenn Sie Kenntnisse über HTML5- und CSS3-Funktionen haben.
Es ist plattform- und browserübergreifend kompatibel, sodass Sie sich nicht darum kümmern müssen, für jede Geräteauflösung einen anderen Code zu schreiben.
Sie können das benutzerdefinierte Design mit ThemeRoller erstellen, ohne die Codezeile zu schreiben. Es unterstützt alle HTML5-Browser.
Es verwendet HTML5 zusammen mit JavaScript für die einfache Entwicklung von Webanwendungen.
Es ist so aufgebaut, dass derselbe Code automatisch vom mobilen Bildschirm zum Desktop-Bildschirm skaliert werden kann.
Nachteile von jQuery Mobile
Es gibt nur begrenzte Optionen für CSS-Themen, sodass Websites ähnlich aussehen können, die von diesen Themen erstellt werden.
Anwendungen, die mit jQuery Mobile entwickelt wurden, sind auf Mobiltelefonen langsamer.
Es wird zeitaufwändiger, wenn Sie jQuery Mobile mit anderen mobilen Frameworks kombinieren.
Es ist schwierig, ein vollständig individuelles visuelles Design bereitzustellen.
Auf alle Funktionen eines Geräts kann in einem Browser nicht über JavaScript zugegriffen werden.
In diesem Kapitel wird die Installation und Einrichtung von jQuery Mobile erläutert.
Laden Sie jQuery Mobile herunter
Wenn Sie den Link jquerymobile.com/ öffnen , sehen Sie, dass es zwei Möglichkeiten gibt, die jQuery- Mobilbibliothek herunterzuladen.
Custom Download - Klicken Sie auf diese Schaltfläche, um eine angepasste Version der Bibliothek herunterzuladen.
Latest Stable - Klicken Sie auf diese Schaltfläche, um die stabile und neueste Version der mobilen jQuery-Bibliothek abzurufen.
Benutzerdefinierter Download mit Download Builder
Mit Download Builder können Sie einen benutzerdefinierten Build erstellen, der nur die Teile der Bibliothek enthält, die Sie benötigen. Wenn Sie diese neue angepasste Version von jQuery Mobile herunterladen, wird der folgende Bildschirm angezeigt.
Sie können die Bibliotheken nach Ihren Wünschen auswählen und auf klicken Build My Download Taste.
Stabiler Download
Klicken Sie auf die Schaltfläche Stabil , die direkt zu einer ZIP-Datei mit den CSS- und JQuery-Dateien führt, um die neueste Version der mobilen jQuery-Bibliothek zu erhalten. Extrahieren Sie den Inhalt der ZIP-Datei in ein mobiles jQuery-Verzeichnis.
Diese Version enthält alle Dateien einschließlich aller Abhängigkeiten, eine große Sammlung von Demos und sogar die Unit-Test-Suite der Bibliothek. Diese Version ist hilfreich für den Einstieg.
Laden Sie die jQuery-Bibliothek von CDNs herunter
Ein CDN (Content Delivery Network) ist ein Netzwerk von Servern, die dazu dienen, den Benutzern Dateien bereitzustellen. Wenn Sie einen CDN-Link auf Ihrer Webseite verwenden, wird die Verantwortung für das Hosten von Dateien von Ihren eigenen Servern auf eine Reihe externer übertragen. Dies bietet auch den Vorteil, dass ein Besucher Ihrer Webseite, der bereits eine Kopie von jQuery Mobile von demselben CDN heruntergeladen hat, nicht erneut heruntergeladen werden muss. Sie können die folgenden CDN-Dateien in das HTML-Dokument aufnehmen.
//The jQuery Mobile CSS theme file (optional, if you are overriding the default theme)
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
//The jQuery core JavaScript file
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
//The jQuery Mobile core JavaScript file
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>In diesem Tutorial verwenden wir die CDN-Versionen der Bibliothek. Wir verwenden AMPPS (AMPPS ist ein WAMP-, MAMP- und LAMP-Stapel von Apache-, MySQL-, MongoDB-, PHP-, Perl- und Python-Servern), um alle unsere Beispiele auszuführen.
Beispiel
Im Folgenden finden Sie ein einfaches Beispiel für jQuery Mobile.
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role = "page" id = "pageone">
<div data-role = "header">
<h1>Header Text</h1>
</div>
<div data-role = "main" class = "ui-content">
<h2>Welcome to TutorialsPoint</h2>
</div>
<div data-role = "footer">
<h1>Footer Text</h1>
</div>
</div>
</body>
</html>Details des obigen Codes sind -
Dieser Code wird im head-Element angegeben.
<meta name = "viewport" content = "width = device-width, initial-scale = 1">Das Ansichtsfenster wird verwendet, um (vom Browser) anzugeben, wie die Zoomstufe und -abmessung der Seite angezeigt werden soll.
content = "width = device-width" wird verwendet, um die Pixelbreite der Seite oder des Bildschirmgeräts festzulegen.
initial-scale = 1 legt die anfängliche Zoomstufe fest, wenn die Seite zum ersten Mal geladen wird.
Fügen Sie die folgenden CDNs hinzu
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>Der Inhalt des <body> -Tags ist eine Seite, die im Browser angezeigt wird.
<div data-role = "page">
...
</div>data-role = "header" erstellt den Header oben auf der Seite.
data-role = "main" wird verwendet, um den Inhalt der Seite zu definieren.
data-role = "footer" erstellt die Fußzeile am Ende der Seite.
class = "ui-content" enthält Auffüllung und Rand innerhalb des Seiteninhalts.
Ausgabe
Führen Sie die folgenden Schritte aus, um zu sehen, wie der obige Code funktioniert:
Speichern Sie den obigen HTML-Code als simple_example.html Datei in Ihrem Server-Stammordner.
Öffnen Sie diese HTML-Datei als http: //localhost/simple_example.html und die folgende Ausgabe wird angezeigt.
Der Benutzer kann mit jQuery Mobile-Seiten interagieren, die den Inhalt in logische Ansichten und Seitenansichten gruppieren. Die Seitenansicht kann mithilfe von Seitenübergängen animiert werden. Mit einem HTML-Dokument können mehrere Seiten erstellt werden. Daher muss der Inhalt nicht vom Server angefordert werden.
Die folgende Tabelle zeigt die Seitentypen im Detail.
| Sr.Nr. | Typ & Beschreibung |
|---|---|
| 1 | Einzelne Seite Eine einzelne Seite wird in einem HTML-Dokument mit einer Standardmethode zum Schreiben einer Vorlage erstellt. |
| 2 | Mehrseitige Vorlage Das einzelne HTML-Dokument kann mehrere Seiten enthalten, die zusammen geladen werden, indem mehrere Divs mit data-role = "page" hinzugefügt werden . |
| 3 | Dialogseite Modale Dialoge öffnen Inhalte in einem interaktiven Overlay über der Seite. |
Konventionen, keine Anforderungen
Die Datenrollenattributelemente wie Kopf-, Fuß-, Seiten- und Inhaltselemente werden verwendet, um das Grundformat und die Struktur einer Seite bereitzustellen.
Für Einzelseitendokumente wurde der für die automatische Initialisierung erforderliche Seitenumbruch als optional festgelegt.
Das Strukturelement kann für eine Webseite mit benutzerdefiniertem Layout ausgeschlossen werden.
Zum Verwalten von Seiten wird der Seitenumbruch vom Framework eingefügt, wenn er nicht im Markup enthalten ist.
Seiten vorab abrufen
Mit dem Attribut data-prefetch können wir Seiten in den Einzelseitenvorlagen in das DOM vorabrufen. Für weitere Informationen klicken Sie hier .
DOM-Cache
Wenn der Browserspeicher im DOM voll ist, verlangsamt er den mobilen Browser oder kann aufgrund des Ladens mehrerer Seiten abstürzen. Es gibt eine einfache Methode, um das DOM aufgeräumt zu halten -
Wenn eine Seite über Ajax geladen wird, bedeutet dies, dass die Seite aus dem DOM entfernt werden muss, wenn Sie auf eine andere Seite umleiten.
Die vorherige Seite, die Sie besucht haben, kann beim erneuten Aufrufen aus dem Cache abgerufen werden.
Anstatt die Seiten zu entfernen, können Sie jQuery Mobile über die folgende Zeile anweisen, sie im DOM zu belassen:
$.mobile.page.prototype.options.domCache = true;Setzen Sie die Option domCache im Seiten-Plugin auf true, um alle Seiten im zuvor besuchten DOM zu behalten.
pageContainerElement.page({ domCache: true });jQuery Mobile bietet eine Reihe integrierter Symbole, die mit Schaltflächen und Listenansichtstasten verwendet werden können, um die Attraktivität der Schaltflächen zu erhöhen.
In der folgenden Tabelle sind einige der im jQuery Mobile-Framework verwendeten Symbole aufgeführt.
| Sr.Nr. | Symbolbereich & Beschreibung |
|---|---|
| 1 | Icon Set Es setzt das Symbol in der Schaltfläche. |
| 2 | Positionierungssymbole Es gibt die Position des Symbols in der Schaltfläche an. |
| 3 | Nur für Symbole Es wird nur ein Symbol in der Schaltfläche angezeigt. |
| 4 | Symbol Schatten Es fügt Ihrer Schaltfläche einen Symbolschatten hinzu. |
| 5 | Kreis entfernen Der graue Kreis um das Symbol wird entfernt. |
| 6 | Schwarze oder weiße Symbole Die Farbe der Symbole wird in Schwarz oder Weiß geändert. |
| 7 | Alt und Nodisc kombinieren Es kombiniert die Klassen alt und nodisc mit dem Symbol. |
Es ermöglicht das Ändern von Eigenschaftswerten, die über eine bestimmte Dauer auftreten, und ändert das Verhalten eines Elements von einem Zustand in einen anderen Zustand, indem für jeden Zustand unterschiedliche Stile angewendet werden.
In der folgenden Tabelle sind einige der im jQuery Mobile-Framework verwendeten Seitenübergänge aufgeführt.
| Sr.Nr. | Übergang & Beschreibung | Für Seiten | Für Dialoge |
|---|---|---|---|
| 1 | fade Sie können Elemente ein- und ausblenden lassen. |
Seite ausblenden | Dialogfeld verblassen |
| 2 | flip Klappen Sie die Elemente von hinten nach vorne auf die nächste Seite. |
Seite umblättern | Dialogfeld spiegeln |
| 3 | pop Sie können ein Popup-Fenster erstellen. |
Pop-Seite | Pop Dialog |
| 4 | flow Zeigen Sie die nächste Seite an, indem Sie die aktuelle Seite fernhalten. |
Flow-Seite | Flussdialog |
| 5 | slide Sie können die Seite von rechts nach links verschieben. |
Folienseite | Schiebedialog |
| 6 | slidefade Schiebt die Seite von rechts nach links und blendet die nächste Seite ein. |
Slidefade-Seite | Slidefade-Dialog |
| 7 | slideup Schiebt die Seite von unten nach oben. |
Slideup-Seite | Slideup-Dialog |
| 8 | slidedown Schiebt die Seite von oben nach unten. |
Slidedown-Seite | Slidedown-Dialog |
| 9 | turn Sie können zur nächsten Seite wechseln. |
Seite umblättern | Dialog drehen |
| 10 | none Mit diesem Attribut können Sie keinen Übergangseffekt verwenden. |
Keine Seite | Kein Dialog |
Einstellen des Übergangs und der globalen Konfiguration
Standardmäßig haben Seiten fadeÜbergang im Rahmen. Sie können benutzerdefinierte Übergänge verwenden, indem Sie die hinzufügendata-transitionAttribut zum Link. Sie können verschiedene Standardübergangseffekte für die Seite verwendendefaultPageTransitionOption global. Für Dialoge können Sie verwendendefaultDialogTransition Möglichkeit.
Fallback-Übergang
Alle Übergänge unterstützen 3D-Transformationen mit Ausnahme des Überblendungsübergangs. Die Geräte, die keine 3D-Transformation unterstützen, müssen den Fade-Übergang verwenden. Einige Browser unterstützen keine 3D-Transformationen für jeden Übergangstyp, daher können Sie die verwendenfade als Standardübergang Fallback.
Max Scroll für Übergänge
Die Übergänge werden beim Scrollen von oder zu einer Seite auf "Keine" gesetzt, und die Bildlaufposition beträgt das Dreifache der Höhe des Gerätebildschirms. Manchmal reagieren Sie langsam oder der Browser stürzt ab, wenn Sie auf ein Navigationselement klicken. Um dies zu vermeiden, verwenden wir die Bildlaufposition für den Übergang mitgetMaxScrollForTransition Funktion.
Maximale Breite für Übergänge
Sie können den Übergang deaktivieren, wenn die Fensterbreite höher als die Pixelbreite ist. Sie können die maximale Breite für Übergänge mithilfe von konfigurieren$.mobile.maxTransitionWidthglobale Option, die standardmäßig auf false gesetzt ist. Es werden Werte wie Pixelbreite oder falscher Wert verwendet, und der Übergang wird auf none gesetzt, wenn es sich nicht um einen falschen Wert handelt, wenn das Fenster höher als der angegebene Wert ist.
Gleicher Seitenübergang
Sie können die Übergänge zur aktuellen Seite mit dem hinzufügen allowSamePageTransition Option für Seitencontainer-Widgets change() Methode.
Benutzerdefinierte Übergänge erstellen
Sie können die benutzerdefinierten Übergänge auf der Seite mithilfe von erstellen $.mobile.transitionHandlers Option, die die Auswahl der Übergänge auf der Website oder Anwendung erweitert.
Rastersysteme werden verwendet, um Seitenlayouts durch eine Reihe von Zeilen und Spalten zu erstellen, in denen Ihre Inhalte gespeichert sind.
Die folgende Tabelle zeigt die Arten von Gittern im Detail.
| Sr.Nr. | Typ & Beschreibung |
|---|---|
| 1 | Gitter Das mobile jQuery-Rastersystem erstellt Seitenlayouts über eine Reihe von Zeilen und Spalten. |
| 2 | Knöpfe in Gittern Sammlung von Schaltflächen im Rasterformat in jQuery Mobile. |
| 3 | Benutzerdefiniertes responsives Raster Der grundlegende Rasterstil kann mithilfe von Medienabfragen in CSS problemlos auf das benutzerdefinierte reaktionsfähige Layout erweitert werden. |
Ein Widget ist ein kleines Gadget oder Steuerelement Ihrer mobilen jQuery-Anwendung. Widgets können sehr praktisch sein, da Sie damit Ihre Lieblingsanwendungen auf Ihrem Startbildschirm platzieren können, um schnell darauf zugreifen zu können.
Die folgende Tabelle zeigt die Widget-Typen im Detail.
| Sr.Nr. | Typ & Beschreibung |
|---|---|
| 1 | Tasten Es gibt eine anklickbare Schaltfläche an, die Inhalte wie Text oder Bilder enthält. |
| 2 | Kontrollkästchen Kontrollkästchen werden verwendet, wenn mehr als eine Option ausgewählt werden muss. |
| 3 | Radiobox Optionsfelder werden verwendet, wenn aus vielen Optionen nur eine Option ausgewählt werden muss. |
| 4 | Datumsauswahl Es konzentriert sich auf die Eingabe, um einen interaktiven Kalender in einer kleinen Überlagerung zu öffnen. |
| 5 | Zusammenklappbar Mit Collapsible können Sie den Inhalt erweitern oder reduzieren, wenn Sie darauf klicken. Es ist sehr hilfreich für mobile Geräte, die einen kurzen Inhalt präsentieren. |
| 6 | Kontrollgruppe Kontrollgruppen bieten eine Reihe von Schaltflächen, mit denen Sie einen einzelnen Block angeben können, der wie eine Navigationskomponente aussieht. |
| 7 | Filterbar Mit dem Attribut data-filter = "true" können Sie die untergeordneten Elemente eines beliebigen Elements filtern. |
| 8 | Kippschalter Mit dem Flip-Schalter können Sie den Schalter aus- / einschalten oder wahr / falsch einstellen, indem Sie darauf klicken, um eine Eingabe im Booleschen Stil zu erhalten. |
| 9 | Listenansicht Der Zweck der Listview-Komponente besteht darin, komplexe und benutzerdefinierte Inhalte in Listen zu rendern. |
| 10 | Lader Das jQuery Mobile bietet verschiedene Möglichkeiten zum Laden von Status in ein Element. |
| 11 | Navbar Das Navigationsleisten-Widget besteht aus einer Reihe von Schaltflächen, die Sie mit anderen Webseiten oder Abschnitten verknüpfen. |
| 12 | Panels In Bedienfeldern werden die DOM-Komponenten in der Box angezeigt. |
| 13 | Popups Popup ist eine Benutzeroberfläche, die in einem kleinen Fenster angezeigt wird, um Text, Bilder und andere Inhalte anzuzeigen. |
| 14 | Rangeslider Das Rangeslider-Widget bietet Ihnen zwei Ziehpunkte, mit denen Sie einen numerischen Wertebereich auswählen können. |
| 15 | Auswahlmenü Ein Auswahlmenü bietet verschiedene Optionen in Form einer Dropdown-Liste, aus der ein Benutzer eine oder mehrere Optionen auswählen kann. |
| 16 | Schieberegler Mit dem Schieberegler können Sie einen Wert auswählen, indem Sie den Griff des Schiebereglers verschieben. |
| 17 | Tabelle jQuery Mobile verwendet die Tabelle, um die Daten in Zeilen und Spalten darzustellen, dh zeigt die Daten in einem Tabellenformat an. |
| 18 | Tabs Das Registerkarten-Widget ist die Erweiterung des jQuery ui-Registerkarten-Widgets, die alle Methoden und Optionen akzeptiert. |
| 19 | Text Eingabe Das <input> -Tag wird verwendet, um ein Eingabeelement zu deklarieren, ein Steuerelement, mit dem der Benutzer Daten eingeben kann. |
| 20 | Symbolleiste Mit dem Widget für die mobile Symbolleiste von jQuery können Sie Kopf- und Fußzeilen erstellen. |
Mit jQuery Mobile können dynamische Webseiten erstellt werden. Mithilfe von Ereignissen können Sie ereignisgesteuerte Prozesse für die Elemente einrichten, die durch die Interaktion des Benutzers ausgelöst werden, z. B. Mausklick, Mauszeiger auf einem Element, Tastendruck auf der Tastatur usw.
In der folgenden Tabelle sind einige Ereignisse für mobile Geräte aufgeführt, die von jQuery Mobile unterstützt werden.
| Sr.Nr. | Eventbeschreibung |
|---|---|
| 1 | jQuery Mobile-Ereignisse Es reagiert auf Benutzerinteraktionen, wenn der Benutzer auf eine bestimmte Seite klickt oder die Maus über ein Element usw. bewegt. |
| 2 | jQuery Touch-Ereignisse Es bietet Berührungsereignisse, wenn der Benutzer den Bildschirm berührt. |
| 3 | jQuery-Bildlaufereignisse Es löst die Bildlaufereignisse aus, wenn der Benutzer nach oben und unten scrollt. |
| 4 | jQuery-Orientierungsereignis Es löst das Orientierungsereignis aus, wenn der Benutzer das Gerät vertikal oder horizontal dreht. |
| 5 | jQuery-Seitenereignisse Es stellt die Seitenereignisse bereit, wenn der Benutzer die Seiten ausblendet, erstellt, lädt oder entlädt. |
Das Erstellen von Formularen ist einfach und sehr flexibel und besteht aus einer Kombination standardisierter Formularelemente und Schaltflächen.
Die folgende Tabelle zeigt die Formulartypen im Detail.
| Sr.Nr. | Typ & Beschreibung |
|---|---|
| 1 | Formular Basic jQuery Mobile bietet ein leistungsstarkes, einfaches und vielseitiges Layoutsystem für Formulare, das Formularstile, Eingabeschaltflächen und Schieberegler unterstützt. |
| 2 | Formulareingaben Das <input> -Tag ist ein Steuerelement, mit dem der Benutzer Daten eingeben kann. |
| 3 | Formularauswahl In Form einer Option wird eine Dropdown-Liste für das Auswahlmenü bereitgestellt. |
| 4 | Formularschieberegler Mit dem Schieberegler können Sie einen Wert auswählen, indem Sie den Griff des Schiebereglers verschieben. |
| 5 | Aktualisierung und automatische Initialisierung von Formularelementen Die Aktualisierungsmethode wird verwendet, um den neuen Status der Formularsteuerung selbst zu aktualisieren und die Formularsteuerung mit JavaScript zu aktualisieren. |
Es werden verschiedene Arten von Themen für Schaltflächen, Navigationsleisten, Blöcke, Links usw. festgelegt. Sie können das Thema mithilfe des Datenthema- Attributs festlegen .
In der folgenden Tabelle wird die Verwendung der Themenfunktionalität in verschiedenen Bereichen beschrieben, die von jQuery Mobile unterstützt wird.
| Sr.Nr. | Funktionalität & Beschreibung |
|---|---|
| 1 | Themen Es bietet zwei verschiedene Arten von Themen, z. B. Thema "a" und Thema "b", um das Erscheinungsbild der Anwendung anzupassen. |
| 2 | Themen Kopf- und Fußzeile in Dialogen Legt das Thema für Kopf- und Fußzeile im Dialogfeld fest. |
| 3 | Themenschaltflächen, Symbole und Popups Gibt das Thema für Schaltflächen, Symbole und Popups an. |
| 4 | Themenschaltflächen in Kopf- und Fußzeile Zeigt das Thema für Schaltflächen in der Kopf- und Fußzeile an. |
| 5 | Theming Navigationsleisten Wendet das Thema für Navigationsleisten in Kopf- oder Fußzeile an. |
| 6 | Themenfelder Sie können das Thema für das Panel anwenden. |
| 7 | Theming Collapsible Button und Split Buttons Zeigt das Thema für zusammenklappbare und geteilte Schaltflächen an. |
| 8 | Themenlisten und zusammenklappbare Listen Zeigt das Thema für Listen und reduzierbare Listen an. |
| 9 | Zusammenklappbare Formulare Sie können das Thema für Formulare anwenden. |
jQuery CSS-Klassen
Sie können verschiedene Arten von CSS-Klassen verwenden, um die Elemente wie in den folgenden Abschnitten beschrieben zu formatieren.
Globale Klassen
Die folgenden Klassen können als globale Klassen in jQuery Mobile-Widgets verwendet werden:
| Sr.Nr. | Klasse & Beschreibung |
|---|---|
| 1 | ui-corner-all Es zeigt die Elemente mit abgerundeten Ecken an. |
| 2 | ui-shadow Es zeigt den Schatten für die Elemente an. |
| 3 | ui-overlay-shadow Es zeigt den Überlagerungsschatten für die Elemente an. |
| 4 | ui-mini Es zeigt die kleineren Elemente an. |
Tastenklassen
In der folgenden Tabelle sind Schaltflächenklassen aufgeführt, die mit Anker- oder Schaltflächenelementen verwendet werden.
| Sr.Nr. | Klasse & Beschreibung |
|---|---|
| 1 | ui-btn Es gibt an, dass das Element als Schaltfläche gestaltet wird. |
| 2 | ui-btn-inline Es zeigt die Schaltfläche als Inline-Element, wodurch der für das Etikett erforderliche Platz gespart wird. |
| 3 | ui-btn-icon-top Es platziert das Symbol über dem Text. |
| 4 | ui-btn-icon-right Es platziert das Symbol rechts vom Text. |
| 5 | ui-btn-icon-bottom Es platziert das Symbol unter dem Text. |
| 6 | ui-btn-icon-left Es platziert das Symbol links vom Text. |
| 7 | ui-btn-icon-notext Es zeigt das einzige Symbol. |
| 8 | ui-btn-a|b Es zeigt die Farbe der Schaltfläche an ("a" ist die Standardhintergrundfarbe, dh grau, und "b" ändert die Hintergrundfarbe in schwarz). |
Symbolklassen
In der folgenden Tabelle sind Symbolklassen aufgeführt, die mit Anker- oder Schaltflächenelementen verwendet werden.
| Sr.Nr. | Klasse & Beschreibung |
|---|---|
| 1 | ui-icon-action Es zeigt das Aktionssymbol. |
| 2 | ui-icon-alert Es zeigt das Ausrufezeichen innerhalb eines Dreiecks an. |
| 3 | ui-icon-arrow-d-l Es gibt unten mit dem Pfeil nach links an. |
| 4 | ui-icon-arrow-d-r Es gibt mit dem Rechtspfeil nach unten an. |
| 5 | ui-icon-arrow-u-l Es wird mit dem Pfeil nach links angegeben. |
| 6 | ui-icon-arrow-u-r Es wird mit dem Rechtspfeil angegeben. |
| 7 | ui-icon-arrow-l Es gibt den Pfeil nach links an. |
| 8 | ui-icon-arrow-r Es gibt den Rechtspfeil an. |
| 9 | ui-icon-arrow-u Es gibt den Aufwärtspfeil an. |
| 10 | ui-icon-arrow-d Es gibt den Abwärtspfeil an. |
| 11 | ui-icon-bars Es zeigt die 3 horizontalen Balken übereinander. |
| 12 | ui-icon-bullets Es zeigt die 3 horizontalen Kugeln übereinander. |
| 13 | ui-icon-carat-d Es zeigt das Karat nach unten. |
| 14 | ui-icon-carat-l Es zeigt das Karat links an. |
| 15 | ui-icon-carat-r Es zeigt das Karat rechts an. |
| 16 | ui-icon-carat-u Es zeigt das Karat nach oben an. |
| 17 | ui-icon-check Es zeigt das Häkchensymbol. |
| 18 | ui-icon-comment Es gibt den Kommentar oder die Nachricht an. |
| 19 | ui-icon-forbidden Es zeigt das verbotene Symbol an. |
| 20 | ui-icon-forward Es gibt das Vorwärtssymbol an. |
| 21 | ui-icon-navigation Es gibt das Navigationssymbol an. |
| 22 | ui-icon-recycle Es zeigt das Recycling-Symbol an. |
| 23 | ui-icon-refresh Es zeigt das Aktualisierungssymbol. |
| 24 | ui-icon-tag Es zeigt das Tag-Symbol an. |
| 25 | ui-icon-video Es zeigt das Video- oder Kamerasymbol an. |
Themenklassen
Es bietet zwei verschiedene Arten von Themen, z. B. Thema "a" und Thema "b", um das Erscheinungsbild der Anwendung anzupassen. Sie können Ihre eigenen Themenklassen erstellen, indem Sie den Farbfeldbuchstaben (az) anhängen. In der folgenden Tabelle sind Themenklassen aufgeführt, die von Buchstabe a bis z angegeben sind.
| Sr.Nr. | Klasse & Beschreibung |
|---|---|
| 1 | ui-bar-(a-z) Es zeigt die Farbe für Balken an, einschließlich Kopf- und Fußzeilen und anderer Balken auf der Seite. |
| 2 | ui-body-(a-z) Es zeigt die Farbe für den Inhaltsblock an, einschließlich Listenansicht, Popups, Schieberegler, Bedienfelder, Lader usw. |
| 3 | ui-btn-(a-z) Es zeigt die Farbe für die Schaltfläche an. |
| 4 | ui-group-theme-(a-z) Es zeigt die Farbe für Kontrollgruppen, Listenansichten und reduzierbare Sätze an. |
| 5 | ui-overlay-(a-z) Es zeigt die Hintergrundfarbe für Popup-, Dialog- und Seitencontainer an. |
| 6 | ui-page-theme-(a-z) Es zeigt die Farbe für Seiten an. |
Gitterklassen
In der folgenden Tabelle sind Rasterklassen aufgeführt, die mit gleicher Breite, ohne Rand, Hintergrund, Rand oder Abstand verwendet werden.
| Sr.Nr. | Gitterklasse | Säulen | Spaltenbreiten | Entspricht |
|---|---|---|---|---|
| 1 | UI-Grid-Solo | 1 | 100% | ui-block-a |
| 2 | ui-grid-a | 2 | 50% / 50% | ui-block-a | b |
| 3 | ui-grid-b | 3 | 33% / 33% / 33% | ui-block-a | b | c |
| 4 | ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-block-a | b | c | d |
| 5 | ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-block-a | b | c | d | e |
Taste
Es gibt eine anklickbare Schaltfläche an, die Inhalte wie Text oder Bilder mit der Klasse ui-btn enthält . Es ist in Version 1.4 veraltet. Verwenden Sie das Attribut ui-btn anstelle des Attributs data-role = "button" .
In der folgenden Tabelle sind die mit dem Datenattribut verwendeten Schaltflächenelemente aufgeführt.
| Sr.Nr. | Datenattribut & Beschreibung | Wert |
|---|---|---|
| 1 | data-corners Es definiert, ob die Schaltfläche abgerundete Ecken enthalten soll oder nicht. |
wahr | falsch |
| 2 | data-icon Es definiert das Symbol der Schaltfläche. |
Standard ist kein Symbol |
| 3 | data-iconpos Es definiert die Position des Symbols. |
links | rechts | Nach oben | Unterseite |
| 4 | data-iconshadow Es definiert, ob das Symbol der Schaltfläche Schatten enthalten soll oder nicht. |
wahr | falsch |
| 5 | data-inline Es definiert, ob die Schaltfläche inline sein soll oder nicht. |
wahr | falsch |
| 6 | data-mini Es definiert, ob die Schaltfläche in kleinerer oder normaler Größe angezeigt werden soll. |
wahr | falsch |
| 7 | data-shadow Es definiert, ob die Schaltfläche Schatten enthalten soll oder nicht. |
wahr | falsch |
| 8 | data-theme Es zeigt die Themenfarbe für die Schaltfläche an. |
Buchstabe (az) |
Kontrollkästchen
In der folgenden Tabelle sind die Kontrollkästchenelemente aufgeführt, die mit verwendet werden type = "checkbox".
| Sr.Nr. | Datenattribut & Beschreibung | Wert |
|---|---|---|
| 1 | data-mini Es definiert, ob das Kontrollkästchen in kleinerer oder normaler Größe angezeigt werden soll. |
wahr | falsch |
| 2 | data-role Das Stylen von Kontrollkästchen als Schaltflächen wird gestoppt. |
keiner |
| 3 | data-theme Es zeigt die Themenfarbe für das Kontrollkästchen an. |
Buchstabe (az) |
Zusammenklappbar
In der folgenden Tabelle sind zusammenklappbare Elemente aufgeführt, die mit verwendet werden data-role = "collapsible" Attribut.
| Sr.Nr. | Datenattribut & Beschreibung | Wert |
|---|---|---|
| 1 | data-collapsed Es gibt an, ob der Inhalt geschlossen oder erweitert werden soll. |
wahr | falsch |
| 2 | data-collapsed-cue-text Es zeigt Feedback für Benutzer mit Screenreader-Software an. |
Standardmäßig wird der Inhalt reduziert |
| 3 | data-collapsed-icon Es definiert das Symbol der zusammenklappbaren Schaltfläche. |
Das Standardsymbol ist "Plus". |
| 4 | data-content-theme Es zeigt die Themenfarbe für den reduzierbaren Inhalt an. |
Buchstabe (az) |
| 5 | data-expanded-cue-text Es zeigt Feedback für Benutzer mit Screenreader-Software an. |
Standardmäßig wird der Inhalt erweitert |
| 6 | data-expanded-icon Es zeigt die reduzierbare Schaltfläche an, wenn Sie den Inhalt erweitern. |
Das Standardsymbol ist "Minus". |
| 7 | data-iconpos Es definiert die Position des Symbols. |
links | rechts | Nach oben | Unterseite |
| 8 | data-inset Es definiert, ob die zusammenklappbare Schaltfläche mit abgerundeten Ecken und Rändern angezeigt werden soll oder nicht. |
wahr | falsch |
| 9 | data-mini Es definiert, ob die zusammenklappbaren Schaltflächen in kleinerer oder normaler Größe angezeigt werden sollen. |
wahr | falsch |
| 10 | data-theme Es zeigt die Themenfarbe für die zusammenklappbare Schaltfläche an. |
Buchstabe (az) |
Zusammenklappbares Set
In der folgenden Tabelle sind die zusammenlegbaren Set-Elemente aufgeführt, die mit dem verwendet werden data-role = "collapsibleset" Attribut.
| Sr.Nr. | Datenattribut & Beschreibung | Wert |
|---|---|---|
| 1 | data-collapsed-icon Es definiert das Symbol der zusammenklappbaren Schaltfläche. |
Das Standardsymbol ist "Plus". |
| 2 | data-content-theme Es zeigt die Themenfarbe für den reduzierbaren Inhalt an. |
Buchstabe (az) |
| 3 | data-expanded-icon Es zeigt die reduzierbare Schaltfläche an, wenn Sie den Inhalt erweitern. |
Das Standardsymbol ist "Minus". |
| 4 | data-iconpos Es definiert die Position des Symbols. |
links | rechts | Nach oben | Unterseite |
| 5 | data-inset Es definiert, ob die zusammenklappbare Schaltfläche mit abgerundeten Ecken und Rändern angezeigt werden soll oder nicht. |
wahr | falsch |
| 6 | data-mini Es definiert, ob die zusammenklappbaren Schaltflächen in kleinerer oder normaler Größe angezeigt werden sollen. |
wahr | falsch |
| 7 | data-theme Es zeigt die Themenfarbe für die zusammenklappbare Schaltfläche an. |
Buchstabe (az) |
Kontrollgruppe
In der folgenden Tabelle sind die Kontrollgruppenelemente aufgeführt, die mit verwendet werden data-role = "controlgroup" Attribut -
| Sr.Nr. | Datenattribut & Beschreibung | Wert |
|---|---|---|
| 1 | data-exclude-invisible Es definiert, ob unsichtbare untergeordnete Elemente bei der Zuweisung abgerundeter Ecken ausgeschlossen werden sollen. |
wahr | falsch |
| 2 | data-mini Es definiert, ob die Gruppe in kleinerer oder normaler Größe angezeigt werden soll. |
wahr | falsch |
| 3 | data-theme Es zeigt die Themenfarbe für die Kontrollgruppe an. |
Buchstabe (az) |
| 4 | data-type Es gibt an, ob die Gruppe im horizontalen oder vertikalen Format angezeigt werden soll. |
horizontal | vertikal |
Dialog
In der folgenden Tabelle sind die mit verwendeten Elemente aufgeführt data-dialog="true" Attribut.
| Sr.Nr. | Datenattribut & Beschreibung | Wert |
|---|---|---|
| 1 | data-close-btn Es definiert die Position der Schaltfläche zum Schließen. |
links | rechts | keiner |
| 2 | data-close-btn-text Es definiert den Text für die Schaltfläche zum Schließen. |
Text |
| 3 | data-corners Es definiert, ob der Dialog mit abgerundeten Ecken angezeigt werden soll oder nicht. |
wahr | falsch |
| 4 | data-dom-cache Es gibt an, ob der DOM-Cache für einzelne Seiten gelöscht werden muss oder nicht. |
wahr | falsch |
| 5 | data-overlay-theme Es definiert die Überlagerungsfarbe der Dialogseite. |
Buchstabe (az) |
| 6 | data-theme Es definiert die Themenfarbe der Dialogseite. |
Buchstabe (az) |
| 7 | data-title Es definiert den Titel der Dialogseite. |
Text |
Erweiterung
In der folgenden Tabelle sind die Erweiterungselemente aufgeführt, die mit verwendet werden data-enhance="false" or data-ajax = "false" Attribut.
| Sr.Nr. | Datenattribut & Beschreibung | Wert |
|---|---|---|
| 1 | data-enhance Sie können die Seite formatieren, indem Sie dieses Attribut auf "true" setzen. Sie können die Seite nicht formatieren, wenn sie auf "false" gesetzt ist. |
wahr | falsch |
| 2 | data-ajax Es gibt an, ob Seiten von Ajax geladen werden müssen oder nicht. |
wahr | falsch |
Symbolleiste behoben
In der folgenden Tabelle sind die Symbolleistenelemente aufgeführt, die mit verwendet werden data-position = "fixed" Attribut.
| Sr.Nr. | Datenattribut & Beschreibung | Wert |
|---|---|---|
| 1 | data-disable-page-zoom Es definiert, ob der Benutzer die Seite skalieren / zoomen kann oder nicht. |
wahr | falsch |
| 2 | data-fullscreen Es definiert, dass Symbolleisten oben und / oder unten positioniert werden müssen. |
wahr | falsch |
| 3 | data-tap-toggle Es zeigt an, ob der Benutzer die Sichtbarkeit der Symbolleiste beim Tippen umschalten kann oder nicht. |
wahr | falsch |
| 4 | data-transition Es zeigt einen Übergangseffekt, wenn Sie auf das Element tippen oder darauf klicken. |
Folie | verblassen | keiner |
| 5 | data-update-page-padding Es aktualisiert das Auffüllen der Seite mithilfe von Größenänderungs-, Übergangs- und Aktualisierungslayoutereignissen. |
wahr | falsch |
| 6 | data-visible-on-page-show Es definiert die Sichtbarkeit der Symbolleiste, wenn die übergeordnete Seite angezeigt wird. |
wahr | falsch |
Kippschalter umlegen
In der folgenden Tabelle sind die mit verwendeten Flip-Toggle-Elemente aufgeführt data-role = "flipswitch" Attribut -
| Sr.Nr. | Datenattribut & Beschreibung | Wert |
|---|---|---|
| 1 | data-mini Es definiert, ob der Switch in kleinerer oder normaler Größe angezeigt werden soll. |
wahr | falsch |
| 2 | data-on-text Es definiert den "Ein" -Text auf dem Kippschalter. |
Die Standardeinstellung ist "Ein". |
| 3 | data-off-text Es definiert den "Aus" -Text auf dem Kippschalter. |
Die Standardeinstellung ist "Aus". |
Fusszeile
In der folgenden Tabelle sind die mit dem Attribut data-role = "footer" verwendeten Fußzeilenelemente aufgeführt.
| Sr.Nr. | Datenattribut & Beschreibung | Wert |
|---|---|---|
| 1 | data-id Es definiert die eindeutige ID. |
Text |
| 2 | data-position Es definiert, ob die Fußzeile unten oder inline mit dem Seiteninhalt positioniert werden soll. |
inline | Fest |
| 3 | data-fullscreen Es definiert, ob die Fußzeile unten und über dem Seiteninhalt positioniert werden soll oder nicht. |
wahr | falsch |
| 4 | data-theme Es definiert die Themenfarbe der Fußzeile. |
Buchstabe (az) |
Header
In der folgenden Tabelle sind die mit verwendeten Header-Elemente aufgeführt data-role = "header" Attribut.
| Sr.Nr. | Datenattribut & Beschreibung | Wert |
|---|---|---|
| 1 | data-id Es definiert die eindeutige ID. |
Text |
| 2 | data-position Es definiert, ob die Kopfzeile unten oder inline zum Seiteninhalt positioniert werden soll. |
inline | Fest |
| 3 | data-fullscreen Es definiert, ob die Kopfzeile unten und über dem Seiteninhalt positioniert werden soll oder nicht. |
wahr | falsch |
| 4 | data-theme Es definiert die Themenfarbe der Kopfzeile. |
Buchstabe (az) |
Eingänge
In der folgenden Tabelle sind die mit verwendeten Eingabeelemente aufgeführt type = "text|search|etc" Attribut.
| Sr.Nr. | Datenattribut & Beschreibung | Wert |
|---|---|---|
| 1 | data-clear-btn Es definiert, ob das Eingabeelement eine Schaltfläche zum Löschen enthalten soll oder nicht. |
wahr | falsch |
| 2 | data-clear-btn-text Es definiert den Text für die Schaltfläche zum Löschen. |
Text |
| 3 | data-mini Es definiert, ob die Eingabe in kleinerer oder normaler Größe angezeigt werden soll. |
wahr | falsch |
| 4 | data-role Es stoppt die Eingabe von Eingabe- oder Textbereichen als Schaltflächen. |
keiner |
| 5 | data-theme Es definiert die Themenfarbe des Eingabeelements. |
Buchstabe (az) |
Verknüpfung
In der folgenden Tabelle sind die mit jQuery Mobile verwendeten Verknüpfungselemente aufgeführt.
| Sr.Nr. | Datenattribut & Beschreibung | Wert |
|---|---|---|
| 1 | data-ajax Es zeigt an, ob die Seiten über Ajax geladen werden müssen oder nicht. |
wahr | falsch |
| 2 | data-direction Es wird für den umgekehrten Übergang verwendet. |
umkehren |
| 3 | data-dom-cache Es gibt an, ob der jQuery DOM-Cache für Seiten frei sein muss oder nicht. |
wahr | falsch |
| 4 | data-prefetch Es wird verwendet, um die Seiten in DOM vorab abzurufen. |
wahr | falsch |
| 5 | data-rel Es gibt das Verhalten des Links an. |
zurück | Dialog | extern | aufpoppen |
| 6 | data-transition Es definiert den Übergang von einer Seite zur anderen. |
verblassen | flip | fließen | pop | Folie | Slidedown | slidefade | Slideup | drehen | keiner |
| 7 | data-position-to Es definiert die Position der Popup-Felder. |
Herkunft | jQuery-Selektor | Fenster |
Liste
Die folgende Tabelle zeigt die mit verwendeten Listenelemente data-role = "listview" Attribut.
| Sr.Nr. | Datenattribut & Beschreibung | Wert |
|---|---|---|
| 1 | data-autodividers Die Liste wird automatisch geteilt. |
wahr | falsch |
| 2 | data-count-theme Es definiert die Themenfarbe des Zählelements. |
Buchstabe (az) |
| 3 | data-divider-theme Es definiert die Themenfarbe für den Listenteiler. |
Buchstabe (az) |
| 4 | data-filter Es wird verwendet, um die Listenwerte im Suchfeld zu filtern. |
wahr | falsch |
| 5 | data-filter-placeholder Es definiert Text im Suchfeld. |
Text |
| 6 | data-filter-theme Es definiert die Themenfarbe für den Suchfilter. |
Buchstabe (az) |
| 7 | data-icon Es enthält das Symbol für die Liste. |
Standard ist kein Symbol |
| 8 | data-inset Es definiert, ob die Liste mit abgerundeten Ecken und Rändern angezeigt werden soll oder nicht. |
wahr | falsch |
| 9 | data-split-icon Es definiert das Symbol für die geteilte Schaltfläche. |
Das Standardsymbol ist "Pfeil-R". |
| 10 | data-split-theme Es definiert die Themenfarbe für die geteilte Schaltfläche. |
Buchstabe (az) |
| 11 | data-theme Es definiert die Themenfarbe für die Liste. |
Buchstabe (az) |
Listenpunkt
Die folgende Tabelle zeigt Listenelementelemente, die mit verwendet werden data-role = "listview" Attribut.
| Sr.Nr. | Datenattribut & Beschreibung | Wert |
|---|---|---|
| 1 | data-filtertext Es wird verwendet, um die Listenwerte anhand des Textes im Suchfeld zu filtern. |
Text |
| 2 | data-icon Es enthält das Symbol für das Listenelement. |
Standard ist kein Symbol |
| 3 | data-role Es definiert den Teiler für Listenelemente. |
Listenteiler |
| 4 | data-theme Es definiert die Themenfarbe für das Listenelement. |
Buchstabe (az) |
Navbar
In der folgenden Tabelle sind die mit verwendeten Navigationsleistenelemente aufgeführt data-role = "navbar" Attribut.
| Sr.Nr. | Datenattribut & Beschreibung | Wert |
|---|---|---|
| 1 | data-icon Es enthält das Symbol für das Listenelement. |
Standard ist kein Symbol |
| 2 | data-iconpos Es definiert die Position für das Symbol. |
links | rechts | Nach oben | unten | kein Text |
Seite
In der folgenden Tabelle sind die mit verwendeten Seitenelemente aufgeführt data-role = "page" Attribut.
| Sr.Nr. | Datenattribut & Beschreibung | Wert |
|---|---|---|
| 1 | data-dom-cache Es gibt an, ob der DOM-Cache für einzelne Seiten gelöscht werden muss oder nicht. |
wahr | falsch |
| 2 | data-overlay-theme Es definiert die Überlagerungsfarbe der Dialogseiten. |
Buchstabe (az) |
| 3 | data-theme Es definiert die Themenfarbe für die Seite. |
Buchstabe (az) |
| 4 | data-title Es enthält den Titel für die Seite. |
Standard ist kein Symbol |
| 5 | data-url Es wird zum Aktualisieren der URL verwendet. |
URL |
Aufpoppen
In der folgenden Tabelle sind die Popup-Elemente aufgeführt, die mit verwendet werden data-role = "popup" Attribut.
| Sr.Nr. | Datenattribut & Beschreibung | Wert |
|---|---|---|
| 1 | data-corners Es definiert, ob das Popup mit abgerundeten Ecken und Rändern angezeigt werden soll oder nicht. |
wahr | falsch |
| 2 | data-dismissible Es definiert, ob das Popup geschlossen werden soll, indem Sie nach außen klicken oder nicht. |
wahr | falsch |
| 3 | data-history Es definiert, ob das Popup beim Öffnen den Verlauf des Elements anzeigen soll. |
wahr | falsch |
| 4 | data-overlay-theme Es definiert die Überlagerungsfarbe des Popup-Felds. |
Buchstabe (az) |
| 5 | data-shadow Es zeigt den Schatten für das Popup-Feld an. |
wahr | falsch |
| 6 | data-theme Es definiert die Themenfarbe für das Popup-Feld. |
Buchstabe (az) |
| 7 | data-tolerance Es definiert die Kanten des Fensters. |
30, 15, 30, 15 |
Radio knopf
In der folgenden Tabelle sind die Optionsfeldelemente aufgeführt, die mit verwendet werden type = "radio" Attribut.
| Sr.Nr. | Datenattribut & Beschreibung | Wert |
|---|---|---|
| 1 | data-mini Es definiert, ob die Schaltfläche in kleinerer oder normaler Größe angezeigt werden soll. |
wahr | falsch |
| 2 | data-role Es stoppt die Gestaltung von Optionsfeldern als erweiterte Schaltflächen. |
keiner |
| 3 | data-theme Es definiert die Themenfarbe für das Optionsfeld. |
Buchstabe (az) |
Wählen
In der folgenden Tabelle sind die mit jQuery Mobile verwendeten Auswahlelemente aufgeführt.
| Sr.Nr. | Datenattribut & Beschreibung | Wert |
|---|---|---|
| 1 | data-icon Es enthält das Symbol für das ausgewählte Element. |
Standard ist "Pfeil-d" |
| 2 | data-iconpos Es definiert die Position des Symbols. |
links | rechts | Nach oben | Unterseite |
| 3 | data-inline Es definiert, ob die Schaltfläche inline sein soll oder nicht. |
wahr | falsch |
| 4 | data-mini Es definiert, ob select in kleinerer oder normaler Größe angezeigt werden soll. |
wahr | falsch |
| 5 | data-native-menu Es verwendet ein benutzerdefiniertes Menü, wenn es auf false gesetzt wurde. |
wahr | falsch |
| 6 | data-overlay-theme Es definiert die Überlagerungsfarbe für das benutzerdefinierte Auswahlmenü. |
Buchstabe (az) |
| 7 | data-placeholder Es wird verwendet, um ein Optionselement für nicht native Auswahl festzulegen. |
wahr | falsch |
| 8 | data-role Es stoppt die Gestaltung ausgewählter Elemente als Schaltflächen. |
keiner |
| 9 | data-theme Es zeigt die Themenfarbe für die ausgewählten Elemente an. |
Buchstabe (az) |
Schieberegler
In der folgenden Tabelle sind die mit verwendeten Schiebereglerelemente aufgeführt type = "range" Attribut.
| Sr.Nr. | Datenattribut & Beschreibung | Wert |
|---|---|---|
| 1 | data-highlight Es hebt den Schieberegler hervor. |
wahr | falsch |
| 2 | data-mini Es definiert, ob der Schieberegler in kleinerer oder normaler Größe angezeigt werden soll. |
wahr | falsch |
| 3 | data-role Es stoppt die Gestaltung von Schiebereglern als Schaltflächen. |
keiner |
| 4 | data-theme Es zeigt die Themenfarbe für das Schieberegler-Steuerelement an. |
Buchstabe (az) |
| 5 | data-track-theme Es zeigt die Themenfarbe für die Schiebereglerbahn an. |
Buchstabe (az) |