✅ Plugins et bibliothèques JQuery pour le développement Web

Table des matières

jQuery Sortable - propriétaire de l'équipe de joueurs

Un plugin est un outil de code réutilisable écrit dans un fichier JavaScript standard. Ces fichiers fournissent des méthodes jQuery utiles qui peuvent être utilisées avec les méthodes du framework jQuery.

Voyons quelques plugins disponibles et des exemples d'utilisation

Plugin Pagepilling ou Page empilée
PagePiling.js est un plugin jQuery pour naviguer entre les sections d'un site Web en faisant défiler avec la souris comme s'il s'agissait de diapositives dans un menu, en utilisant les flèches du clavier ou en tournant la molette de la souris, toutes les sections sont sur le même site Web. Le défilement est vertical, donc la page est empilée.

Début
Témari
JQuery

L'objectif de ce tutoriel est de présenter les plugins
de la bibliothèque JavaScript JQUERY

1 - Introduction à jQuery
2 - Programmation de base avec jQuery
3 - Effets avancés avec jQuery

Une bibliothèque JavaScript pour écrire moins et faire plus

Exemple

La configuration se fait en invoquant la fonction de pagination, où l'on indique l'identifiant du menu, puis on indique le nom de chaque section, on indique la couleur de fond pour chaque section puis dans la navigation de droite on indique le nom qui apparaîtra.

 $ ('# pagina'). pagepiling ({menu : '#menu', ancres : ['start', 'section', 'sectionb'], sectionsColor : ['# 9aceed', '# 2ebe21', '# 2C3E50 '], navigation : {' position ' :' right ',' tooltips' : ['Home', 'Section A', 'Section B']}

La classe de section est celle utilisée par le Plugin JQuery Pour reconnaître chaque section, la classe d'intro est celle que nous indiquons pour commencer le contenu d'une section.

Plugin triable pour trier les listes
Ce plugin est très utile pour réorganiser les listes en faisant glisser avec la souris et en échangeant des éléments. Le cms wordpress utilise ce plugin pour réorganiser les catégories, les articles et les pages.

Prenons un exemple, supposons que nous ayons une liste d'une équipe de départ de joueurs et d'une équipe de remplacement, nous avons également une liste de joueurs de réserve. Nous allons faire ces trois listes et au moyen du plugin triable, nous pourrons échanger les joueurs de liste simplement en faisant glisser leur nom avec la souris vers la liste que nous voulons mettre ou changer sa position au sein de la même liste.

 jQuery Sortable - Liste des joueurs 
jQuery Sortable - propriétaire de l'équipe de joueurs


 Équipe des titres Équipe de remplacement Joueurs de réserve 

 
 

José
Alberto
Charles
Article 4

 

Javier
cadres
Daniel
Genaro

 

Mario
Fernan
Jacinthe
Manuel
Silvano

Exemple

Comment créer mon propre plugin jQuery ?
Un plugin jQuery est un script ou une nouvelle méthode que nous utilisons pour créer une nouvelle fonctionnalité en étendant ou en facilitant les possibilités que nous offre jQuery. Pour créer un plugin, il faut déclarer une fonction et programmer la fonctionnalité sous forme générique afin qu'il puisse être réutilisé sur n'importe quelle page ou site Web.

Nous devons analyser et tenir compte du fait que lors de l'inclusion de notre plugin dans jQuery, nous n'avons pas de conflit avec une autre bibliothèque ou fonction ou même avec des fichiers css qui pourraient altérer les performances de notre plugin. jQuery nous permet de définir des plugins de différentes manières. Les éléments d'un site Web ne peuvent pas être manipulés en toute sécurité tant que le document n'est pas complètement chargé dans le navigateur. jQuery détecte cet état pour déterminer quand les éléments html sont accessibles.

L'événement .ready () ne sera exécuté qu'une fois le site Web chargé et avant qu'il ne soit affiché dans le navigateur, .ready () a pour but d'exécuter une fonction immédiatement après le chargement de l'intégralité du document HTML, garantissant que notre code sera exécuté sur éléments qui sont affichés.

Le format de cette fonction est :

 // Ces fonctions seront disponibles lorsque le web aura fini de charger $ (document) .ready (function () {function mafonction () {// code of the function}});

Si au lieu d'une fonction j'applique un sélecteur CSS. Cette ligne sera exécutée automatiquement lorsque la page aura fini de se charger, par exemple après avoir chargé la page, mettez tous les liens en vert et avec une taille de 14 pixels.

 $ (document) .ready (function () {$ ('a').css ({'color': green, 'font-size': '14px'});});

Ensuite, nous allons créer un plugin qui élimine tout courrier publié dans une liste de commentaires sur un site Web.

 
 
 Critiques d'utilisateurs  

 
 Commentaire Lorem Ipsum 1 - Vendredi 01/04/2016 12:35 Lorem Ipsum est simplement du texte factice à partir d'imprimantes et de fichiers texte.
[email protected]  

 
 Commentaire Lorem Ipsum 2 - Vendredi 01/04/2016 12:35 Lorem Ipsum est simplement du texte factice à partir d'imprimantes et de fichiers texte.
[email protected]