jQuery Mobile verwendet web(6)_jquery

jquery mobiler Ereignistyp für mobile Geräte.

　1.Touch-Ereignis.

Tippen Sie schnell, berühren Sie den Bildschirm und verlassen Sie ihn, ähnlich einem vollständigen Klickvorgang.
Tippen und Halten Berühren Sie den Bildschirm und halten Sie ihn eine Zeit lang gedrückt.
Das Wischen wird ausgelöst, wenn sich das Bildschirmpixel innerhalb von 1 Sekunde horizontal um 30 Pixel bewegt.
​ ​ nach links wischen Nach links schieben
​ ​ Nach rechts wischen, als würde man nach rechts gleiten.

　2. Richtungsänderungsereignis

Die Ereignisfunktion „orientierungsänderung“ wird ausgelöst, wenn sich die Ausrichtung des Mobilgeräts ändert. Der zweite Parameter in der Rückruffunktion des Ereignisses gibt einen Parameter zurück, der zur Identifizierung der aktuellen Ausrichtung verwendet wird,
Dieser Parameter hat zwei Rückgabewerte: Portrait (vertikal) und Landscarp (horizontal).

3. Scroll-Ereignis,

scrollstart Dieses Ereignis wird ausgelöst, wenn das Scrollen beginnt.
scrollend Dieses Ereignis wird ausgelöst, wenn das Scrollen endet.

　4. Einblenden/Ausblenden

Das Pagebeforeshow-Ereignis wird durch Animationseffekte ausgelöst, bevor die Ansicht auf dem Bildschirm erscheint.
Pagebeforehide löst ein Ereignis aus, bevor die Ansicht durch Animationseffekte ausgeblendet wird,
Das Pageshow-Ereignis wird ausgelöst, wenn die Ansicht durch Animationseffekte auf dem Bildschirm angezeigt wird.
Pagehide wird ausgelöst, wenn die Ansicht durch Animationseffekte ausgeblendet wird.

Beispielcode:

　　$("div").live("pageshow",function(event,ui){ 
　　　　　　　　alert("this page just hidden"+ui.prevPage)
　　　　　　})

　5. Mausereignisse simulieren

vmouseover behandelt Berührungs- und Mouseover-Ereignisse einheitlich.
vmousedown behandelt Berührungs- und Mausdruckereignisse einheitlich.
vmousemove behandelt Berührungs- und Mausbewegungsereignisse einheitlich.
vmouseup behandelt Berührungs- und Maustastenfreigabeereignisse einheitlich.
vclick behandelt Berührungs- und Mausklickereignisse einheitlich.
vmousecancel behandelt Berührungs- und Mausbewegungsereignisse einheitlich.

Seitenaufrufhilfen

　1. $.mobile.changePage

Ändern Sie den Umschalteffekt zwischen zwei Ansichten durch funktionale Programmierung. Normalerweise wird der Umschalteffekt beim Klicken auf einen Hyperlink oder beim Absenden eines Formulars angepasst.

　　 Grammatik: 　　

　$.mobile.changePage(to,options);
　　　　　　to 是必选参数， 可以传递的参数类型包括字符串，对象。
 　　　　　　options 可选，传递的是一个JSON 数据格式对象，
 　　　　　　用法： 以下实例将改变decondPage.html 的页面效果
 　　　　　　$.mobile.changePage("secondPage.html",{ 
　　　　　　　　transition:"slidedown"
　　　　　　}) 

　Formularübermittlungsvorgang　

　$.mobile.changePage("submit.php",{ 
　　　　　　type:"post";
　　　　　　data:$("form#add").seriaize();
　　　　})

　2.$.mobile.loaPage

Die Hauptfunktion besteht darin, externe Seiten zu laden und in das DOM-Element der aktuellen Seite einzufügen.
​​​$.mobile.loadPage(url,options);
URL ist ein erforderlicher Parameter, der eine absolute oder relative URL-Adresse
übergibt Optionen sind optionale Parameter, die ein JSON-Datenobjekt übergeben.

　Beispiel: 　

$.mobile.loadPage("secomdPage.html");
　　　　　提交表单并加载结果页面：
 　　　　$.mobile.loadPage("result.php",{ 
　　　　　　type:"get",
　　　　　　data:$("form#search").serizlize();
　　　　})

Datenspeicherung:

　 1.jqmData() Methode;

Sie können beliebige Daten an das Element binden.

　　$.mobile.jqmData(element,key,value)
Der Elementparameter gibt das Element an, an das Daten gebunden werden müssen Der Schlüssel ist der Attributname, der an Daten gebunden werden muss,
　　　Die Daten sind an den Wert gebunden.

　

2.jqmRemoveData() Methode:

Mit dieser Methode werden die an das Element gebundenen Daten entfernt,

　　$.mobile.jqmRemoveData([name])
Name ist ein optionaler Parameter, der angibt, welches Datenattribut entfernt werden muss. Wenn kein Parameter übergeben wird, müssen alle Daten des Elements entfernt werden.

　

3.jqmHasData() Methode

Bestimmen Sie, ob gebundene Daten für das Element vorhanden sind,

　　　$.mobile.jqmHasData(element);
Der Elementparameter ist ein DOM-Element zur Datenprüfung.

Adresspfad-Helfer:

　

1. URL-Adresse analysieren

Die Funktion $.mobile.path.parseUrl analysiert eine URL-Spezifikation und gibt ein Objekt zurück, das alle Parameterwerte enthält, sodass wir problemlos auf die Parametereigenschaften der URL-Adresse zugreifen können.

　　

Die Syntax der parseUrl-Funktion

　　$.mobile.path.parseUrl(url);

Der URL-Parameter ist eine relative oder absolute URL-Adresse und der übergebene Parameter ist erforderlich.
Die parseUrl-Funktion gibt ein Objekt zurück, das umfangreiche Eigenschaften enthält.
Attribut: Hash Beschreibung: Der gesamte Zeicheninhalt nach dem #-Zeichen entspricht dem Hash des Standorts
Attribut: Host Beschreibung: Der Hostname und die Portnummer der URL
Attribut: Hostname Beschreibung: Gibt den Hostnamen zurück, der nur die URL enthält.
Attribut: href Beschreibung: Gibt die gesamte URL-Adresse zurück.
Attribut: Pfadname Beschreibung: Gibt den zugehörigen Pfad der Datei oder des Verzeichnisses
zurück Attribut: Port Beschreibung: Anforderung zur Rückgabe der Portnummer von URL
Attribut: portocol Beschreibung: Gibt das Protokoll der Anforderungs-URL-Adresse zurück, z. B. http https
Attribut: Suche Beschreibung: Die Anforderungsparameter nach „?“ in der Rücksendeadresse
Attribut: Autorität Beschreibung: Gibt die Adresse zurück, die aus Benutzername, Passwort, Hostname und Portnummer besteht,
Attribut: Verzeichnis Beschreibung: Gibt den Verzeichnispfad der angeforderten URL-Adresse zurück,
Attribut: Domäne Beschreibung: Gibt den Pfad zurück, der aus Protokollprotokoll und Autorität
besteht Attribut: Dateiname Beschreibung: Gibt den angeforderten URL-Dateinamen
zurück Attribut: hrefOfHash Beschreibung: Gibt den URL-Pfad zurück, der den Hash-Wert nicht enthält.
Attribut: hrefOfSearch Beschreibung: Gibt den URL-Pfad zurück, der keine Anforderungsparameter und Hashwerte enthält.
Attribut: Passwort Beschreibung: Gibt das Passwort in der Anforderungs-URL zurück, z. B. das FTP-Protokoll-Passwort.
Attribut: Benutzername Beschreibung: Gibt den Benutzernamen in der Anforderungs-URL zurück, beispielsweise den Benutzernamen des FTP-Protokolls.

Einblenden/Ausblenden wird geladen

Die Methode zum Anzeigen des Ladedialogfelds ist

　　　$.mobile.showPageLoadingMse();
Die Methode zum Ausblenden des Ladedialogfelds ist
　　　$.mobile.hidePageLoadingMse();

3 Vorteile von JQuery Mobile und HTML5

1. Beginnen Sie schnell und unterstützen Sie eine schnelle Iteration: In etwas mehr als einer Woche habe ich durch das Lesen der JQuery Mobile-Dokumentation und des von O'Reilly veröffentlichten JQuery Mobile-Buches eine vorläufige Version der App fertiggestellt, die funktioniert. Ich hatte vorher keine Erfahrung in der Entwicklung von HTML5/JQuery Mobile. Im Vergleich zu Android und iOS ist die Erstellung Ihrer Benutzeroberfläche und Logik mit JQuery Mobile und HTML5 viel schneller als die Erstellung unter dem nativen System.

Anmerkung: Natives System: Ursprüngliches Betriebssystem, z. B. das native Android-System, bei dem es sich um ein von Google veröffentlichtes, unverändertes System handelt. In diesem Artikel beziehen sich native Anwendungen auf Programme, die direkt mithilfe der vom System bereitgestellten API entwickelt wurden, was den von JQuery Mobile entwickelten Programmen entspricht.

Ich habe festgestellt, dass die Builder-Benutzeroberfläche von Apple eine steile Lernkurve erfordert, und auch das Erlernen des komplizierten Layoutsystems von Android war zeitaufwändig. Darüber hinaus ist es ziemlich kompliziert, eine Listenansicht mit einer Remote-Datenquelle zu verbinden und mithilfe von nativem Code ein ansprechendes Erscheinungsbild zu erzielen (ListView auf Android, UITableView auf iOS). Dies gelang mir mit meinen vorhandenen Kenntnissen in JavaScript und HTML/CSS . Implementieren Sie schnell dieselbe Funktion, ohne neue abstrakte Konzepte wie Adapter, Delegaten usw. zu lernen. Sie können einfach JQuery-Code schreiben.

2. Vermeiden Sie den mühsamen Genehmigungsprozess im App Store und den Aufwand beim Debuggen und Erstellen: Der mühsamste Prozess bei der Entwicklung von Anwendungen für Mobiltelefone, insbesondere iOS-Mobiltelefone, besteht darin, die Genehmigung vom Apple App Store einzuholen. Um eine native App für iOS-Benutzer freizugeben, müssen Sie einen ziemlich langen Prozess abwarten (es kann Tage, vielleicht sogar Wochen dauern). Nicht nur die erste Veröffentlichung eines Programms ist eine Herausforderung, sondern auch jedes weitere Upgrade. Dies verkompliziert den Qualitätssicherungs- und Freigabeprozess und verursacht zusätzliche Zeit. Da es sich bei einer JQuery Mobile-Anwendung nur um eine Webanwendung handelt, übernimmt sie die Vorteile aller Webumgebungen: Wenn Benutzer Ihre Website laden, werden sie sofort auf die neueste Version „aktualisiert“. Fehler können sofort behoben und neue Funktionen hinzugefügt werden. Selbst im Android-System sind die Anforderungen des Anwendungsmarktes viel entspannter als im Apple-Umfeld. Es ist auch eine gute Sache, Produkt-Upgrades durchzuführen, ohne dass Benutzer es wissen.

Ein weiterer Vorteil besteht darin, dass es einfacher ist, eine Beta- oder Testversion zu veröffentlichen. Sagen Sie dem Benutzer einfach, er solle Ihre URL in seinem Browser öffnen, und fertig! Es besteht keine Notwendigkeit, das verrückte DRM von iOS oder die notwendige APK von Android zu berücksichtigen.

3. Unterstützt plattform- und geräteübergreifende Entwicklung: Ein großer Vorteil ist, dass meine App sofort auf Android und IOS und auch auf anderen Plattformen funktioniert. Als unabhängiger Entwickler ist die Pflege der Codebasis für verschiedene Plattformen ein riesiges Unterfangen. Das Schreiben hochwertiger mobiler Anwendungen für eine einzelne mobile Plattform erfordert einen Vollzeitjob, und die wiederholte Ausführung ähnlicher Aufgaben für jede Plattform erfordert viele Ressourcen. Die Möglichkeit, dass die App sowohl auf Android- als auch auf iOS-Geräten funktioniert, ist für mich ein großer Bonus.

Um noch einen Schritt weiter zu gehen, ist es besonders bei Geräten mit verschiedenen Android-Ablegern in allen Größen und Formen wirklich wichtig, dass Ihre App auf Telefonen mit einer Vielzahl unterschiedlicher Bildschirmauflösungen gut aussieht. Für anspruchsvolle Android-Entwickler kann das Einrichten von Bildschirmaufteilungen basierend auf der Bildschirmgröße (Zoom von vollständig minimiert auf maximiert) viel Entwicklungszeit in Anspruch nehmen. Da der Browser es auf jedem Gerät gleich darstellt, müssen Sie sich über diesen Aspekt keine Sorgen machen.