jquery mobile verwendet web(5)_jquery

Geordnete Liste

 　　<div data-role="content">
　　　　<ol data-role="listview" data-theme="g">
　　　　　　<li><a href="#"> List 1</a></li>
　　　　　　<li><a href="#"> List 2</a></li>
　　　　　　<li><a href="#"> List 3</a></li>
　　　　</ol>
 　　</div>

Schreibgeschützte Liste

 　　<div data-role="content">
　　　　<ul data-role="listview" data-inset="true">
　　　　　　<li><a href="#"> List 1</a></li>
　　　　　　<li><a href="#"> List 2</a></li>
　　　　　　<li><a href="#"> List 3</a></li>
　　　　</ul>
 　　</div>

Separierbare Schaltflächenliste

 　　<div data-role="content">
　　　　<ul data-role="listview" data-theme="g" data-split-icon="gear" data-split-theme="d">
　　　　　　<li><a href="#"> List 1</a><a href="#"></a></li>
　　　　　　<li><a href="#"> List 2</a><a href="#"></a></li>
　　　　　　<li><a href="#"> List 3</a><a href="#"></a></li>
　　　　</ul>
 　　</div>

Enthält eine Blasenanzahlliste

 　　<div data-role="content">
　　　　<ul data-role="listview" data-theme="g">
　　　　　　<li><a href="#"> List 1</a><span class="ui-li-count">33</span></li>
　　　　　　<li><a href="#"> List 2</a><span class="ui-li-count">222</span></li>
　　　　　　<li><a href="#"> List 3</a><span class="ui-li-count">111</span></li>
　　　　</ul>
 　　</div>

Konfigurationsoptionen.

Wenn jquery Mobile ausgeführt wird, löst es ein mobileinit-Ereignis für das Dokumentobjekt aus. Durch dieses Ereignis können wir die entsprechende Standardfunktion überschreiben. Konfigurieren Sie verschiedene Attributparameter.

So verwenden Sie es:

　$(document).bind("mobileinit",function(){ 
　　　　　　　　//在这里添加用户自定义代码。
 　　　　})
 　　　　<script src="jquery.js"></script>
 　　　　<script src="自定义事件处理函数的js文件"></script>
 　　　　<script src="jquerymobile.js"></script>

Stellen Sie Entwicklern ein Objekt zur Verfügung: $.mobile. Der Zweck dieses Objekts besteht darin, verschiedene Optionen und Standardkonfigurationen zu konfigurieren.

$(document).bind("mobileinit",function(){ 
　　　　　　$.mobile.foo = "foo";l
　　　　})

　　Konfigurierbare Optionen:

1.ns

Typ: String, der Standardwert ist ein nicht leerer String.
Verwendung: $.mobile.ns="mynamespace"
Beschreibung: Passen Sie den Namespace an und vermeiden Sie Namespaces.

2.autolinitializePage

Typ: Boolescher Typ, Standard ist true.
Verwendung: $.mobile.autoInitializePage = false
Beschreibung: Wenn das Seiten-DOM-Element bereit ist, lädt das Programm standardmäßig automatisch die Funktion $.mobile.initializePage, wenn sie auf

falsch

Die Seite wird nicht erstellt und bleibt ausgeblendet.

3.subPageUrlKey

Typ: Zeichenfolge, der Standardwert ist ui-page.

Verwendung: $.mobile.subPageUrlkey = "page"

Beschreibung: Ändern Sie den Schlüsselparameternamen der jQuery Mobile-Ansicht in der URL-Adresse. Wenn der ausgewählte Parameter in subPageUrlKey = „page“ geändert wird, wird die URL-Adresse

wird in
geändert

　　　example.html?page=subpage.

4.activePageClass

Typ: Zeichenfolge, der Standardwert ist ui-page-active

Verwendung: $.mobile.activePageClass = „ui-ns-page-active“.

Beschreibung: Die Hauptfunktion besteht darin, den Ansichts-CSS-Stil der aktiven Statusseite und des Übergangsstatus anzupassen.

5.activeBtnClass

Typ: Zeichenfolge, der Standardwert ist ui-btn-active

Verwendung: $.mobile.activeBtnClass = "ui-ns-page-active"

Beschreibung: Die Hauptfunktion dieser Option besteht darin, den Stil des aktiven Mädchens anzupassen.

6.ajaxEnabled

Typ: Boolescher Wert, der Standardwert ist true

Verwendung: $.mobile.ajaxEnabled = false

Beschreibung: Legen Sie fest, ob Ajax zum Laden der Seite oder zum Senden von Daten verwendet werden soll, wenn auf eine Verbindung geklickt oder ein Formular oder eine Schaltfläche gesendet wird.

　7.hashListeningEnabled

Typ: Boolescher Wert, der Standardwert ist true;

Slideup (gleiten von unten nach oben) Slidedown (von oben nach unten) Pop (von der Mitte)

9.touchOverflowEnabled

Typ: Boolescher Wert, der Standardwert ist false

Verwendung: $.mobile.touchOverflowEnabled = true

Beschreibung: Ob die native Bildlauffunktion des Geräts verwendet werden soll.

　10.defaultDialogTransition

Typ: Zeichenfolge, der Standardwert ist pop

Verwendung: $.mobile.defaultDialogTransition = "none"

Beschreibung: Legen Sie den Popup-Effekt des Ajax-Dialogfelds fest. Wenn dieser auf „Keine“ eingestellt ist, tritt kein übermäßiger Effekt auf.

　11.minScrollBack

Typ: String, der Standardwert ist 150

Verwendung: $.mobile.minScrollBack = „200“

Beschreibung: Die Scroll-Positionsspeicherfunktion wird nur ausgelöst, wenn die Scroll-Position die eingestellte Höhe überschreitet.

　12.loadingMessage

Typ: StringDer Standardwert ist Laden

Verwendung: $.mobile.loadingMessage = "Loading"

Beschreibung: Legen Sie den Textinhalt des Seitenladestatus fest. Bei „false“ wird nichts angezeigt.

　13.pageLoadErrorMessage

Typ: Zeichenfolge, Standardwert ist Fehler beim Laden der Seite

Verwendung: $.mobile.pageLoadErrorMessage = „Laden der Seite fehlgeschlagen“

Beschreibung: Legen Sie den Textinhalt der Eingabeaufforderung fest, die angezeigt wird, wenn die Ajax-Seitenanforderung fehlschlägt

14. Klasse A

Typ: Boolescher Wert, der Standardwert ist der Wert von $.support.mediaquery

Verwendung: $.mobile.gradeA

Beschreibung: True wird zurückgegeben, wenn der Browser alle unterstützten Bedingungen erfüllt

3 Nachteile von JQuery Mobile und HTML5