jQuery Mobile - Datenattribute
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. |
Default is no icon |
3 | data-role It defines the divider for list items. |
list-divider |
4 | data-theme It defines the theme color for the list item. |
letter (a-z) |
Navbar
Following table lists the navbar elements used with data-role = "navbar" attribute.
Sr.No. | Data-attribute & Description | Value |
---|---|---|
1 | data-icon It provides the icon for the list item. |
Default is no icon |
2 | data-iconpos It defines the position for the icon. |
left | right | top | bottom | notext |
Page
Following table lists the page elements used with data-role = "page" attribute.
Sr.No. | Data-attribute & Description | Value |
---|---|---|
1 | data-dom-cache It indicates whether DOM cache must clear or not for individual pages. |
true | false |
2 | data-overlay-theme It defines the overlay color of the dialog pages. |
letter (a-z) |
3 | data-theme It defines theme color for the page. |
letter (a-z) |
4 | data-title It provides the title for the page. |
Default is no icon |
5 | data-url It is used to updating the URL. |
url |
Popup
Following table lists the popup elements used with data-role = "popup" attribute.
Sr.No. | Data-attribute & Description | Value |
---|---|---|
1 | data-corners It defines whether the popup should display with rounded corners and margin or not. |
true | false |
2 | data-dismissible It defines the whether popup should be close by clicking outside or not. |
true | false |
3 | data-history It defines the whether popup should display the history of item when opened. |
true | false |
4 | data-overlay-theme It defines the overlay color of the popup box. |
letter (a-z) |
5 | data-shadow It displays the shadow for the popup box. |
true | false |
6 | data-theme It defines theme color for the popup box. |
letter (a-z) |
7 | data-tolerance It defines the edges of the window. |
30, 15, 30, 15 |
Radio Button
Following table lists the radio button elements used with type = "radio" attribute.
Sr.No. | Data-attribute & Description | Value |
---|---|---|
1 | data-mini It defines whether the button should display in smaller size or regular size. |
true | false |
2 | data-role It stops the styling of radio buttons as enhanced buttons. |
none |
3 | data-theme It defines the theme color for the radio button. |
letter (a-z) |
Select
Following table lists the select elements used with jQuery Mobile.
Sr.No. | Data-attribute & Description | Value |
---|---|---|
1 | data-icon It provides the icon for the select element. |
Default is "arrow-d" |
2 | data-iconpos It defines the position of the icon. |
left | right | top | bottom |
3 | data-inline It defines whether the button should be inline or not. |
true | false |
4 | data-mini It defines whether select should display in smaller size or regular size. |
true | false |
5 | data-native-menu It use custom menu when it has been set to false. |
true | false |
6 | data-overlay-theme It defines the overlay color for the custom select menu. |
letter (a-z) |
7 | data-placeholder It is used to set an option element of non-native select. |
true | false |
8 | data-role It stops the styling of select elements as buttons. |
none |
9 | data-theme It displays the theme color for the select elements. |
letter (a-z) |
Slider
Following table lists the slider elements used with type = "range" attribute.
Sr.No. | Data-attribute & Description | Value |
---|---|---|
1 | data-highlight It highlights the slider. |
true | false |
2 | data-mini It defines whether the slider should display in smaller size or regular size. |
true | false |
3 | data-role It stops the styling of slider controls as buttons. |
none |
4 | data-theme It displays the theme color for the slider control. |
letter (a-z) |
5 | data-track-theme It displays the theme color for the slider track. |
letter (a-z) |