Que sont les bibliothèques mobiles jquery ?

Les bibliothèques mobiles jquery incluent : 1. Mobiscroll, utilisé pour le défilement par rotation, la sélection de la date et de l'heure sur les appareils à écran tactile ; 2. "Ion.Sound", utilisé pour la notification sonore instantanée 3. mmenu, utilisé pour créer une navigation fluide dans le style des tiroirs ; menu 4. Naver, utilisé pour créer une navigation réactive ; 5. gShake, etc.

L'environnement d'exploitation de ce tutoriel : système Windows 7, jquery version 1.10.2, ordinateur Dell G3.

Avec le développement de l'Internet mobile, les pages Web depuis PC ne peuvent pas s'adapter pleinement aux besoins des pages mobiles, ce qui fait émerger l'expérience de conception réactive et devenir une tendance. C'est ce type de demande qui a contribué à la popularité de jQuery Mobile. . jQuery Mobile, un framework basé sur jQuery et jQuery UI, hérite de l'essence de « écrire moins, faire plus » de jQuery, a une bonne évolutivité et personnalisation, et est entièrement compatible avec divers appareils de plate-forme. Pour les types de téléphones mobiles non pris en charge, les styles de base seront également. être donné.

Cet article détaille 15 plug-ins (bibliothèques) jQuery Mobile très excellents et pratiques, couvrant un large éventail de types, allant de la sélection de date/heure, à la notification sonore instantanée, au menu de navigation dans les tiroirs, au style iOS, à la navigation en accordéon, au masquage/affichage. des mots de passe, des effets de caisson lumineux, des cartes interactives assez sympas, des vibrations de page, du Native, un affichage d'album photo/galerie, etc., il y a toujours quelque chose qui vous fascinera.

1. Mobiscroll

https://mobiscroll.com/

Pour de nombreux développeurs, Mobiscroll n'est pas étranger, et peut même être considéré comme assez familier. Mobiscroll est un très bon plug-in jQuery Mobile, principalement utilisé pour le défilement par rotation/la sélection de la date et de l'heure sur les appareils à écran tactile. Grâce à lui, les utilisateurs peuvent effectuer des sélections de date et d'heure en faisant simplement glisser des chiffres (cliquez sur le lien pour voir la Démo).

Mobiscroll prend non seulement en charge toutes les valeurs personnalisées, permettant aux utilisateurs de personnaliser entièrement le thème, mais peut également être utilisé pour le contrôle de sélection locale des listes déroulantes. De plus, il est également très pratique à utiliser. Il fournit non seulement aux développeurs un jeu de couleurs très avancé, mais peut également être entièrement modifié via des fichiers CSS. Prend en charge tous les navigateurs mobiles et de bureau grand public, notamment iOS, Android, WP8, Windows 8, BlackBerry, etc.

2. Ion.Sound

http://ionden.com/a/plugins/ion.sound/en.html

Aujourd'hui, les sites Web et mobiles regorgent d'événements divers, tels que de nouveaux e-mails, nouveaux messages de chat, mises à jour de contenu, etc. Mais le problème est souvent que les notifications instantanées ne peuvent pas immédiatement attirer l'attention de l'utilisateur. Grâce au plug-in Ion.Sound, cette tâche peut être très bien réalisée.

Ion.Sound est un plug-in jQuery permettant de jouer des sons d'événements. Il adopte la licence MIT et contient 25 sons gratuits. Jusqu'à présent, Ion.Sound a été utilisé avec succès dans les navigateurs de bureau tels que Google Chrome, Mozilla Firefox, Opera, Safari et IE (9.0+) et prend en charge tous les principaux navigateurs mobiles.

3. jQuery.mmenu

http://mmenu.frebsite.nl/

jQuery.mmenu est un plug-in jQuery permettant de créer des menus de navigation fluides avec une seule ligne de code JavaScript. menu coulissant très cool sur votre site Web mobile qui ressemble à une application mobile.

Avec jQuery.mmenu, les développeurs peuvent convertir des listes non ordonnées en éléments de menu et les personnaliser. jQuery.mmenu fournit non seulement aux développeurs la personnalisation des menus courants tels que l'ouverture, la fermeture, la commutation, etc., mais fournit également des paramètres pour la position du menu (gauche/droite), l'affichage ou non du compteur d'éléments de menu et d'autres options.

4. Naver

http://www.benplum.com/formstone/naver/

Naver est un plug-in jQuery spécialement utilisé pour créer une navigation réactive. Grâce à lui, les développeurs peuvent facilement créer des effets de navigation très conviviaux pour les terminaux mobiles, et peuvent également créer une navigation dynamique. Naver est compatible avec Firefox, Chrome, Safari et IE (7+) et est publié sous licence MIT. Il peut être utilisé librement et gratuitement, que ce soit dans des projets personnels ou commerciaux.

5, iosOverlay.js

http://taitems.github.io/iOS-Overlay/

iosOverlay.js est un plug-in jQuery permettant de créer des effets d'invite/notification de style iOS, prenant en charge IE7+, Google Chrome, Firefox, Opera, Safari (ordinateur de bureau et mobile). Rappelons que si vous souhaitez éviter que l'icône ne scintille lors du chargement, les développeurs doivent précharger les ressources image.

De plus, il existe deux dépendances facultatives pour iosOverlay.js, à savoir Spin.js et jQuery. Si les développeurs souhaitent utiliser son objet de liste déroulante, ils doivent utiliser Spin.js, et pour les navigateurs qui ne sont pas compatibles avec l'animation CSS, jQuery doit fournir un support.

6. Onglets réactifs faciles

https://github.com/samsono/Easy-Responsive-Tabs-to-Accordion

Onglets réactifs légers/navigation en accordéon Le plug-in jQuery prend en charge l'utilisation de plusieurs exemples sur la même page et prend en charge le Web multiplateforme, les tablettes et les appareils mobiles. Ce plug-in peut s'adapter à la taille de l'écran. Le style par défaut est Tabulation horizontale/verticale. À mesure que la fenêtre devient plus petite, elle passera automatiquement au style accordéon.

7、Masquer/Afficher le mot de passe

https://github.com/cloudfour/hideShowPassword

Le plug-in Masquer/Afficher le mot de passe vous permet de masquer et d'afficher facilement le contenu de la zone de saisie du mot de passe. La chose la plus intéressante à propos de ce plugin est l'option « innerToggle ». Lorsqu'il est activé, les développeurs peuvent créer de très beaux contrôles masquer/afficher. Et il maintient le focus sur la saisie lors du balayage dans les navigateurs à écran tactile.

8, Swipebox

http://brutaldesign.github.io/swipebox/

Swipebox est un magnifique plug-in d'effets spéciaux jQuery lightbox qui peut être utilisé sur les appareils de bureau, mobiles et tablettes. Sur mobile, la navigation par gestes de balayage est prise en charge, tandis que sur ordinateur, la navigation au clavier est disponible. Les navigateurs qui ne prennent pas en charge les fonctionnalités de transition CSS3 peuvent utiliser le traitement de rétrogradation de jQuery, prendre en charge les écrans Retina et peuvent être facilement personnalisés via CSS.

Lorsque l'utilisateur clique sur l'image cible, la photo sera affichée en taille réelle. De plus, l'utilisateur peut également basculer les images du même groupe vers la gauche et la droite pour les afficher, ce qui est très approprié pour créer des galeries de photos et les visualiser. des images de grande taille.

9. Dossier d'application

http://app-folders.com/

Si vous êtes un fanatique d'iOS, vous devez être très familier avec les dossiers de style iOS. "Cliquez sur le dossier pour flouter les éléments environnants en approfondissant la transparence, puis affichez le contenu du dossier." App Folders est un tel plug-in jQuery qui peut obtenir l'effet des dossiers iOS. Ce plug-in peut fonctionner aussi bien sur les navigateurs de bureau que mobiles, et son adaptabilité est très bonne.

Les éléments de dossier des dossiers d'application peuvent contenir n'importe quel élément HTML, tel que des images, du texte, des vidéos, etc., et chaque dossier a sa propre URL pour les clics directs. Bien entendu, les développeurs n'ont pas besoin de s'en tenir aux mêmes effets que les dossiers iOS. Grâce aux dossiers d'application, les développeurs peuvent personnaliser des mises en page et des effets spéciaux plus créatifs.

10. jQuery Flip

http://amegan.github.io/jquery-flip/

jQuery Flip est un outil qui peut faire en sorte que n'importe quel élément HTML, texte ou jQuery produise un très bel effet de retournement de type Flipboard. Plugin jQuery, publié sous licence MIT. Grâce à la transformation CSS 3D, la vitesse de retournement peut également être définie et prend entièrement en charge les navigateurs WebKit tels que Chrome, Safari et Firefox 11.

11. jQuery UI Map

https://code.google.com/p/jquery-ui-map/

Pour les développeurs d'applications cartographiques, jQuery UI Map est définitivement un outil indispensable pour le développement. Un plug-in jQuery aussi léger est différent de l'API Google Map. Grâce à jQuery UI Map, les développeurs peuvent non seulement utiliser les écouteurs d'événements Google pour des événements simples tels que les clics, mais également utiliser les événements de clic jQuery sur les cartes et les marqueurs.

jQuery UI Map est non seulement très flexible, mais également hautement personnalisable. Pour afficher les événements programmés sur une carte, jQuery UI Map s'intègre à Google Maps, permettant aux développeurs de créer facilement des cartes interactives. La plus grande fonctionnalité de jQuery UI Map est que lorsque le client ne prend pas en charge JavaScript, les développeurs peuvent utiliser des formats de données HTML tels que les microformats, RDFa ou les microdonnées pour réaliser la synchronisation sur le site alternatif.

12, gShake

https://github.com/GerManson/gShake

gShake est un plug-in jQuery qui peut obtenir des effets de vibration avec seulement quelques lignes de code, vous pouvez créer de la navigation, des images, et même la page elle-même tremble, la rendant dynamique et amusante. Elle prend en charge iOS 4.2+.

13. jQTouch

http://jqtjs.com/

Comparé à de nombreux plug-ins jQuery pouvant être utilisés pour le développement mobile présentés dans cet article, jQTouch est évidemment plus connu. Avec jQTouch, les développeurs peuvent créer des applications mobiles très puissantes en utilisant uniquement HTML, CSS et jQuery. Ce qui est encore plus génial, c'est que les développeurs peuvent créer une interface utilisateur entièrement personnalisée en utilisant uniquement les fichiers CSS de base.

jQTouch peut implémenter des effets d'interface utilisateur courants tels que l'animation, la navigation dans les listes, les styles par défaut, etc. sur les navigateurs WebKit des appareils mobiles. Cependant, si vous souhaitez obtenir plus d'effets natifs, vous devez ajouter des fichiers CSS supplémentaires. Pour les développeurs iOS, il n'y a pas lieu de s'inquiéter à ce sujet, car jQTouch fournit un riche ensemble de fichiers CSS d'effets natifs pour le développement iOS.

14, PhotoSwipe

http://www.photoswipe.com/

PhotoSwipe est un package d'affichage d'album/galerie photo open source et gratuit spécialement conçu pour les appareils mobiles à écran tactile, compatible avec iOS, Android, Blackberry et d'autres plates-formes grand public et navigateurs de bureau. Son implémentation sous-jacente est basée sur HTML, CSS et JavaScript et ne repose sur aucun framework. Elle convient très bien aux concepteurs et aux développeurs qui souhaitent rendre l'expérience des albums photo des sites mobiles la même que celle des applications natives.

PhotoSwipe est une bibliothèque JavaScript autonome qui s'intègre facilement aux sites Web mobiles et est fortement optimisée pour les navigateurs mobiles. De plus, dans le code source, PhotoSwipe prend également en charge les navigateurs de bureau et l'utilisation de jQuery Mobile.

15. Touch Gallery

http://neteye.github.io/touch-gallery.html

Comme PhotoSwipe, Touch Gallery est également un plug-in d'affichage d'images Grâce à lui, les développeurs peuvent afficher des images sur mobile. navigateurs. Pour obtenir un effet d’affichage d’image similaire à l’application d’album photo native. Il prend en charge les opérations de navigation gestuelle et peut également être utilisé sur les navigateurs de bureau tels que Safari, Firefox, Opera et Chrome, mais certaines fonctions ne peuvent pas être implémentées.

【Apprentissage recommandé : Tutoriel vidéo jQuery, Vidéo web front-end】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!