Avant de commencer, quelques liens vers la documentation en ligne de jQuery:
- documentation
- quelques tutoriels
- une liste de plugins
- version stable et en développement
- mailing list
Développer un plugin pour jQuery est particulièrement intéressant car on peut bénéficier d’une librairie JavaScript flexible, légère qui permet d’effectuer facilement des manipulations DOM, des effets et des animations simples ou avancées et surtout du Ajax. La mise en place d’un plugin va vous permettre de l’appliquer facilement a n’importe quel contexte.
Dans la première partie, nous avons montré la facilité de manipuler la structure html d’une page web afin d’uniformiser la hauteur de 6 zones ayant chaqu’une une taille de texte différente.
Essayons de voir maintenant comment intégrer le script précédent dans jQuery afin de l’inclure au framework.
Tout d’abord il faut importer la librairie:
<script type="text/javascript" src="js/jquery.js"></script>
Ensuite on adapte le script en suivant le tutoriel de jQuery relatif au développement de plugins:
$.fn.equalHeight = function()
{
return this.each(function(){
var maxHeight = "";
var myBoxes = document.getElementById(this.id);
for (i=0; i
if (myBoxes.childNodes[i].nodeName == "DIV")
{
if (myBoxes.childNodes[i].offsetHeight > maxHeight)
{
maxHeight = myBoxes.childNodes[i].offsetHeight;
}
}
}
$("#" + this.id + " div").css("height", maxHeight + "px");
$("#" + this.id + " div").css("color", "#fff");
$("#" + this.id + " div").css("background-color", "#000");
});
};
On applique ensuite le plugin à #all-boxes. Le plugin s'occupe du reste:
$("#all-boxes").equalHeight();
Enfin, l'exemple pour voir le résultat final.
Très intéressant cette série d’articles sur le DOM Scripting.
Par contre dans ton exemple tu as oublié de spécifier le type de style.
il manque un bout de JS dans le code ci-dessus (en passant).
// [...]
var maxHeight = 0
var nodes = document.getElementById(this.id).getElementsByTagname(’div’);
for(var i=0; i
il manque un bout de JS dans le code ci-dessus (en passant).
// [...]
var maxHeight = 0
var nodes = document.getElementById(this.id).getElementsByTagname(’div’);
for(var i=0; i«nodes.length; i++)
maxHeight = Math.max(maxHeight, nodes[i].offsetHeight);
// [...]
La fonction Math.max t’évite de devoir récupérer deux fois la hauteur du fils. La syntaxe jQuery est plutôt élégante je dois dire.
Quelqu’un connaissant peu le JavaScript en général va à mon avis en rester à des adaptations d’exemples.
La suite, la suite ;-D
@gunt: je vais rectifier ça, merci
@greut: ah, voilà que j’apprends quelque chose par rapport à Math.max, dès que j’ai un peu de temps je vais explorer cette piste. Pour le bout de code manquant, WP déconne un peu lors du copy-paste du contenu du plugin… en tout cas dans ce billet. Merci en tout cas pour tes remarques ponctuelles, ça fait plaisir d’avoir ce genre de feedback.
Pour la suite, un peu de retard certainement (faut dire que pour l’instant je n’ai pas encore trop refléchi à la suite)
Ton exemple m’a donné envie d’équilibrer des boîtes. Ave un code plus compact, que voici :
$(document).ready(function() {
$(”.equilibre”).each(function(){
var h=0;
$(”>*”, this)
.each(function(){ h=Math.max(h,this.offsetHeight); })
.css({’height’: h+’px’});
});
});
J’ai laissé un commentaire chez Fil concernant une histoire de Box Model.
Il me semble qu’il est possible d’un peu simplifier le code en écrivant directement $(”.equilibre>div”).
Ce qui est impressionnant c’est que le sélecteur XPath fonctionne tout aussi bien $(”//*[@class='.equilibre']/div”).
Rien à dire, avec Prototype ce n’est pas plus concis.