Forum | Neueste Web-Entwicklung Tutorials
 

jQuery Mobile Datenattribute


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-inlinetrue | false Gibt an, ob die Taste inline sein sollte oder nicht
data-minitrue | 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-minitrue | false Gibt an, ob die Checkbox kleiner oder normaler Größe sein sollte
data-rolenone 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-minitrue | 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-minitrue | 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-minitrue | 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-typehorizontal | 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-cachetrue | 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-fullscreentrue | 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-minitrue | 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-fullscreentrue | 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-fullscreentrue | 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-btntrue | 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-minitrue | false Gibt an, ob der Eingang kleiner oder normaler Größe sein sollte
data-rolenone 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-directionreverse Reverse-Übergang Animation (nur für Seite oder Dialog)
data-dom-cachetrue | 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-prefetchtrue | false Gibt an, ob Seiten in das DOM im voraus zu holen, damit sie verfügbar sind, wenn der Benutzer sie besucht
data-relback | 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-autodividerstrue | 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-filtertrue | 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-insettrue | 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-rolelist-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-iconposleft | 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-cachetrue | 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-urlurl 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-tolerance30, 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-relpopup Für das Popup-Fenster zu öffnen
data-transitionfade | 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-minitrue | false Gibt an, ob die Taste kleiner oder normaler Größe sein sollte
data-rolenone 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-iconposleft | right | top | bottom | notext Gibt die Position des Symbols
data-inlinetrue | false Gibt an, ob das Auswahlelement inline sein sollte oder nicht
data-minitrue | 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-placeholdertrue | false Kann auf einem eingestellt werden <option> Element einer nicht-nativen wählen
data-rolenone 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-highlighttrue | false Gibt an, ob sollte der Schieberegler oder nicht hervorgehoben
data-minitrue | false Gibt an, ob der Schieber kleiner oder normaler Größe sein sollte
data-rolenone 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

Hi Traveller Fashion Tomorrow Startups Daily News Fit Science Amazing Baby Yup This is Japan Take Film Art In Life