Médiaforma

jQuery – Les plugins jQuery

Print Friendly, PDF & Email

Les plugins jQuery sont des modules complémentaires qui accomplissent des tâches spécifiques. Vous pouvez par exemple utiliser un plugin pour valider les données d’un formulaire, un autre pour ajouter des effets spéciaux aux éléments ou encore un autre pour tracer des graphiques à partir de données numériques.

Intérêts et danger des plugins

Les plugins sont développés par des programmeurs indépendants. Ils sont plus ou moins bien commentés et plus ou moins suivis par leurs créateurs. On ne peut donc pas toujours compter sur un plugin à long terme. D’un autre côté, ils apportent des solutions rapides et souvent faciles à mettre en œuvre à de nombreuses problématiques. Leur très grande diversité couvre la plupart des situations auxquelles vous vous trouverez confrontés dans le cadre d’un projet d’entreprise.

Utilisation d’un premier plugin

Le site jQueryList regroupe un très grand nombre de plugins pour jQuery. Pour y accéder, rendez-vous sur la page http://jquerylist.com/, choisissez une catégorie et un plugin, puis cliquez sur le bouton Visit Website pour le télécharger.

A titre d’exemple, nous allons utiliser le plugin Farbtastic jQuery Color Picker qui se trouve dans la catégorie Color Pickers.

Cliquez sur Color Pickers :

 

 

Cliquez sur Color Picker – jQuery Plugin :

 

 

Puis sur le bouton Visit Website. Le plugin est directement téléchargeable :

 

 

Téléchargez le plugin. En utilisant Total Commander, dézipez son contenu dans le dossier où se trouve votre code jQuery :

 

 

Intégrez alors le code HTML et jQuery dans votre page, comme indiqué dans la documentation :

<!DOCTYPE html>
<html>

<head>

<meta charset="UTF-8">

<title>Utilisation du plugin Farbtastic jQuery Color Picker</title>

</head>

<body>

<script src="jquery.js"></script>

<script type="text/javascript" src="farbtastic.js"></script>

<link rel="stylesheet" href="farbtastic.css" type="text/css" />

 

 

<h2>Utilisation du plugin Farbtastic jQuery Color Picker</h2>

Choisissez une couleur dans la palette

<form><input type="text" id="color" name="color" value="#123456" /></form>

<div id="colorpicker"></div>

<script>

$(function() {

$('#colorpicker').farbtastic('#color');

});

</script>

</body>

</html>

 

 

 

Voici le résultat :

 

 

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.