Scripts Jquery. Nouveaux scripts JQuery pour les développeurs. Exemples jQuery et Ajax

Humane.js

Un bon script Jquery qui permet d'afficher des alertes sur la page sous forme de pop-ups. Il prend en charge les appareils mobiles, est léger, bien documenté et, surtout, vous avertit discrètement, sans interférer avec votre expérience visuelle.

Impress.js

Le script vous permet de créer d'excellentes présentations sur le site. Options de personnalisation étendues, prise en charge du contrôle du clavier. Je recommande de regarder la démo pour que ce soit plus clair de quoi nous parlons.

PDF.js

Un scénario très intéressant. Vous permet de générer un document PDF à partir du contenu d'une page en utilisant HTML5. Désormais, pour télécharger un article au format PDF, vous n'avez plus besoin de recourir à des services tiers ; tout peut se faire, comme on dit, « sans quitter la caisse ».

jQuery Transit

Un script JQuery très sophistiqué qui peut presque tout faire avec des objets. Presse, bouge, s'étire, se tord de quelque manière que ce soit - de nombreuses options d'utilisation. Il utilise le mécanisme de transformation CSS3 et pèse très peu - seulement 2 kilo-octets sous forme compressée.

ResponsiveSlides.js

Bonne nouvelle pour ceux qui optimisent leur site pour mobile en utilisant @media. Ce curseur de petite taille fonctionne avec tous les navigateurs, à commencer par IE6, les appareils mobiles sur tous les systèmes d'exploitation modernes et vous permet de redimensionner les images pour les adapter à la résolution de l'écran de l'appareil. Un incontournable pour tous les développeurs mobiles

Réponse.js

Outil de script pour créer des sites Web adaptés aux mobiles. Prend en charge HTML5 et dispose de nombreux paramètres pour un travail de développeur confortable.

Texte de la dalle

Un script inhabituel qui permet de créer de gros titres désormais à la mode. Le principe de fonctionnement est le suivant : le script prend une ligne, compte les caractères, la divise par la longueur de la ligne et calcule intelligemment le nombre de caractères nécessaires sur chaque ligne, en tenant compte de la division en mots. Puis il ajoute un peu de magie et... c'est mieux de regarder la démo, parce que je n'ai pas assez de mots pour expliquer comment ça marche

Scrollrama.js

Un script intéressant qui vous permet d'implémenter divers effets de défilement sur la page. D'ailleurs, ces effets de scroll gagnent en popularité, je les remarque sur de nombreux sites.

Textualiseur.js

Vous permet d'appliquer diverses animations à littéralement chaque lettre de la page. Hautement personnalisable, bonne compatibilité entre navigateurs, plugin léger et suffisamment agréable pour ajouter un peu de fouillis « créatif » à votre page

Collant

Un bon script qui vous permet de rendre n'importe quel élément de la page toujours visible, par exemple, lors du défilement vers le bas, le menu supérieur restera toujours en place. Vous pouvez faire la même chose avec une barre latérale ou tout autre élément.

Pour ceux qui doutent d’utiliser ou non les scripts JQuery ou s’ils ralentissent trop le chargement, ne vous inquiétez pas. L'essentiel est de ne pas en faire trop avec la beauté et la fonctionnalité, et alors tout ira certainement bien !

jQuery est une bibliothèque JavaScript qui permet aux développeurs Web d'ajouter des fonctionnalités avancées à leurs sites Web. Il est disponible et disponible gratuitement sous la licence MIT. Ces dernières années, jQuery est devenue la bibliothèque JavaScript la plus populaire utilisée dans le développement Web.

exemple jQuery

Pour implémenter jQuery, un développeur Web doit référencer un fichier JavaScript dans le code HTML d'une page Web. Certains sites Web hébergent leur propre copie locale, tandis que d'autres sont simplement liés à une bibliothèque hébergée par Google ou un serveur. Par exemple, une page Web pourrait charger la bibliothèque jQuery en utilisant la ligne suivante dans la section HTML (exemple jQuery et cookie) :

Exemples jQuery et Ajax

Une fois la bibliothèque chargée, la page Web peut appeler n'importe quelle fonction prise en charge par la bibliothèque. Les exemples courants incluent la modification du texte, le traitement des données de formulaire, le déplacement d'éléments sur une page et la réalisation d'animations. jQuery peut également fonctionner avec le code Ajax et des logiciels comme PHP et ASP pour accéder aux données d'une base de données. Étant donné que jQuery s'exécute côté client (et non sur le serveur Web), il peut mettre à jour les informations d'une page Web en temps réel sans recharger la page. Un exemple courant est la saisie semi-automatique, dans laquelle un formulaire de recherche affiche automatiquement des données générales lorsque vous saisissez une requête.

Avantages de la bibliothèque

Outre la licence gratuite, l’autre raison principale pour laquelle jQuery a gagné en popularité est sa compatibilité entre navigateurs. Étant donné que chaque navigateur affiche JavaScript différemment, il peut être difficile pour un développeur Web de donner à un site Web la même apparence sur tous les navigateurs. Au lieu d'écrire des fonctions personnalisées pour chaque navigateur, un développeur Web peut utiliser une seule fonction jQuery qui fonctionnera dans Chrome, Safari, Firefox et Internet Explorer. La prise en charge de plusieurs navigateurs a amené de nombreux développeurs à passer du JavaScript standard à jQuery, car cela simplifie considérablement le processus de codage.

Description

La syntaxe jQuery est utilisée pour simplifier la navigation dans les documents, la sélection des éléments DOM, la création d'animations, la gestion des événements et le développement d'applications Ajax. jQuery donne également aux développeurs la possibilité de créer des plugins au-dessus de la bibliothèque JavaScript. Il permet aux programmeurs de créer des conceptions abstraites pour une interaction et une animation de bas niveau, des effets avancés et des widgets thématiques de haut niveau. L'approche modulaire de la bibliothèque jQuery vous permet de créer des pages Web et des applications Web puissantes et dynamiques.

Ensemble de fonctions de base :

• sélectionner des éléments DOM ;
• contournement et manipulation à l'aide du mécanisme de sélection ;
• nouveau style de programmation ;
• fusion d'algorithmes et de structures de données DOM.

Le style a influencé l'architecture d'autres frameworks JavaScript tels que YUI v3 et Dojo, et a également inspiré la création de l'API standard Selectors.

Microsoft et Nokia proposent jQuery sur leurs plateformes. Microsoft l'inclut avec Visual Studio pour une utilisation dans ASP.NET AJAX et ASP.NET MVC, et Nokia l'a intégré à la plate-forme de développement Web Time Widget.

Revoir

jQuery est une bibliothèque d'éléments avec un modèle d'objet de document (DOM). Le DOM est une représentation de la structure arborescente de tous les éléments d'une page Web. jQuery simplifie la syntaxe pour rechercher, sélectionner et manipuler ces éléments DOM. La bibliothèque peut être utilisée pour rechercher un élément dans un document avec une certaine propriété (par exemple, tous les éléments avec une balise h1), modifier un ou plusieurs de ses attributs (couleur, visibilité) ou répondre à un événement (par exemple, un clic de souris).

Développement

La bibliothèque utilise des fonctionnalités JavaScript populaires telles que les fondus d'entrée et de sortie pour masquer des éléments, animer et travailler avec des éléments CSS jQuery. jQuery fournit également un paradigme pour la gestion des événements qui va au-delà de la sélection et de la manipulation des éléments DOM. L'attribution d'un événement et la définition d'une fonction de rappel se font en une seule étape et au même endroit dans le code.

Principes de développement avec jQuery (exemples) :

• Séparer JavaScript et HTML - La bibliothèque fournit une syntaxe simple pour ajouter des gestionnaires d'événements au DOM à l'aide de JavaScript, au lieu d'ajouter des attributs d'événement HTML pour appeler des fonctions JS. Ainsi, cela encourage les développeurs à séparer complètement le code JavaScript du balisage HTML.
• Concision et clarté – Favorise la concision et la clarté avec des outils tels que le chaînage et les noms de fonctions raccourcis.
• Éliminez les incompatibilités entre navigateurs : les moteurs JavaScript varient légèrement d'un navigateur à l'autre, de sorte que le code JS qui fonctionne pour un navigateur peut ne pas fonctionner pour un autre. Comme d'autres boîtes à outils JavaScript, jQuery gère toutes ces incohérences entre navigateurs et offre une expérience cohérente qui fonctionne sur tous les navigateurs.
• Extensibilité - De nouveaux événements, éléments et méthodes peuvent être facilement ajoutés puis réutilisés en tant que plugin.

Histoire

jQuery a été initialement publié en janvier 2006 au BarCamp NYC par John Resig et a été influencé par la première bibliothèque cssQuery de Dean Edwards. Il est actuellement maintenu par une équipe de développeurs dirigée par Timmy Willison (avec le moteur de sélection jQuery - Sizzle, dirigé par Richard Gibson).

Particularités

La bibliothèque comprend les fonctions suivantes :

• sélectionner des éléments DOM à l'aide du moteur de sélection multi-serveur open source Sizzle ;
• mettant en évidence le projet de manipulation du DOM basé sur un sélecteur CSS, qui utilise des noms d'éléments et des attributs tels que l'identifiant et la classe comme critères de sélection des nœuds dans le DOM ;
• événements;
• effets et animations;
• ajax;
• objets différés et promis pour contrôler le traitement asynchrone ;
• Analyse JSON ;
• extensibilité via des plugins ;
• des utilitaires tels que la découverte de fonctionnalités ;
• méthodes de compatibilité disponibles nativement dans les navigateurs modernes mais nécessitant des versions antérieures, telles que inArray() et each(), multi-navigateur (à ne pas confondre avec multi-navigateur).

Usage

La bibliothèque jQuery est un fichier JavaScript unique contenant toutes ses fonctions, événements, effets et Ajax DOM courants. Il peut être inclus dans une page Web en créant un lien vers une copie locale ou vers l'une des nombreuses copies disponibles sur les serveurs publics. La bibliothèque dispose d'un réseau de diffusion de contenu (CDN) hébergé par MaxCDN.

Exemple jQuery en PHP :

Styles

jQuery a deux styles d'utilisation :

Via la fonction $, qui est une méthode d'usine pour l'objet jQuery. Ces fonctions, souvent appelées commandes, sont des nombres entiers car elles renvoient toutes des objets jQuery.

Grâce à $ se trouvent des fonctions de préfixe. Il s'agit de fonctions de service qui n'affectent pas directement l'objet.

L'accès et la manipulation de plusieurs nœuds DOM dans JQuery commencent généralement par l'appel de la fonction $ avec la chaîne. Cela renvoie un objet jQuery référençant tous les éléments correspondants dans la page HTML.

Mode sans conflit

jQuery inclut un mode .noConflict() qui libère le contrôle du $. Ceci est utile si jQuery est utilisé avec d'autres bibliothèques qui utilisent également $ comme identifiant. En mode sans conflit, les développeurs peuvent utiliser des bibliothèques en remplacement de $ sans perdre de fonctionnalité.

Fonctionnalité avancée

Les fonctions de rappel pour gérer les événements sur les éléments qui n'ont pas encore été chargés peuvent être enregistrées dans .ready() en tant que fonctions anonymes. Ces gestionnaires ne seront appelés que lorsque l'événement se déclenchera. Par exemple, le code suivant ajoute un gestionnaire pour un clic de souris sur un élément d'image img :

$("img").on("clic",function())(

//gère l'événement click sur n'importe quel élément img de la page

Certaines fonctions renvoient des valeurs spécifiques (par exemple, $("#input-user-email").Val()). Dans ces cas, le chaînage ne fonctionne pas car la valeur ne fait pas référence à un objet jQuery.

Création de nouveaux éléments

En plus d'accéder aux nœuds DOM via la hiérarchie des objets, il est également possible de créer de nouveaux éléments si la chaîne passée en argument à $() ressemble à du HTML. Par exemple, la ligne recherche un élément HTML select avec des cartes d'identité et ajoute un élément option avec la valeur VAG et le texte Volkswagen :

$("# marques de voitures sélectionnées")

Ajouter($("")

Attr((valeur:VAG))

Ajouter (Volkswagen)).

Utilitaires

Les fonctions jQuery préfixées par $ sont des fonctions utilitaires qui affectent les propriétés et le comportement globaux. L'exemple suivant utilise la fonction each(), qui parcourt les tableaux :

$.each(,fonction())(

console.log(this+1);

Cet exemple de publication jQuery écrit 2, 3, 4 sur la console.

Ajax

Il est possible de faire de l'Ajax en utilisant $.ajax() de jQuery, dont un exemple est les méthodes associées pour charger et traiter des données distantes :

URL : "/process/submit.php",

nom : Jean

lieu : Boston

)).done(fonction(msg)(

alert("Données enregistrées :"+msg);

)).fail(function(xmlHttpRequest, statusText, errorThrown)(

alerte(

"Nous n'avons pas pu envoyer votre message.\N\n"

+"Demande HTTP XML :"+JSON.stringify(xmlHttpRequest)

+ ",\nTexte d'état :"+Texte d'état

+ ",\nErreur levée :"+errorThrown);

Dans cet exemple, le serveur a dataname=John et location=Boston pour /process/submit.php. Une fois cette requête terminée, une fonction est appelée pour alerter l'utilisateur. Si la demande échoue, elle alertera l'utilisateur de l'erreur, de l'état de la demande et de l'erreur spécifique.

Plugins

L'architecture jQuery permet aux développeurs de créer du code enfichable pour étendre diverses fonctions. Il existe des milliers de plugins disponibles en ligne qui couvrent une gamme de fonctionnalités telles que les aides Ajax, les services Web, les listes dynamiques, les outils XML et XSLT, le glisser-déposer, les événements, la gestion des cookies et les modaux.

Il existe des plugins de moteur de recherche alternatifs, tels que jquer.in, qui adoptent des approches plus spécialisées, telles que la liste uniquement des plugins répondant à certains critères (par exemple, ceux disposant d'un référentiel de code public). Le développeur fournit le Learning Center, une ressource jQuery pour les débutants qui peut aider les utilisateurs à comprendre JavaScript et à commencer à développer des plugins.

interface utilisateur jQuery

jQuery UI est une collection de widgets GUI, de visuels animés et de thèmes implémentés à l'aide de jQuery CSS (une bibliothèque JavaScript), de feuilles de style en cascade et de HTML. Selon le service d'analyse JavaScript Libscore, jQuery UI est utilisé par plus de 197 000 sites Web de premier plan, ce qui en fait la deuxième bibliothèque JS la plus populaire. Les plus célèbres d'entre eux : Pinterest, PayPal, IMDb, The Huffington Post et Netflix.

jQuery UI est gratuit et open source, distribué par la Fondation sous la licence MIT. A été publié pour la première fois en septembre 2007.

jQueryMobile

jQuery Mobile est un framework Web optimisé pour le toucher (également appelé framework mobile). L'objectif principal du développement est de créer une infrastructure compatible avec une large gamme de smartphones et de tablettes, nécessaire au marché croissant de la technologie numérique. Compatible avec d'autres plateformes d'applications mobiles telles que PhoneGap, Worklight et bien d'autres.

Il y a 10 ans, lorsque jQuery n'en était qu'à ses balbutiements, l'écosystème des navigateurs était très diversifié et chacun des produits qui existaient se débattait alors avec la complexité de gestion des éléments DOM. L'objectif ambitieux que les développeurs de jQuery se sont fixés était de développer une approche universelle pour résoudre ces problèmes et créer une API qui fonctionnerait aussi bien dans n'importe quelle situation.

Pour autant qu'ils aient pu en juger, mais après 10 ans d'existence, jQuery reste l'une des bibliothèques JavaScript les plus populaires.

JavaScript lui-même est désormais un produit complètement mature, bien documenté et pris en charge par tous les navigateurs modernes. La communauté des navigateurs modernes est également plus consolidée et, dans la plupart des cas, vous pouvez être sûr que si, par exemple, une page s'affiche correctement dans Crome, elle aura la même apparence dans Firefox. Les querySelectors sont également pris en charge par presque tous les navigateurs modernes.

Il semblerait que l'histoire du développement de jQuery touche à sa fin - pourquoi surcharger les pages et gaspiller des cycles de processeur supplémentaires si la plupart des problèmes peuvent être résolus à l'aide d'outils de langage standard ? D'un autre côté, au cours d'une si longue période, l'industrie informatique a développé un grand nombre de solutions qui peuvent être simplement prises et utilisées, ici et maintenant.

Je pense que ce choix doit être fait par le développeur lui-même dans chaque situation spécifique, en se concentrant non pas sur la mode et les tendances, mais sur le bon sens et les perspectives de développement de sa création.

Dans cette revue, j'ai rassemblé tous les plugins jQuery gratuits que je connais et qui sont actuellement activement développés ou qui ont été mis à jour au moins une fois au cours de l'année écoulée. J'utilise activement certains d'entre eux dans ma pratique, d'autres que je ne connais que superficiellement, mais ils m'ont impressionné par leurs capacités. Parmi eux, il y en a des exceptionnellement extraordinaires, réalisés avec une grande imagination. Et même si vous ne trouvez pas le moyen de les utiliser dans vos projets, ils vous inspireront peut-être pour créer vos propres solutions, encore plus incroyables.

multiscroll.js Une solution intéressante pour attirer l'attention du visiteur - le défilement des pages s'effectue sous la forme de deux panneaux, dont l'un glisse vers le haut et l'autre vers le bas, ouvrant le bloc suivant. Il fonctionne également très bien sur tous les navigateurs, même les plus obsolètes.

jquery.email-autocomplete.jsLes adresses e-mail doivent être saisies très souvent et, malgré le fait qu'il ne s'agisse que d'une douzaine de caractères, on souhaite souvent accélérer ce processus. jquery.email-autocomplete.js possède sa propre liste de domaines de services de messagerie populaires, sur la base de laquelle il propose la saisie semi-automatique des adresses. L'utilisateur peut accepter cette invite en appuyant sur la touche Tab ou sur la touche fléchée droite, ou continuer à taper manuellement. Le plugin fonctionne également bien dans les versions mobiles du site. Cependant, vous devrez modifier légèrement le plugin pour qu'il puisse commencer à fonctionner avec les services de messagerie nationaux.

tinyDatePicker Ce plugin contient beaucoup de puissance dans 5 Ko. Calendriers, planificateurs, réservation de biens et services - ceci n'est pas une liste complète des endroits où vous pouvez utiliser tinyDatePicker. Rapide, léger, évolutif – il peut être facilement intégré à Bootstrap ou à tout autre framework.

ReadRemaining.js Beaucoup d’entre nous manquent toujours cruellement de temps. J'ai toujours envié les gens qui savent le gérer correctement. L'auteur du plugin ReadRemaining.js est probablement l'un d'entre eux. Qui d'autre aurait pu penser à afficher des informations à côté du texte sur le temps qu'il vous faudra pour le lire ? Et au fur et à mesure que vous faites défiler le texte, recalculez ce temps en fonction de la vitesse de lecture d'un utilisateur particulier.

Un plugin très original qui, je pense, plaira aux visiteurs si vous avez beaucoup de textes longs.

TooltipsterInfo-bulle classique avec un large éventail de fonctions et d'options. L'élément lui-même peut être situé n'importe où par rapport à l'élément parent et contenir n'importe quel élément. L'essentiel est de ne pas en faire trop avec son utilisation, de l'utiliser uniquement là où cela est vraiment nécessaire.

AddelMalgré le nom similaire, ce plugin n'a rien à voir avec la chanteuse Adele. Son nom vient des mots anglais ADd-DELete (ajouter et supprimer) et reflète son objectif : ajouter ou masquer dynamiquement des éléments HTML, principalement des éléments de formulaire. Les commandes sont flexibles et intuitives.

Chart.jsUn plugin en développement actif qui vous permet d'afficher différents types de graphiques (8 types au total, y compris des mixtes). Fonctionne très bien sur tous les navigateurs modernes et offre une animation fluide et agréable lors de la modification des données.

jQuery Flip-Quote Un plugin très intéressant qui fait deux choses. Premièrement, il fait pivoter les blocs de citations présents sur la page au moment où le bloc devient visible (idéal pour attirer l'attention). Deuxièmement, lorsque vous cliquez sur ce bloc, la citation dans le texte est mise en évidence, ce qui permet de la retrouver rapidement dans le flux général du matériel. Il s’avère que les citations peuvent aussi être divertissantes !

Algolia PlacesRecherche rapide avec complétion automatique des adresses postales, des villes, des itinéraires et de tout ce qui concerne les lieux dans le monde grâce à l'intégration avec la base de données OpenStreetMap. Un plugin très utile pour les boutiques en ligne.

HideSeekUn plugin de recherche en direct simple mais fonctionnel. Peut effectuer une recherche en fonction de divers critères, effectuer certaines actions après avoir trouvé les données requises, et bien plus encore.

Timedropper Il existe un grand nombre de solutions pratiques pour saisir un moment précis dans le temps. Cependant, Timedropper se distingue parmi eux par sa simplicité et sa facilité d'utilisation. Changer les heures et les minutes avec ce petit onglet amusant est vraiment pratique. Il dispose de plusieurs options de personnalisation, telles que : le format de l'heure (12 ou 24 heures), la couleur du cadran, le test, l'arrière-plan et la possibilité de modifier les heures et les minutes à l'aide de la molette de la souris. À propos, il existe un plugin similaire pour régler la date.

LorySlider écrit en JavaScript pur. Minimaliste, mais prend en charge le contrôle gestuel, la définition d'un élément fixe, l'affichage des commandes des boutons et l'affichage simultané de plusieurs images, y compris celles de largeurs différentes.

CurrencyFormatter.js Un script très simple et petit qui affiche des valeurs numériques au format monétaire. Ajoute des points, des espaces pour séparer les chiffres et un symbole monétaire. Prend en charge 155 devises mondiales.

Shave.jsJavascript, qui coupera soigneusement le texte qui ne rentre pas dans un conteneur d'une hauteur donnée. Il ne prend que 1,5 Ko et ne nécessite pas de bibliothèques tierces.

jQuery Linechart Une bibliothèque pour construire des graphiques de différents types et une assez grande quantité de données sources. Écrit en HTML/CSS/JS, mais il existe également une version basée sur Angular.js

Freewall Un plugin jQuery incroyablement beau pour créer une interface en mosaïque dans une variété de styles : Windows Metro, Pinterest, plat ou hiérarchique, avec des éléments déplaçables et ajoutés dynamiquement. Fonctionne parfaitement sur les navigateurs mobiles et de bureau, y compris IE8. Un outil vraiment polyvalent !

rowGrid.js Un petit plugin qui organise les images ou d'autres éléments en rangées paires de hauteur égale, en ajustant la taille et l'espacement entre eux afin que chaque ligne s'adapte parfaitement à la largeur de la fenêtre. Certes, tous les objets doivent avoir la même hauteur.

SlidebarsSlidebars ajoute un menu ou une barre latérale à une page de site Web, qui apparaît ou se cache avec un mouvement de glissement lorsque le curseur clique sur un bouton de commande. La version 2 de ce plugin a été entièrement réécrite et peut désormais contenir un nombre illimité d'éléments différents. Il dispose d'une API à part entière, de la possibilité de connecter vos propres fonctions de rappel et de vous abonner aux événements.

pagePiling.js est très similaire au plugin multiscroll.js discuté dans cette revue, mais la page n'est pas divisée en deux panneaux, mais entièrement décalée. Vous pouvez modifier la direction et la vitesse du déplacement. Un bon choix pour un site Web d’une page qui sera aussi beau sur les appareils mobiles que sur les grands écrans.

AnimsitionL'objectif principal d'Animsition est d'implémenter un ensemble large et diversifié d'effets transitifs différents dans un seul plugin. Ceux-ci incluent la décoloration et le développement, la rotation, la réflexion, le zoom, etc. (total 58 pièces).

ZooMove Je n'aime pas le zoom dynamique des images au survol - je trouve cet effet trop ennuyeux. Mais si vous voulez vraiment l'utiliser, il est préférable d'utiliser ZooMove à cet effet. Aucun autre plugin ne fournira une mise à l'échelle et un défilement aussi fluides et fluides.

Rippleria Un plugin léger qui crée un effet de vague (similaire aux ondulations à la surface de l'eau) sur n'importe quel élément DOM : bouton, élément DIV, image. Très simple à configurer et à gérer.

FlickityCurseur rapide, réactif et contrôlé par les gestes. Extérieurement - assez ordinaire, mais avec une documentation incroyablement soigneusement écrite et structurée. API complète et bien pensée.

Unslider Un curseur très petit et simple qui possède plusieurs paramètres qui permettent de diversifier son comportement : différentes directions de mouvement (horizontal et vertical), défilement cyclique (sans fin), lecture automatique.

Lightcase.js Lightbox exceptionnelle avec animation CSS3. Fonctionne avec les DIV, les images, le texte, les objets flash, la vidéo et l'iframe. Il ne prend pas encore en charge jQuery 3, mais les développeurs promettent de résoudre ce problème dans les prochaines versions.

PhotoSwipeUne magnifique galerie d'images avec contrôle à la fois du clavier sur les navigateurs de bureau et des gestes sur mobile. Il est possible de définir un délai de chargement des photos jusqu'à ce que la page elle-même soit complètement chargée. Et tout ce plaisir ne fait que 14 Ko.

StripStrip est une lightbox qui occupe une certaine zone de la page, laissant la page elle-même non seulement partiellement visible, mais également accessible pour l'interaction. De plus, il peut fonctionner simultanément comme un curseur. De plus, outre les images, il prend également en charge le contenu vidéo de Youtube et Vimeo.

Turntable.js Une approche incroyablement impressionnante pour présenter un produit, surtout s'il s'agit d'un objet physique. En fait, le plugin est très simple et affiche juste un tas d’images. Cependant, grâce à la possibilité de contrôler le processus à l'aide de la molette de la souris ou de gestes sur l'écran, à condition que l'ensemble représente des images d'un objet prises sous différents angles de vue, le spectateur a une illusion complète de sa rotation.

Vide.jsLe moyen le plus simple d'ajouter une vidéo d'arrière-plan à une page de site Web est peut-être d'utiliser le plugin Vide.js. Il fonctionne sur tous les navigateurs modernes à partir de IE9+. Sur iOS et Android, qui ne lisent pas toujours la vidéo d'arrière-plan, une image fixe s'affichera.

TrianglifySi vous ne voulez pas surcharger la page avec une vidéo de fond, mais qu'une image statique semble banale, essayez la triangularité ! Ce sont des motifs triangulaires géométriques uniques qui ajouteront une certaine personnalité à votre design. Le plugin vous permet de modifier la couleur, la taille des cellules et la dispersion. Vous pouvez même écrire votre propre implémentation de l'algorithme et l'utiliser dans Trianglify.

LazeeMenuSi vous disposez d'un grand menu hiérarchique sur votre site Web que vous souhaitez garder simple et clair, alors LazeeMenu vous sera sans aucun doute utile. Il convertit les listes non ordonnées imbriquées en un menu déroulant pratique.

Web-ticker Une ligne courante, semblable à celles que l'on peut souvent voir sur l'écran de télévision dans les communiqués de presse - les derniers événements, les cours boursiers, la météo... On ne sait jamais ce qu'on peut y placer ! Alors, si vous aimez cette façon de présenter l’information, tenez compte du Web-ticker.

Masque de saisieExpérience utilisateur en action. Vous souvenez-vous de ces moments où vous deviez ressaisir des données dans un formulaire à cause d'une erreur. De plus, l'erreur n'a été détectée qu'après la réponse du serveur. Oublie ça! Non seulement le masque de saisie contrôle et affiche visuellement l'exactitude des données saisies, il empêche également la saisie de données incorrectes. Essayez, par exemple, de saisir le 13ème mois dans le champ date. Les masques peuvent être très différents : dates, numéros de téléphone, e-mails et même expressions régulières.

Avec l'aube du WEB 2.0, des frameworks javascript se sont également développés, permettant aux webmasters de créer des éléments de site Web dynamiques beaucoup plus rapidement et plus facilement. L'un de ces frameworks est jQuery, qui a acquis une immense popularité en raison de sa simplicité et de son incroyablement léger. Je présente donc à votre attention les 10 scripts jQuery les plus utiles pour améliorer l'interface de votre site Web.

Boîte épaisse
Description : nécessaire pour attirer l'attention de l'utilisateur sur un texte, une image ou un formulaire Web via une fenêtre modale.
Quand et où l'utiliser : lorsque vous devez afficher plus d'informations à l'utilisateur, afficher une image plus grande, poser quelques questions à l'aide d'un formulaire Web ou afficher un formulaire de connexion, mais que vous ne souhaitez pas que l'utilisateur quitte la page.
Script, exemple, documentation
Plugin WordPress

Tabulations
Description : Permet d'afficher le contenu de la page dans des onglets.
Quand et où l'utiliser : lorsque vous souhaitez libérer de l'espace sur l'écran en fournissant un accès rapide aux informations cachées. Souvent utilisé dans les widgets pour divers thèmes WordPress premium.
Script, exemple, documentation
Plugin WordPress

Curseur de coda
Description : Crée un curseur, comme dans la capture d'écran du site Coda.
Quand et où l'utiliser : comme avec Coda, ce script est idéal pour présenter des produits ou des services regroupés en sections. Les utilisateurs bénéficient d’un aperçu rapide ainsi que d’une navigation intuitive.
Script, exemple, documentation
Thème pour WordPress

Galerie
Description : Galleria est une galerie javascript écrite en jQuery. Charge les images une par une et en affiche des miniatures.
Quand et où utilisé : Pour montrer des photographies d’un événement ou d’un produit, par exemple.
Script, exemple, documentation

jConseil
Description : info-bulles implémentées dans jQuery.
Quand et où il est utilisé : lorsque vous devez donner plus d'informations sur un objet dans le contexte d'un article ou mettre en œuvre des astuces pour l'utilisateur dans divers formulaires Web.
Script, exemple, documentation
Plugin WordPress

Sélecteur de feuille de style
Description : permet aux visiteurs de votre site Web de modifier indépendamment les styles de conception « en un clic ».
Quand et où l'utiliser : lorsque vous souhaitez permettre à l'utilisateur de choisir différentes tailles de police, d'afficher des informations conçues pour le téléphone mobile ou l'impression, et de lui permettre de personnaliser les couleurs. Le sélecteur de feuilles de style peut vraiment aider à améliorer la convivialité de votre site Web.
Script, exemple, documentation
Plugin WordPress

menu Accordéon jQuery
Description : Permet de créer des menus dynamiques.
Script, exemple, documentation
Plugin WordPress

Galerie de curseurs
Description : Présente les produits/images dans une galerie déroulante.
Quand et où l'utiliser : lorsque vous souhaitez insérer tous les éléments dans la barre latérale, mais qu'il n'y a pas assez d'espace pour toutes les options.
Script, exemple, documentation

Validation du formulaire
Description : Validez les formulaires Web à l'aide de la validation de formulaire pour éviter les champs mal remplis.
Quand et où utilisé : Sous la plupart des formes. Cela aide les utilisateurs à comprendre exactement où ils ont mal rempli les champs en mettant en évidence leurs erreurs.
Script, exemple, documentation

jGrowl
Description : Affiche les messages dans le navigateur tout comme Growl sur MacOSX
Quand et où l'utiliser : Si vous informez l'utilisateur d'une action, mais que vous ne souhaitez pas qu'il quitte la page actuelle/l'actualise. C'est un excellent moyen de confirmer les actions effectuées par l'utilisateur, telles que l'inscription. Vous pouvez également utiliser jGrowl dans divers magasins, etc. pour confirmer l'ajout d'un article à votre panier ou confirmer une transaction.
Script, exemple, documentation

Vous avez sûrement entendu parler de la merveilleuse bibliothèque Javascript appelée jQuery. Qu’est-ce que jQuery exactement ?

Comment faciliter la vie d'un développeur web ? Par où commencer ? jQuery rend l'écriture de Javascript amusante et plus facile. Avec cette bibliothèque, de nombreux aspects assez complexes de Javascript peuvent être facilement implémentés dans n'importe quelle application.

La leçon d'aujourd'hui vous expliquera comment démarrer avec jQuery et comment écrire votre premier script.

Qu’est-ce que jQuery ?

jQuery est une bibliothèque Javascript très légère (certains l'appellent un framework) qui simplifie l'écriture de code Javascript. Il possède de nombreuses fonctionnalités très puissantes, telles que le suivi DOM, l'ajout de superbes effets et animations aux éléments, des techniques et méthodes Ajax super simples. Sur la page principale du site jQuery, la description la plus précise, à mon avis :

jQuery est une bibliothèque rapide et concise qui simplifie la gestion des événements, l'animation et l'interaction Ajax pour un développement Web plus rapide. jQuery est conçu pour changer la façon dont JavaScript est écrit.

Quels sont les avantages de jQuery ?

Jetons un coup d'œil rapide à certains des avantages et propriétés de ce framework :

La quantité de code (nécessaire à l'exécution du script) est considérablement réduite par rapport à JavaScript, ce qui signifie moins de temps passé et un code plus lisible. Le reste de l’article examinera quelques exemples.

Beaucoup plus facile à comprendre le code (contrairement à JavaScript). Dans notre monde, plus tôt vous terminez le processus de programmation, plus vous pouvez consacrer de temps à d’autres objectifs.

Une documentation très pratique et une communauté active, toujours prête à aider si nécessaire.

Utiliser Ajax devient beaucoup plus simple. Vous n’avez besoin que de 5 lignes de code (parfois moins) pour créer une simple requête Ajax.

Un grand nombre de plugins avec lesquels vous pouvez presque tout faire.

jQuery est amusant :)

Comment commencer ?

Tout d'abord, vous devez visiter la page principale du site officiel de jQuery et télécharger la dernière version de ce framework. Après le téléchargement, vous devez télécharger ce fichier sur votre hébergement et écrire un lien vers ce fichier dans l'en-tête du document.

Alternativement, vous pouvez utiliser l'aide du grand Google et mettre un lien vers leur serveur, où se trouvent toujours les dernières versions de tous les frameworks. Le lien nécessaire peut être trouvé.

Le document est-il prêt ?

Pour exécuter notre premier script jQuery, nous devons envelopper l'intégralité de notre script dans une fonction. Cette fonction sera exécutée lorsque le DOM sera complètement prêt (quand « le document est prêt » - traduction littérale de l'anglais). Notez que ceci est très similaire à l'événement populaire « onload », mais ce n'est pas le même. Regardons un exemple :

$(document).ready(function())( //Code ici ));

Ci-dessus, nous disons à jQuery d'exécuter n'importe quel code à l'intérieur de la fonction, avec le DOM complètement prêt. Cela a ses avantages, même si cela n'est peut-être pas clair pour beaucoup. Tout d’abord, grâce à cette technique, nous séparons complètement Javascript du HTML. Deuxièmement, nous n'avons pas besoin d'attendre que la page soit complètement chargée, le DOM suffit à se charger.

Pour les codeurs paresseux, ou pour ceux qui comptent chaque caractère, vous pouvez raccourcir davantage le code ci-dessus :

$(function())( //Code ici ));

Votre premier script jQuery

Nous savons déjà comment référencer la bibliothèque. Nous comprenons également un peu la fonction document.ready. Il est maintenant temps d'écrire un script simple.

Rendons les choses aussi simples que possible. Pour cet exemple, créons une page avec du texte et une citation à la fin. Nous souhaitons afficher le devis uniquement si l'utilisateur clique sur le bouton. Jetez un œil ci-dessous au code requis pour cela :

$(document).ready(function())(
var monQuote = $("#mon_quote");
monCitation.hide();
$(".bouton").click(function())(
monCitation.show(500);
});
});

Examinons de plus près l'ensemble du code.

Comme mentionné ci-dessus, nous mettons tout le code à exécuter dans la fonction $document.ready().

Nous attribuons l'identifiant de notre devis (my_quote) à la variable myQuote. Nous avons maintenant accès au devis avec l'identifiant my_quote.

C'est tout. Lorsque vous appuyez sur le bouton pendant 0,5 seconde, un devis s'affichera. Très facile, n'est-ce pas ?

À suivre....

Merci de votre attention ! Tous mes vœux!