Μια απλή εισαγωγή στο jQuery Mobile Framework

Όταν ο κόσμος ανακάλυψε τον Ιστό, τα πράγματα ήταν απαράμιλλα και άψυχα. Για παράδειγμα, για τη δημιουργία μιας απλής εφαρμογής ποντικιού με εικόνα απαιτείται αρκετές γραμμές κώδικα και δεν μπορούσε να λειτουργήσει σε ορισμένες πλατφόρμες.

Αλλά τα πράγματα έγιναν καλύτερα όταν εισήχθη το jQuery, καθώς επέτρεψε στους προγραμματιστές να δημιουργήσουν εκπληκτικές εφαρμογές JavaScript που θα μπορούσαν να λειτουργούν άνετα σε διάφορα μέρη.

Μετά από αυτό, η ομάδα jQuery πήρε τα πράγματα πολύ υψηλότερα αναπτύσσοντας το jQuery UI, το οποίο επέτρεψε στους προγραμματιστές να δημιουργήσουν όμορφες εφαρμογές ιστού στον υπάρχοντα πυρήνα του jQuery.

Ακόμα καλύτερα, το 2010 παρουσιάστηκε το jQuery Mobile το οποίο έκανε την ανάπτυξη πολύ καλύτερη και πιο αποτελεσματική.

Χτισμένο με προκατάληψη στα κινητά τηλέφωνα, το jQuery Mobile είναι ένα αποτελεσματικό, ενοποιημένο πλαίσιο που προσφέρει στοιχεία διεπαφής χρήστη, μετάβαση δεδομένων και άλλες συναρπαστικές δυνατότητες.

Το jQuery Mobile αξιοποιεί τις λειτουργίες των HTML5, CSS3, jQuery, καθώς και του jQuery UI σε ένα ενιαίο πλαίσιο που επιτρέπει στους προγραμματιστές να επιτυγχάνουν συνέπεια σε διαφορετικές πλατφόρμες και συσκευές.

Βασικά χαρακτηριστικά του jQuery Mobile

1. Μεγάλη απλότητα και χρηστικότητα

Το πλαίσιο jQuery Mobile είναι απλό και ευέλικτο. Δεδομένου ότι η διεπαφή διαμόρφωσης του πλαισίου βασίζεται σε mark-up, οι προγραμματιστές μπορούν εύκολα να δημιουργήσουν τις πλήρεις βασικές διεπαφές εφαρμογών τους σε HTML, με ελάχιστο ή καθόλου κώδικα JavaScript.

Πολύπλοκες εργασίες που απαιτούν πολλές γραμμές κώδικα JavaScript, όπως κλήσεις Ajax και χειρισμός DOM, μπορούν εύκολα να πραγματοποιηθούν με λίγες γραμμές κώδικα στο κινητό jQuery.

Για παράδειγμα, εάν θέλουμε ένας χρήστης να κάνει κλικ και να αποκρύψει κάποιο κείμενο μετά τη δημιουργία μιας σελίδας στο DOM, αλλά πριν ολοκληρωθεί η βελτίωση, μπορούμε απλά να χρησιμοποιήσουμε το πρόγραμμα χειρισμού εκδηλώσεων pagecreate . Αυτό είναι κάτι που θα απαιτούσε πολλές γραμμές κώδικα για να επιτευχθεί χωρίς jQuery Mobile.

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

Στον παραπάνω κώδικα, η παράμετρος #mypagetest αναφέρεται στο αναγνωριστικό της σελίδας που καθορίζει το συμβάν της σελίδας. Επίσης, η μέθοδος on () χρησιμοποιείται για την επισύναψη των χειριστών συμβάντων.

Επιπλέον, η απλότητά του επιτρέπει στους προγραμματιστές να χωρίζουν τις εφαρμογές τους σε πολλές σελίδες. Με το πλαίσιο, οι προγραμματιστές μπορούν να "γράφουν λιγότερα και να κάνουν περισσότερα".

2. Προοδευτική βελτίωση και χαριτωμένη υποβάθμιση

Η προοδευτική βελτίωση και η χαριτωμένη υποβάθμιση είναι βασικά χαρακτηριστικά που ενισχύουν την ευελιξία του jQuery Mobile. Τον επιτρέπουν να υποστηρίζει τόσο συσκευές προηγμένης τεχνολογίας όσο και λιγότερο ικανές συσκευές (για παράδειγμα, αυτές που δεν διαθέτουν υποστήριξη JavaScript).

Το πλαίσιο επιτρέπει στους προγραμματιστές να δημιουργούν εφαρμογές στις οποίες μπορείτε να έχετε πρόσβαση με τον μεγαλύτερο αριθμό προγραμμάτων περιήγησης και συσκευών, είτε πρόκειται για τον Internet Explorer 6 είτε για το νεότερο Android ή iPhone.

Το Mobile jQuery δίνει επίσης στους προγραμματιστές τη δυνατότητα να αποδίδουν βασικό περιεχόμενο (όπως είναι ενσωματωμένο) σε βασικές συσκευές. Και οι πιο εξελιγμένες πλατφόρμες και προγράμματα περιήγησης θα εμπλουτίζονται όλο και περισσότερο με τη χρήση πρόσθετων, εξωτερικά συνδεδεμένων JavaScript και CSS.

3. Υποστήριξη για φιλικές προς το χρήστη εισόδους

Κατά τη διάρκεια της ανάπτυξης κινητής τηλεφωνίας jQuery, οι προγραμματιστές μπορούν να περιλαμβάνουν ένα απλό API για την υποστήριξη λειτουργιών εισαγωγής χρήστη με βάση την αφή, το ποντίκι και τον κέρσορα. Στο πλαίσιο περιλαμβάνονται επίσης διάφοροι τύποι στοιχείων μορφής με εύκολο στυλ και φιλικοί στην αφή.

Στα παραδείγματα περιλαμβάνονται τα πλαίσια ελέγχου και τα ραδιόφωνα, το ρυθμιστικό, το φιλτράρισμα αναζήτησης και τα στοιχεία επιλογής μενού. Επίσης, κάθε ένα από τα στοιχεία φόρμας περιλαμβάνει μια εναλλακτική «μίνι» έκδοση, η οποία μπορεί εύκολα να ενσωματωθεί σε κινητές ιστοσελίδες.

Για παράδειγμα, δείτε πώς μπορείτε να δημιουργήσετε ένα κουμπί ελέγχου χρησιμοποιώντας το jQuery Mobile. Παρατηρήστε ότι το χαρακτηριστικό data-mini = "true" προστίθεται για τη δημιουργία μίνι έκδοσης του κουμπιού.

  Click here to agree 

Πέρα από όλα αυτά, για να διασφαλιστεί η βελτιστοποίηση της εμπειρίας του χρήστη σε κινητές συσκευές, το πλαίσιο διαθέτει ένα πλούσιο σύστημα πλοήγησης με γνώμονα το Ajax που επιτρέπει την απρόσκοπτη μετάβαση σε κινούμενες σελίδες.

Με τα συμβάντα μετάβασης jQuery Mobile, μπορείτε να κινήσετε τη μετάβαση από την τρέχουσα ενεργή σελίδα στη νέα σελίδα.

Για παράδειγμα, μπορείτε να χρησιμοποιήσετε το συμβάν pagebeforeshow (ενεργοποιήθηκε στη σελίδα "σε") και το συμβάν pagebeforehide (ενεργοποιήθηκε στη σελίδα "από" κατά τη μετάβαση από τη μία σελίδα στην άλλη. Και τα δύο συμβάντα ενεργοποιούνται πριν ξεκινήσει η κίνηση μετάβασης.

Ας δούμε πώς μπορούν να εφαρμοστούν:

$(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. Προσβασιμότητα

Εκτός από τις δυνατότητες πολλαπλών πλατφορμών, το jQuery για κινητάδημιουργήθηκε με μεγάλη προσοχή για την προσβασιμότητα.

Το πλαίσιο έρχεται με υποστήριξη για Προσβάσιμες Εμπλουτισμένες Εφαρμογές Διαδικτύου (WAI-ARIA) για να βοηθήσει τα άτομα με ειδικές ανάγκες που χρησιμοποιούν αναγνώστες οθόνης και άλλες βοηθητικές τεχνολογίες να έχουν εύκολη πρόσβαση σε ιστοσελίδες.

5. Ελαφρύ μέγεθος

Το ελαφρύ μέγεθος του Mobile jQuery (περίπου 40KB όταν ελαχιστοποιείται) αυξάνει την ταχύτητά του. Επιπλέον, το γεγονός ότι χρησιμοποιεί ελάχιστες εξαρτήσεις εικόνας επιταχύνει επίσης σε μεγάλο βαθμό τις δυνατότητές του.

6. Θέματα widget και UI

Το jQuery Mobile διαθέτει ενσωματωμένο θεματικό σύστημα που επιτρέπει στους προγραμματιστές να καθορίζουν το δικό τους στυλ εφαρμογής. Με το jQuery Mobile Themeroller, οι προγραμματιστές μπορούν να προσαρμόσουν αποτελεσματικά τις εφαρμογές τους ώστε να ταιριάζουν με το χρώμα, τα γούστα και τις προτιμήσεις τους.

Το πλαίσιο συνοδεύεται επίσης από διάφορα καινοτόμα widget πολλαπλών πλατφορμών που επιτρέπουν στους προγραμματιστές να δημιουργούν εφαρμογές που είναι καλύτερα προσαρμοσμένες.

Some of the available widgets are persistent toolbars, buttons, dialogs, and the commonly used popup widget.

7. Responsiveness

The framework's full responsiveness enables the same underlying codebases to fit comfortably in different types of screens, from mobile devices to desktop-sized screens.

Basic Page Structure of jQuery Mobile

jQuery Mobile's structure has all the UI components and attributes required for creating user-friendly and feature-rich mobile web applications and websites of all kinds—whether basic or advanced.

You can use jQuery mobile to build web pages, various types of list views, toolbars, a wide range of form elements and buttons, dialogs, as well as other functionalities.

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.

    Το παραπάνω παράδειγμα απλώς χαράζει την επιφάνεια των πραγμάτων που μπορούν να επιτύχουν οι προγραμματιστές χρησιμοποιώντας το jQuery Mobile. Η τεκμηρίωση του πλαισίου είναι εύκολο να ακολουθηθεί και περιγράφει τις πολλές δυνατότητές του, συμπεριλαμβανομένης της σύνδεσης σελίδων, της ενσωμάτωσης κινούμενων μεταβάσεων σελίδας και του σχεδιασμού κουμπιών.

    συμπέρασμα

    Το jQuery for mobile είναι ένα πλούσιο σε πόρους πλαίσιο που έχει δημιουργηθεί με δυνατότητες jQuery, HTML5 και CSS για τον αποτελεσματικό χειρισμό συγκεκριμένων ζητημάτων συμβατότητας μεταξύ πλατφορμών, μεταξύ συσκευών και μεταξύ προγραμμάτων περιήγησης.

    Το πλαίσιο προσφέρει εξαιρετικές ευκαιρίες για τη δημιουργία εφαρμογών για κινητά και ιστούς που είναι ισχυρές, πλήρως ανταποκρινόμενες και μελλοντικές.

    Θα το δοκιμάσετε;