DOMAssistant.boxIt
Encadrer n'a jamais été aussi rapide...
Préparatifs
Procurez-vous la librairie DOMAssistant.
A minima, seuls les modules core, content, css et load vous seront nécessaires (mais la version complète compressée est vraiment de très petite taille et pourra servir ailleurs dans vos pages...)Téléchargez l'archive de boxIt et décompactez-la dans l'un de vos répertoires locaux.
Dans l'en-tête de la page, insérez le code suivant :
<link rel="stylesheet" type="text/css" href="lib/css/DOMAssistant-boxIt.css" />
<script type="text/javascript" src="lib/js/DOMAssistantCompressed-2.7.js"></script>
<script type="text/javascript" src="lib/js/DOMAssistant-boxIt.plugin.js"></script>
<script type="text/javascript" src="lib/js/boxItLauncher.js"></script>
dans lequel "lib/js/" et "lib/css/" correspondent aux chemins relatifs des répertoires dans lesquels vous aurez respectivement placé les scripts et la feuille de style.
Note importante
Hormis pour la feuille de style, qui peut être insérée avant ou après les scripts, l'ordre d'insertion doit se faire suivant le modèle ci-dessus.
Codage des zones
Dans la page
En dehors des balises <img /> et <span></span> (lorsqu'elle correspond à une lettrine), les zones à encadrer doivent être des blocs sans quoi le résultat ne sera pas celui attendu.
Il n'y a pas de règle pour le codage des zones à encadrer : tout dépend du code contenu par votre boxItLauncher.js.
| Code du launcher | Effet attendu |
|---|---|
$("p").boxIt() |
Encadrer chaque paragraphe de la page |
$("p#test").boxIt() |
Encadrer uniquement le paragraphe dont l'ID est "test" |
$("div.test").boxIt() |
Encadrer tous les blocs DIV dont la classe css est "test" |
$(".test").boxIt().className += " reussi" |
Encadrer tous les blocs DIV dont le nom de classe est "test" et leur ajouter la classe "reussi" |
Pour plus de détails sur ce fonctionnement, reportez-vous à la documentation de DOMAssistant
La méthode boxIt()
C'est l'appel à la méthode boxIt([t,r,b,l[,cornerEnding]]) sur une référence à un élément DOM de la page qui génère l'effet.
L'argument cornerEnding a été ajouté à partir de la version 0.4 pour ajouter l'angle (si cornerEnding vaut 1) même lorsqu'une bordure est supprimée. Par défaut, cet effet n'est pas rendu.
Cet appel doit être fait après le chargement du DOM et il est réalisé, dans le fichier boxItLauncher.js, par l'appel à la méthode DOMAssistant.DOMReady(). (L'usage de window.onload() donne un résultat infiniment moins heureux puisque les modifications se feront après le chargement de la page et des éventuelles images...)
Valeur de retour
La méthode renvoie la référence à l'élément DOM correspondant au bloc conteneur général du cadre créé (div.round_cadre), ce qui fait que vous pouvez lui appliquer d'autres traitements (Voir le 4ème exemple du tableau "Exemples de code pour le launcher").
DOMRef.boxIt() ajoute le cadre à l'élément DOMRef et renvoie la référence du conteneur de cadre (i.e. DOMRef devient reférence du cadre contenant l'élément d'origine)
Définition des bordures
Par défaut, les quatre bordures sont ajoutées. On peut cependant spécifier les bordures qu'on souhaite voir ou ne pas voir apparaître en passant à la méthode les arguments 1 (voir) ou 0 (masquer) correspondant à chacune des bordures.
L'ordre des arguments correspond à celui des paramètres de border en CSS : haut, droite, bas, gauche.
Tout argument non-mentionné est considéré comme 1 (visible).
Exemples
boxIt()boxIt(1,0,0,1,1)boxIt(1,0,0)boxIt(0,1,1,1,1)boxIt(0)Styles
Styles de base
.round_cadre : bloc-conteneur général (n'apparaît pas dans la feuille de style - Destiné à être surchargé avec les styles additionnels)
.round_cadre div.gCont : bloc-conteneur avec bordure droite en image d'arrière-plan
.round_cadre div.topCont : bloc-conteneur haut avec bordure haute en image d'arrière-plan
.round_cadre div.top : bloc-conteneur avec coin haut-droit en image d'arrière-plan
.round_cadre div.top div : bloc-conteneur avec coin haut-gauche en image d'arrière-plan
.round_cadre div.midCont : bloc-conteneur central avec bordure gauche en image d'arrière-plan. C'est ce conteneur qui recevra la balise d'origine.
.round_cadre div.botCont : bloc-conteneur bas avec bordure basse en image d'arrière-plan
.round_cadre div.bot : bloc-conteneur avec coin bas-droit en image d'arrière-plan
.round_cadre div.bot div : bloc-conteneur avec coin bas-gauche en image d'arrière-plan
Noms de classes multiples
Si vous appliquez boxIt à un élément sur lequel sont définies d'autres classes CSS, c'est le bloc-conteneur du cadre qui en héritera.
Ce comportement peut être modifié en préfixant le nom de la classe avec "cnt_" : dans ce cas, la classe en question sera appliquée à l'élément d'origine.
L'ID éventuel, en revanche, restera attaché à l'élément d'origine.
Exemple
boxItLauncher.js
$("#classesMultiples").boxIt();
CSS :
#classesMultiples { border: 1px solid #fff; }
.testMultiples { width: 200px; }
.test_bg_black { background: #000; color: #fff; }
.test_bg_blue { background: #516BFF; color: #FFF152; }
HTML :
<p id="classesMultiples" class="testMultiples test_bg_black cnt_test_bg_blue">Test</p>
Résultat :
Test
Règles d'emboîtements
Si vous prévoyez de créer des imbrications de boîtes de styles différents, prenez soin, dans la feuille de styles (par défaut DOMAssistant-boxIt.css), de placer les définitions correspondant aux "boîtes-mères" avant celles des "boîtes-filles", sinon, seul le dernier style de boîte défini dans la feuille de style sera utilisé pour tous les emboîtements.
© 
- 2008