Eine einfache Einführung in das jQuery Mobile Framework

Als die Welt das Web entdeckte, waren die Dinge nicht aufregend und leblos. Zum Erstellen einer einfachen Mouseover-Anwendung für Bilder waren beispielsweise mehrere Codezeilen erforderlich, die auf einigen Plattformen nicht funktionieren konnten.

Mit der Einführung von jQuery wurde es jedoch besser, da Entwickler beeindruckende JavaScript-Anwendungen erstellen konnten, die an verschiedenen Orten bequem ausgeführt werden konnten.

Danach hat das jQuery-Team die Entwicklung der jQuery-Benutzeroberfläche noch weiter vorangetrieben, sodass Entwickler auf dem vorhandenen jQuery-Kern gut aussehende Webanwendungen erstellen konnten.

Besser noch, 2010 wurde jQuery Mobile eingeführt, was die Entwicklung viel besser und effizienter gemacht hat.

JQuery Mobile wurde mit Schwerpunkt auf Mobiltelefonen entwickelt und ist ein effektives, einheitliches Framework, das UI-Komponenten, Datenübergänge und andere aufregende Funktionen bietet.

jQuery Mobile nutzt die Funktionen von HTML5, CSS3, jQuery sowie der jQuery-Benutzeroberfläche in einem einzigen Framework, mit dem Entwickler Konsistenz über verschiedene Plattformen und Geräte hinweg erreichen können.

Grundfunktionen von jQuery Mobile

1. Große Einfachheit und Benutzerfreundlichkeit

Das jQuery Mobile-Framework ist unkompliziert und flexibel. Da die Konfigurationsoberfläche des Frameworks auf Markups basiert, können Entwickler ihre vollständigen grundlegenden Anwendungsoberflächen problemlos in HTML mit minimalem oder keinem JavaScript-Code erstellen.

Komplexe Aufgaben, die mehrere Zeilen JavaScript-Code erfordern, wie Ajax-Aufrufe und DOM-Manipulation, können mit wenigen Codezeilen in Mobile jQuery problemlos ausgeführt werden.

Wenn ein Benutzer beispielsweise nach dem Erstellen einer Seite im DOM auf Text klicken und ihn ausblenden soll, bevor die Erweiterung abgeschlossen ist, können Sie einfach den Ereignishandler für die Seitenerstellung verwenden . Dies erfordert mehrere Zeilen Code, um ohne jQuery Mobile ausgeführt zu werden.

$(document).on("pagecreate","#mypagetest",function(){ $("span").on("click",function(){ $(this).hide(); }); });

Im obigen Code bezieht sich der Parameter #mypagetest auf die ID der Seite, die das Seitenereignis angibt. Außerdem wird die on () -Methode verwendet, um die Ereignishandler anzuhängen.

Darüber hinaus können Entwickler aufgrund ihrer Einfachheit ihre Anwendungen in mehrere Seiten aufteilen. Mit dem Framework können Entwickler "weniger schreiben und mehr tun".

2. Fortschreitende Verbesserung und anmutige Verschlechterung

Progressive Verbesserungen und eine ordnungsgemäße Verschlechterung sind wichtige Merkmale, die die Agilität von jQuery Mobile fördern. Sie ermöglichen die Unterstützung von High-End- und weniger leistungsfähigen Geräten (z. B. solchen ohne JavaScript-Unterstützung).

Mit dem Framework können Entwickler Anwendungen erstellen, auf die die meisten Browser und Geräte zugreifen können, unabhängig davon, ob es sich um Internet Explorer 6 oder das neueste Android oder iPhone handelt.

Mit Mobile jQuery können Entwickler auch grundlegende Inhalte (wie sie erstellt wurden) auf Basisgeräten rendern. Die anspruchsvolleren Plattformen und Browser werden zunehmend durch zusätzliches, extern verknüpftes JavaScript und CSS erweitert.

3. Unterstützung für benutzerfreundliche Eingaben

Während der Entwicklung von jQuery Mobile können Entwickler eine unkomplizierte API einbinden, um auf Benutzereingaben basierende Benutzereingabefunktionen für Berührung, Maus und Cursor zu unterstützen. Das Framework enthält auch verschiedene Arten von einfach zu gestaltenden und berührungsfreundlichen Formularelementen.

Beispiele hierfür sind Kontrollkästchen und Funkgeräte, Schieberegler, Suchfilterung und Menüauswahlelemente. Außerdem enthält jedes Formularelement eine alternative Mini-Version, die problemlos in mobile Webseiten integriert werden kann.

Hier erfahren Sie beispielsweise, wie Sie mit jQuery Mobile ein Kontrollkästchen erstellen. Beachten Sie, dass das Attribut data-mini = "true" hinzugefügt wird, um eine Mini-Version der Schaltfläche zu erstellen.

  Click here to agree 

Um sicherzustellen, dass die Benutzererfahrung auf Mobilgeräten optimiert wird, verfügt das Framework über ein umfangreiches Ajax-gesteuertes Navigationssystem, mit dem animierte Seitenübergänge nahtlos durchgeführt werden können.

Mit jQuery Mobile-Übergangsereignissen können Sie den Übergang von der aktuell aktiven Seite zur neuen Seite animieren.

Beispielsweise können Sie beim Übergang von einer Seite zur nächsten das Ereignis pagebeforeshow (ausgelöst auf der Seite "to") und das Ereignis pagebeforehide (ausgelöst auf der Seite "from") verwenden. Beide Ereignisse werden ausgelöst, bevor die Übergangsanimation beginnt.

Mal sehen, wie sie angewendet werden können:

$(document).on("pagebeforeshow","#myfirstpage",function(){ // When entering myfirstpage alert("myfirstpage is about to appear"); }); $(document).on("pagebeforehide","#myfirstpage",function(){ // When leaving myfirstpage alert("myfirstpage is about to disappear"); });

4. Zugänglichkeit

Neben den plattformübergreifenden Funktionen bietet jQuery for Mobilewurde mit starker Berücksichtigung der Zugänglichkeit erstellt.

Das Framework bietet Unterstützung für Accessible Rich Internet Applications (WAI-ARIA), um behinderten Menschen mit Bildschirmleseprogrammen und anderen unterstützenden Technologien den einfachen Zugriff auf Webseiten zu erleichtern.

5. Leichte Größe

Die geringe Größe von Mobile jQuery (ca. 40 KB bei Minimierung) trägt zu seiner Schnelligkeit bei. Darüber hinaus beschleunigt die Tatsache, dass nur minimale Bildabhängigkeiten verwendet werden, seine Funktionen erheblich.

6. Theming- und UI-Widgets

jQuery Mobile verfügt über ein integriertes Themensystem, mit dem Entwickler ihr eigenes Anwendungsstil bestimmen können. Mit dem jQuery Mobile Themeroller können Entwickler ihre Anwendungen effektiv an ihre Farbe, ihren Geschmack und ihre Vorlieben anpassen.

Das Framework enthält außerdem verschiedene innovative plattformübergreifende Widgets, mit denen Entwickler Anwendungen erstellen können, die besser angepasst werden können.

Einige der verfügbaren Widgets sind dauerhafte Symbolleisten, Schaltflächen, Dialogfelder und das häufig verwendete Popup-Widget.

7. Reaktionsfähigkeit

Die volle Reaktionsfähigkeit des Frameworks ermöglicht es, dass dieselben zugrunde liegenden Codebasen bequem in verschiedene Bildschirmtypen passen, von mobilen Geräten bis hin zu Bildschirmen in Desktopgröße.

Grundlegende Seitenstruktur von jQuery Mobile

Die Struktur von jQuery Mobile verfügt über alle UI-Komponenten und -Attribute, die zum Erstellen benutzerfreundlicher und funktionsreicher mobiler Webanwendungen und Websites aller Art erforderlich sind - ob einfach oder erweitert.

Mit jQuery Mobile können Sie Webseiten, verschiedene Arten von Listenansichten, Symbolleisten, eine Vielzahl von Formularelementen und Schaltflächen, Dialoge und andere Funktionen erstellen.

Importantly, since jQuery Mobile is created on top of jQuery core, it lets developers leverage jQuery UI code and access key facilities. These include robust animation and image effects for web pages, DOM manipulation, event handling, and Ajax for server communication.

Let's get a feel for how jQuery mobile development code looks.

For example, in this time of the COVID-19 pandemic when most people are working from home or from co-working spaces, let's create a simple web page that demonstrates some team management mistakes that people make.

Here is the code:

   jQuery Mobile Example 

fCC jQuery Mobile Sample

COVID-19 Work-From-Home Team Management Mistakes To Avoid

    • Using Unnecessary Tools
    • Foregoing Team Evaluations
    • Micromanaging
    • Hiring Too Quickly
    • Not Having Contingencies

    alfrickopidi.com, 2020 - Copyright

    Here is the output when the above mobile jQuery lines of code are opened on a browser:

    Notably, when the browser is decreased or increased, the size of the items in the list also adjusts appropriately. Therefore, the web page can be easily accessed in various devices with different screen resolutions without worrying about lack of consistency. The size of the items will change accordingly to suit the type of device.

    As you can see in the above code sample, the document is a simple HTML5 that includes the following three things:

    • Files from the jQuery Mobile CSS (jquery.mobile-1.4.5.min.css)
    • Files from the jQuery repository (jquery-1.11.1.min.js)
    • Files from the jQuery Mobile repository (jquery.mobile-1.4.5.min.js)

    These files are directly linked to the jQuery CDN. Another alternative is to head over to the download page to get these files and host them on a private server.

    Importantly, including the "viewport" metatag during jQuery mobile developmentinstructs devices that the page width and the device screen width are equivalent (width=device-width).

    The tag also instructs the browser to zoom in to 100 per cent (scale=1). If the scale is changed to 2, for instance, the browser will zoom the web page by 50 per cent.

    A closer examination of the code reveals some strange "data-"attributes scattered throughout it. This is an improved feature of HTML5 that enables developers to pass organized data across an application – for example, the data-role="header" attribute defines the head section of the web page.

    The above example just scratches the surface of the things developers can achieve using jQuery Mobile. The framework's documentation is easy to follow and describes its many features, including linking pages, incorporating animated page transitions, and designing buttons.

    Conclusion

    jQuery for mobile is a resource-rich framework built with jQuery, HTML5, and CSS capabilities to handle certain cross-platform, cross-device and cross-browser compatibility issues effectively.

    The framework offers great opportunities for creating mobile and web applications that are powerful, fully responsive, and future-ready.

    Will you give it a try?