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)