jQuery Datenattribute
jQuery Mobile verwendet die HTML5 data-* Attribut zur Schaffung eines "touch-friendly" und ansprechende Optik für mobile Geräte.
Für die Referenzliste unten bold value gibt den Standardwert.
Taste
Veraltete in der Version 1.4. Verwenden Sie CSS - data-role="button" Klassen statt. Hyperlinks mit data-role="button" . Button - Elemente und Verbindungen in Symbolleisten und Eingabefelder werden als Schaltflächen automatisch gestylt, keine Notwendigkeit für data-role="button" .
| Daten-Attribut | Wert | Beschreibung |
|---|---|---|
| data-corners | true | false | Gibt an, ob die Schaltfläche abgerundete Ecken haben sollte oder nicht |
| data-icon | Icons Reference | Gibt das Symbol der Schaltfläche. Die Standardeinstellung ist kein Symbol |
| data-iconpos | left | right | top | bottom | notext | Gibt die Position des Symbols |
| data-iconshadow | true | false | Gibt an, ob die Schaltfläche Symbol Schatten haben soll oder nicht |
| data-inline | true | false | Gibt an, ob die Taste inline sein sollte oder nicht |
| data-mini | true | false | Gibt an, ob die Taste kleiner oder normaler Größe sein sollte |
| data-shadow | true | false | Gibt an, ob die Schaltfläche Schatten haben soll oder nicht |
| data-theme | letter (a-z) | Gibt das Thema Farbe der Schaltfläche |
Mehrere Schaltflächen zu gruppieren, verwenden Sie einen Behälter mit dem data-role="controlgroup" Attribut zusammen mit data-type="horizontal|vertical" angeben , ob Gruppentasten horizontal oder vertikal.
Checkbox
Paare von Etiketten und Eingänge mit type="checkbox" .
| Daten-Attribut | Wert | Beschreibung |
|---|---|---|
| data-mini | true | false | Gibt an, ob die Checkbox kleiner oder normaler Größe sein sollte |
| data-role | none | Verhindert, dass jQuery Mobile Stil Kontrollkästchen als Schaltflächen |
| data-theme | letter (a-z) | Gibt das Thema Farbe der Checkbox |
Mehrere Kontrollkästchen , um Gruppe, verwenden Sie die data-role="controlgroup" zusammen mit dem data-type="horizontal|vertical" angeben , ob Gruppe horizontal oder vertikal Checkboxen.
Zusammenklappbar
Ein Header - Element von einem beliebigen HTML - Markup in einem Container mit dem gefolgt data-role="collapsible" .
| Daten-Attribut | Wert | Beschreibung |
|---|---|---|
| data-collapsed | true | false | Gibt an, ob der Inhalt geschlossen werden soll oder erweitert |
| data-collapsed-cue-text | sometext | Gibt einen Text akustisches Feedback für Benutzer mit Screenreader-Software zur Verfügung zu stellen. Die Standardeinstellung ist "klicken Inhalte zu kollabieren". |
| data-collapsed-icon | Icons Reference | Gibt das Symbol des zusammenlegbaren Taste. Die Standardeinstellung ist "plus" |
| data-content-theme | letter (a-z) | Gibt das Thema Farbe des zusammenlegbaren Inhalt. Wird auch abgerundete Ecken auf den zusammenklappbaren Inhalt hinzufügen |
| data-expanded-cue-text | sometext | Gibt einen Text akustisches Feedback für Benutzer mit Screenreader-Software zur Verfügung zu stellen. Die Standardeinstellung ist "klicken Inhalte zu erweitern". |
| data-expanded-icon | Icons Reference | Gibt das Symbol des zusammenlegbaren-Taste, wenn der Inhalt erweitert wird. Die Standardeinstellung ist "minus" |
| data-iconpos | left | right | top | bottom | Gibt die Position des Symbols |
| data-inset | true | false | Gibt an, ob der zusammenklappbare Taste sollte mit abgerundeten Ecken und einer gewissen Marge oder nicht gestylt werden |
| data-mini | true | false | Gibt an, ob die zusammenklappbare Tasten kleiner oder normaler Größe sein sollte |
| data-theme | letter (a-z) | Gibt das Thema Farbe des zusammenlegbaren Taste |
Klapp-Set
Klapp - Inhaltsblöcke in einem Container mit dem data-role="collapsibleset" .
| Daten-Attribut | Wert | Beschreibung |
|---|---|---|
| data-collapsed-icon | Icons Reference | Gibt das Symbol des zusammenlegbaren Taste. Die Standardeinstellung ist "plus" |
| data-content-theme | letter (a-z) | Gibt das Thema Farbe des zusammenlegbaren Inhalt |
| data-expanded-icon | Icons Reference | Gibt das Symbol des zusammenlegbaren-Taste, wenn der Inhalt erweitert wird. Die Standardeinstellung ist "minus" |
| data-iconpos | left | right | top | bottom | notext | Gibt die Position des Symbols |
| data-inset | true | false | Gibt an, ob die Collapsibles mit abgerundeten Ecken und einer gewissen Marge oder nicht gestylt werden sollte |
| data-mini | true | false | Gibt an, ob die zusammenklappbare Tasten kleiner oder normaler Größe sein sollte |
| data-theme | letter (a-z) | Gibt das Thema Farbe des zusammenlegbaren Set |
Inhalt
Veraltete in der Version 1.4 und wird mit in 1.5. Container entfernt werden data-role="content" .
| Daten-Attribut | Wert | Beschreibung |
|---|---|---|
| data-theme | letter (a-z) | Gibt das Thema Farbe des Inhalts |
Kontrollgruppe
Ein <div> oder <fieldset> Container mit data-role="controlgroup" . Gruppen mehrere Button-Stil Eingänge eines einzigen Typs (Link-basierte Tasten, Radiobuttons, Checkboxen, wählen Sie Elemente). Form Checkboxen und Radio - Buttons für die Gruppierung, die <fieldset> Behälter befindet sich in einem empfohlenen <div> mit der "ui-fieldcontain" Klasse, Etikett Styling zu verbessern.
| Daten-Attribut | Wert | Beschreibung |
|---|---|---|
| data-exclude-invisible | true | false | Gibt an, ob unsichtbare Kinder bei der Zuordnung von abgerundeten Ecken auszuschließen |
| data-mini | true | false | Gibt an, ob die Gruppe kleiner oder normaler Größe sein sollte |
| data-theme | letter (a-z) | Gibt das Thema Farbe der Kontrollgruppe |
| data-type | horizontal | vertical | Gibt an, ob sollte die Gruppe horizontal oder vertikal angezeigt werden |
Dialog
Ein Behälter mit data-dialog="true" .
| Daten-Attribut | Wert | Beschreibung |
|---|---|---|
| data-close-btn | left | right | none | Gibt die Position der Schaltfläche zum Schließen |
| data-close-btn-text | sometext | Gibt den Text für die Schaltfläche zum Schließen |
| data-corners | true | false | Gibt an, ob der Dialog abgerundete Ecken haben sollte oder nicht |
| data-dom-cache | true | false | Gibt an, ob die jQuery DOM-Cache oder nicht für einzelne Seiten zu löschen (wenn auf true gesetzt, müssen Sie darauf achten, das DOM selbst und testen Sie gründlich auf alle mobilen Geräte zu verwalten) |
| data-overlay-theme | letter (a-z) | Gibt die Overlay (Hintergrund) Farbe des Dialogseite |
| data-theme | letter (a-z) | Gibt das Thema Farbe des Dialogseite |
| data-title | sometext | Gibt den Titel für die Dialogseite |
Erweiterung
Ein Behälter mit data-enhance="false" oder data-ajax="false"
| Daten-Attribut | Wert | Beschreibung |
|---|---|---|
| data-enhance | true | false | Bei der Einstellung auf "true" (default) jQuery Mobile wird die Seite automatisch Stil, geeignet für mobile Geräte. Bei der Einstellung auf "false", wird der Rahmen nicht die Seite individuell zu gestalten |
| data-ajax | true | false | Gibt an, ob Seiten über Ajax geladen werden oder nicht |
Hinweis: data-enhance="false" muss in Verbindung mit diesen verwendet werden $.mobile.ignoreContentEnabled=true" zu stoppen jQuery Mobile Stil Seiten automatisch.
Jeder Link oder Formularelement innerhalb data-ajax="false" Container werden durch die Rahmenbedingungen der Navigationsfunktionen ignoriert werden , wenn $.mobile.ignoreContentEnabled auf true gesetzt ist.
Feld Container
Veraltete in der Version 1.4 und wird in 1.5 entfernt werden. Verwenden class="ui-fieldcontain instead" . Ein Container mit data-role="fieldcontain" umschlungen Label / form Elementpaar.
Feste Toolbar
Ein Behälter mit data-role="header" oder data-role="footer" zusammen mit der data-position="fixed" Attribut.
| Daten-Attribut | Wert | Beschreibung |
|---|---|---|
| data-disable-page-zoom | true | false | Gibt an, ob der Benutzer in der Lage ist, die Seite zu skalieren / zoomen oder nicht |
| data-fullscreen | true | false | Gibt Symbolleisten immer oben und / oder unten positioniert werden |
| data-tap-toggle | true | false | Gibt an, ob der Benutzer Symbolleiste-Sichtbarkeit auf Taps / Klicks oder nicht in der Lage, zu wechseln |
| data-transition | slide | fade | none | Gibt den Übergangseffekt, wenn ein Hahn / Klick erfolgt |
| data-update-page-padding | true | false | Gibt die Polsterung von oben und unten auf der Seite auf Resize, Übergang und aktualisiert werden "updatelayout" Ereignisse (jQuery Mobile immer aktualisiert die Polsterung auf der "pageshow" event) |
| data-visible-on-page-show | true | false | Gibt Symbolleiste-Sichtbarkeit, wenn übergeordnete Seite gezeigt wird |
Flip-Kippschalter
Eine <input type="checkbox"> mit einer Daten Rolle von "flipswitch" :
| Daten-Attribut | Wert | Beschreibung |
|---|---|---|
| data-mini | true | false | Gibt an, ob der Schalter kleiner oder normaler Größe sein sollte |
| data-on-text | sometext | Gibt die "auf" Text auf dem Flip - Schalter (Standard ist "On" ) |
| data-off-text | sometext | Gibt die "off" Text auf dem Flip - Schalter (Standard ist "Off" ) |
Fußzeile
Ein Behälter mit data-role="footer" .
| Daten-Attribut | Wert | Beschreibung |
|---|---|---|
| data-id | sometext | Gibt eine eindeutige ID. Erforderlich für die persistente Fußzeilen |
| data-position | inline | fixed | Gibt an, ob die Fußzeile inline mit Seiteninhalt sein sollte oder bleiben auf dem Boden positioniert |
| data-fullscreen | true | false | Gibt an, ob die Fußzeile immer am Boden und über den Seiteninhalt (leicht see-through) oder nicht positioniert werden soll |
| data-theme | letter (a-z) | Gibt das Thema Farbe der Fußzeile |
Hinweis: Um die Vollbild - Position zu aktivieren, verwenden data-position="fixed" und fügen Sie dann die data-fullscreen - Attribut auf das Element.
Kopfzeile
Ein Behälter mit data-role="header" .
| Daten-Attribut | Wert | Beschreibung |
|---|---|---|
| data-id | sometext | Gibt eine eindeutige ID. Erforderlich für persistente Header |
| data-position | inline | fixed | Gibt an, ob der Header inline mit Seiteninhalt oder bleiben an der Spitze positioniert sein sollte |
| data-fullscreen | true | false | Gibt an, ob der Header immer oben und über den Seiteninhalt positioniert werden soll (leicht see-through) oder nicht |
| data-theme | letter (a-z) | Gibt das Thema Farbe des Kopf |
Hinweis: Um die Vollbild - Position zu aktivieren, verwenden data-position="fixed" und fügen Sie dann die data-fullscreen - Attribut auf das Element.
Eingänge
Eingänge mit type="text|search|etc." Oder textarea elements .
| Daten-Attribut | Wert | Beschreibung |
|---|---|---|
| data-clear-btn | true | false | Gibt an, ob die Eingabe eine haben sollte "clear" Taste |
| data-clear-btn-text | text | Gibt einen Text für die Schaltfläche "Löschen". Die Standardeinstellung ist "clear text" |
| data-mini | true | false | Gibt an, ob der Eingang kleiner oder normaler Größe sein sollte |
| data-role | none | Verhindert, dass jQuery Mobile Stil Eingänge / Textbereiche als Schaltflächen |
| data-theme | letter (a-z) | Gibt das Thema Farbe des Eingabefeldes |
Link
Alle Links.
| Daten-Attribut | Wert | Beschreibung |
|---|---|---|
| data-ajax | true | false | Gibt an, ob für eine verbesserte Benutzererfahrung und Transitionen Seiten über Ajax zu laden. Wenn auf false gesetzt, wird jQuery Mobile eine normale Seite Antrag tun. |
| data-direction | reverse | Reverse-Übergang Animation (nur für Seite oder Dialog) |
| data-dom-cache | true | false | Gibt an, ob die jQuery DOM-Cache oder nicht für einzelne Seiten zu löschen (wenn auf true gesetzt, müssen Sie darauf achten, das DOM selbst und testen Sie gründlich auf alle mobilen Geräte zu verwalten) |
| data-prefetch | true | false | Gibt an, ob Seiten in das DOM im voraus zu holen, damit sie verfügbar sind, wenn der Benutzer sie besucht |
| data-rel | back | dialog | external | popup | Gibt eine Option für die, wie sollte die Verbindung verhalten. Zurück - Verschiebt einen Schritt zurück in der Geschichte. Dialog - Öffnet einen Link als Dialog, nicht in der Geschichte verfolgt. Extern - Für eine andere Domäne zu verknüpfen. Popup - öffnet sich ein Popup-Fenster. |
| data-transition | fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none | Gibt an, wie von einer Seite zur nächsten zu wechseln. Sehen Sie unsere jQuery Mobile Transitions Kapitel. |
| data-position-to | origin | jQuery selector | window | Gibt die Position von Pop-up-Boxen. Origin - Standard. Positioniert das Popup über den Link, es öffnet sich. jQuery-Selektor - positioniert das Popup über das angegebene Element. Window - positioniert das Popup in der Mitte des Fensters angezeigt. |
Liste
Eine <ol> oder <ul> mit data-role="listview" .
| Daten-Attribut | Wert | Beschreibung |
|---|---|---|
| data-autodividers | true | false | Gibt an, ob automatisch Listenelemente zu teilen oder nicht |
| data-count-theme | letter (a-z) | Gibt das Thema Farbe der Zählung Blase |
| data-divider-theme | letter (a-z) | Gibt das Thema Farbe der Liste Teiler |
| data-filter | true | false | Gibt an, ob ein Suchfeld in einer Liste hinzugefügt werden sollen oder nicht |
| data-filter-placeholder | sometext | Veraltete in der Version 1.4. Verwenden Sie den HTML - Platzhalter - Attribut statt. Gibt den Text in das Suchfeld ein . Die Standardeinstellung ist "Filter Artikel ..." |
| data-filter-theme | letter (a-z) | Gibt das Thema Farbe des Suchfilter |
| data-icon | Icons Reference | Gibt das Symbol der Liste |
| data-inset | true | false | Gibt an, ob die Liste mit abgerundeten Ecken und einer gewissen Marge oder nicht gestylt werden sollte |
| data-split-icon | Icons Reference | Gibt das Symbol des geteilten Taste. Die Standardeinstellung ist "Pfeil-r" |
| data-split-theme | letter (a-z) | Gibt das Thema Farbe der geteilten Taste |
| data-theme | letter (a-z) | Gibt das Thema Farbe in der Liste |
Listenpunkt
Eine <li> innerhalb eines <ol> oder <ul> mit data-role="listview" .
| Daten-Attribut | Wert | Beschreibung |
|---|---|---|
| data-filtertext | sometext | Gibt einen Text zu suchen, wenn Elemente filtern. Dieser Text wird dann anstelle der aktuellen Listenelement Text gefiltert werden |
| data-icon | Icons Reference | Gibt das Symbol des Listenelements |
| data-role | list-divider | Gibt einen Teiler für Listenelemente |
| data-theme | letter (a-z) | Gibt das Thema Farbe des Listenelements |
Hinweis: Die Daten-Symbol nur Arbeit auf Listeneinträge mit Links - Attribut.
navbar
<li> Elemente in einem Container mit data-role="navbar" .
| Daten-Attribut | Wert | Beschreibung |
|---|---|---|
| data-icon | Icons Reference | Gibt das Symbol des Listenelements |
| data-iconpos | left | right | top | bottom | notext | Gibt die Position des Symbols |
NavBars erben die Themenfeld aus ihren übergeordneten Container. Es ist nicht möglich, die Daten-Thema Attribut auf einen navbar einzustellen. Die Daten-theme-Attribut kann individuell auf jeden Link in der Navigationsleiste eingestellt werden.
Seite
Ein Behälter mit data-role="page" .
| Daten-Attribut | Wert | Beschreibung |
|---|---|---|
| data-dom-cache | true | false | Gibt an, ob die jQuery DOM-Cache oder nicht für einzelne Seiten zu löschen (wenn auf true gesetzt, müssen Sie darauf achten, das DOM selbst und testen Sie gründlich auf alle mobilen Geräte zu verwalten) |
| data-overlay-theme | letter (a-z) | Gibt die Overlay (Hintergrund) Farbe des Dialogseiten |
| data-theme | letter (a-z) | Gibt die Themenfarbe der Seite |
| data-title | sometext | Gibt den Seitentitel |
| data-url | url | Wert für die URL zu aktualisieren, anstelle der URL verwendet, um die Seite anzufordern |
Pop-up
Ein Behälter mit data-role="popup" .
| Daten-Attribut | Wert | Beschreibung |
|---|---|---|
| data-corners | true | false | Gibt an, ob das Popup abgerundete Ecken haben sollte oder nicht |
| data-dismissible | true | false | Gibt an, ob das Fenster, indem Sie außerhalb des Popup geschlossen werden soll oder nicht |
| data-history | true | false | Gibt an, ob das Popup eine Browser-History Artikel anlegen sollte, wenn geöffnet. Wenn auf false gesetzt ist, wird es keine Geschichte Element zu erstellen, und wird dann nicht über den Browser des "Zurück" -Button verschließbare sein |
| data-overlay-theme | letter (a-z) | Gibt die Overlay (Hintergrund) Farbe des Popup-Fenster. Die Standardeinstellung ist transparent Hintergrund (keine). |
| data-shadow | true | false | Gibt an, ob das Popup-Fenster Schatten haben soll oder nicht |
| data-theme | letter (a-z) | Gibt das Thema Farbe des Popup-Fenster. Standard geerbt, "none" setzt das Popup transparent |
| data-tolerance | 30, 15, 30, 15 | Legt den Abstand von den Kanten des Fensters ( top, right, bottom, left ) |
Ein Anker mit data-rel="popup" :
| Daten-Attribut | Wert | Beschreibung |
|---|---|---|
| data-position-to | origin | jQuery selector | window | Gibt die Position von Pop-up-Boxen. Origin - Standard. Positioniert das Popup über den Link, es öffnet sich. jQuery-Selektor - positioniert das Popup über das angegebene Element. Window - positioniert das Popup in der Mitte des Fensters angezeigt. |
| data-rel | popup | Für das Popup-Fenster zu öffnen |
| data-transition | fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none | Gibt an, wie von einer Seite zur nächsten zu wechseln. Sehen Sie unsere jQuery Mobile Transitions Kapitel. |
Radio knopf
Paare von Etiketten und Eingänge mit type="radio" .
| Daten-Attribut | Wert | Beschreibung |
|---|---|---|
| data-mini | true | false | Gibt an, ob die Taste kleiner oder normaler Größe sein sollte |
| data-role | none | Verhindert , dass jQuery Mobile Stil radiobuttons als verbesserte Tasten |
| data-theme | letter (a-z) | Gibt das Thema Farbe des Radiobutton |
Mehrere Radio - Buttons, der Gruppe verwenden , um die data-role="controlgroup" zusammen mit dem data-type="horizontal|vertical" , ob die Tasten horizontal oder vertikal Gruppe angeben.
Wählen
Alle <select> Elemente.
| Daten-Attribut | Wert | Beschreibung |
|---|---|---|
| data-icon | Icons Reference | Gibt das Symbol des ausgewählten Elements. Die Standardeinstellung ist "arrow-d" |
| data-iconpos | left | right | top | bottom | notext | Gibt die Position des Symbols |
| data-inline | true | false | Gibt an, ob das Auswahlelement inline sein sollte oder nicht |
| data-mini | true | false | Gibt an, ob die Auswahl kleiner oder normaler Größe sein sollte |
| data-native-menu | true | false | Wenn auf false gesetzt, verwendet er eigene benutzerdefinierte Auswahlmenü jQuery (empfehlenswert, wenn Sie das Auswahlmenü wollen auf alle mobilen Geräte die gleiche anzuzeigen) |
| data-overlay-theme | letter (a-z) | Gibt das Thema Farbe des eigenen benutzerdefinierten Auswahlmenü jQuery (verwendet zusammen mit data-native-menu="false" ) |
| data-placeholder | true | false | Kann auf einem eingestellt werden <option> Element einer nicht-nativen wählen |
| data-role | none | Verhindert, dass jQuery Mobile Stil wählen Sie Elemente wie Buttons |
| data-theme | letter (a-z) | Gibt das Thema Farbe des ausgewählten Elements |
Zur Gruppe mehrere Elemente auswählen, die Verwendung data-role="controlgroup" zusammen mit dem data-type="horizontal|vertical" , ob die Elemente Gruppe horizontal oder vertikal zu spezifizieren.
Schieberegler
Eingänge mit type="range" .
| Daten-Attribut | Wert | Beschreibung |
|---|---|---|
| data-highlight | true | false | Gibt an, ob sollte der Schieberegler oder nicht hervorgehoben |
| data-mini | true | false | Gibt an, ob der Schieber kleiner oder normaler Größe sein sollte |
| data-role | none | Verhindert, dass jQuery Mobile Stil Schieberegler als Schaltflächen |
| data-theme | letter (a-z) | Gibt das Thema Farbe des Schiebereglers (der Eingang, Griff und verfolgen) |
| data-track-theme | letter (a-z) | Gibt das Thema Farbe der Gleitbahn |