JQUERY est l’un des Frameworks Javascript les plus utilisés nous allons voir comment créer un plugin simple pour générer une infobulle au survol d’un élément.
Mon 1er plugin JQuery
la notation pour créer un plugin en JQuery se fait de la manière suivante:
Il faut utiliser jQuery plutot que $ afin d’éviter d’éventuel conflit avec d’autres Frameworks par exemple.
Les plugins sont définis en utilisant la fonction fn puis le nom de notre plugin.
Exemple:
jQuery.fn.infobulle = function(paramètre){... votre code ...}
Il est cependant possible d’utiliser la variable $ en créant une fonction anonyme est en mettant la variable $ en paramètre comme suit:
(function($) {
$.fn.infobulle = function(paramètre){... votre code ...}
})(jQuery);
Créons notre 1er plugin, pour cela créer un fichier jquery.infobulle.js et mettre le code ci dessous:
/**
* author: Kevin FERRANDON
* description: Plugin d'info bulle pour JQuery
*/
(function($){
// définition du plugin
$.fn.infobulle = function(param){
//Nous allons créer un élément div.
var elt = document.createElement("div");
//Nous cachons la div crée.
$(elt).addClass(param.dvinfobulle).hide();
//Nous ajoutons notre élément a notre page.
document.body.appendChild(elt);
return this.each(function() {
/* Au survole de l'élément nous ajoutons le texte écrit dans l'attribut data-txtbulle
Noter que la syntaxe data- est une norme HTML5 si vous utilisez du XHTML
ou autre vous pouvez utiliser d'autres attributs comme le title ou le rel par exemple..
Puis nous affichons la div.
*/
$(this).hover(function(){$(elt).show();$(elt).html($(this).attr("data-txtbulle"));
// A chaque déplacement de la souris on fait suivre la div.
$(this).mousemove(function(e){$(elt).css(
{"position":"absolute", "top": e.pageY + param.offsetY, "left": e.pageX + param.offsetX}
);});
}, function(){
// si nous ne survolons plus notre élément on cache la div.
$(elt).hide();
});
});
};
})(jQuery)
Voila notre 1er plugin JQuery écrit maintenant comment l’utiliser?
Créer un fichier html exemple: infobulle.html, puis y mettre le code suivant:
<html>
<head>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("jquery", "1.7.0");
google.load("jqueryui", "1.8.16");
</script>
<script type="text/javascript" src="jquery.infobulle.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var option = {
offsetX:10, offsetY: 10, dvinfobulle: 'infobulle'};
$(".info").infobulle(option);
});
</script>
<style>
.infobulle {
width: 200px;
padding: 5px;
background-color:#ff8100;
border: black 1px solid;
color: black;
text-align:center;
border-radius: 20px;
}
</style>
<meta http-Equiv="Content-Type" content="text/html; utf-8">
</head>
<body>
<a href="#" data-txtbulle="test infos bulle" class='info' >test</a>
<div data-txtbulle="test element div" class='info'> Autre petit test </div>
</body>
</html>
Voila j’espère que ce petit Tutorial vous à aider. Vous pouvez le plugin infobulle.
Bon développement à tous.
