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

gesetzt ist

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;

Verwendung: $.mobile.hashListeningEnabled = false

Beschreibung: Legen Sie fest, ob location.hash-Änderungen automatisch überwacht und verarbeitet werden sollen. Wenn auf „false“ gesetzt, können Sie manuelle Methoden verwenden, um Hash-Änderungen zu verarbeiten, oder einfach die Verbindung verwenden

Die Adresse wird umgeleitet.

8.defaultPageTransition

Typ: Zeichenfolge, der Standardwert ist Folie

Verwendung: $.mobile.defaultPageTransition = „fade“

Beschreibung: Dieser Optionsparameter legt hauptsächlich den Standardeffekt des Seitenwechsels fest. Wenn er auf „Keine“ eingestellt ist, hat der optionale Parameter „Slideup“ (nach links und rechts schieben) keinen Effekt

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

1. Läuft langsamer als native Apps: Der größte Nachteil besteht meiner Meinung nach darin, dass JQuery Mobile-Apps selbst auf der neuesten Android- und iOS-Hardware (Dual-Core-Tegra-2-Android-Telefone, Dual-Core-iPad2-Tablets) deutlich langsamer sind

In nativen Programmen. Vor allem auf Android ist der Browser langsamer und fehlerhafter als auf iOS (obwohl Google ein auf das Web fokussiertes Unternehmen ist). Ich habe mein Programm nicht auf älteren Android-Geräten getestet, möglicherweise läuft es überhaupt nicht (z. B. Android G1). Ich glaube, dass sich die Hardwaregeschwindigkeit in den nächsten 12 bis 24 Monaten schnell verbessern wird (Quad-Core-Geräte werden beispielsweise bald im Jahr 2011 verfügbar sein) und die Leistung möglicherweise bald kein Problem mehr sein wird. Aber heute ist es wirklich ein Nachteil. Wenn Sie sich nur auf iOS konzentrieren, können Sie mit der Browserleistung rechnen, zumindest ist er in dieser Hinsicht zuverlässig (im Gegensatz zu Android, BlackBerry usw.)

2. Seltsam (browserübergreifende, plattformübergreifende Entwicklung): JQuery Mobile ist immer noch eine Betaversion, daher sind mir viele Fehler aufgefallen. Dennoch reagiert das JQuery-Team weiterhin aktiv auf auf GitHub aufgeworfene Probleme. Ich denke, eines der größten Probleme ist das seltsame Verhalten verschiedener Browser auf verschiedenen mobilen Plattformen. Dieses Problem wurde schon immer kritisiert. Die App sieht vielleicht etwas seltsam aus – obwohl ich denke, dass das JQuery Mobile-Team bei den Widgets und Themes großartige Arbeit geleistet hat, sieht sie doch deutlich anders aus als native Apps. Es ist nicht bekannt, welche Auswirkungen dieses Problem auf die Benutzer hat, aber es ist etwas, dessen man sich bewusst sein sollte.

3. Eingeschränkte Funktionen im Vergleich zu nativen Programmen: Offensichtlich kann im Browser ausgeführtes JavaScript nicht vollständig auf viele Funktionen des Geräts zugreifen. Ein typisches Beispiel ist die Kamera. Allerdings können Tools wie PhoneGap bei der Lösung vieler häufiger Probleme helfen. Ich habe tatsächlich damit begonnen, mehrere Versionen meiner App über PhoneGap unter Verwendung nativer Facebook-Bindungen auf iOS und Android bereitzustellen, und ich bin von den Ergebnissen beeindruckt. Ich werde in einem zukünftigen Blog über meine Erfahrungen mit PhoneGap schreiben.