Salut,
figo a écrit :
Merci pour vos réponses. La solution de Quentin est facilement adaptable pour répondre à mon problème mais je me demande à quel point elle est généralisable.
J'ai envie de dire oui et non du fait que la fonction ne sert que dans un contexte particulier (avec des balises particulières)... Cela dit, c'était la question donc c'est normal.
a écrit :
La propriété index ne sert-elle pas à autre chose normalement ?
Non, du tout. C'est un ajout "utilitaire" et on y affecte ce qu'on souhaite comme valeur.
a écrit :
Peut-on avoir plusieurs objets avec le même index ?
Oui, pas de problème tant que les objets sont clairement différenciés.
a écrit :
Est-ce xhtml1-strict.dtd proof ?
Pas de problème là aussi du fait que l'index n'influe en rien sur le code xhtml.
a écrit :
Cela marche-t-il avec tous les navigateurs ?
oui. (quoique je m'avance pas trop pour Safari... C'est un capricieux celui-là
)
a écrit :
Et si je veux avoir plusieurs paramètres dans mon onclick ?
Là, ça se complique.
Soit tu sais à l'avance quelles sont les propriétés soit tu ne le sais pas. Dans le second cas, il faut prévoir une méthode généraliste.
Un bon moyen de transmettre une propriété à un élément est de passer un objet JSON unique en argument au sein duquel tu définies toutes tes propriétés. Par exemple, en reprenant la méthode camelize de la librairie Prototype, on peut s'amuser à affecter n'importe quelle propriété CSS aux différents éléments. (voir les exemples ci-dessous)
a écrit :
Merci Koala pour ta solution qui commence à être complexe, je dois dire que j'ai un peu du mal à tout saisir (je trouve tes noms de variables pas toujours très explicites).
La chose qui devait le plus te perturber était essentiellement la gestion d'événement en DOM-2 non ? Pour simplifier, je repasse avec des onclick. J'aurais du mal à faire mieux vu ta demande.
En ce qui concerne mes noms de variables, j'utilise souvent la même logique :
- Première lettre en minuscule représentant le type de la variable
- puis le nom "camelisé" représentatif du contenu de la variable
Bref, on peut imaginer quelquechose comme ceci :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Exemple</title>
<style type="text/css"><!--
@media screen, projection
{
div { width: 100px; height: 100px; background-color: red; margin-bottom: 5px; }
}
--></style>
<script type="text/javascript"><!--
var Script, Sp, BindPropertiesToLinks, BindPropertiesToDivs;
Script = function() {};
Sp = Script.prototype =
{
connect: function(oElem, sEvType, fn, bCapture)
{
return document.addEventListener ?
oElem.addEventListener(sEvType, fn, bCapture):
oElem.attachEvent ?
oElem.attachEvent('on' + sEvType, fn):
false;
},
aTag: function(oEl, sTag)
{
return oEl.getElementsByTagName(sTag);
},
camelize: function(sProp)
{
var parts, len, camelized, iI;
parts = sProp.split('-');
len = parts.length;
if(len == 1)
return parts[0];
camelized = sProp.charAt(0) == '-' ?
parts[0].charAt(0).toUpperCase() + parts[0].substring(1) :
parts[0];
for(iI = 1; iI < len; iI++)
camelized += parts[iI].charAt(0).toUpperCase() + parts[iI].substring(1);
return camelized;
},
bindProperties: function(oEl, aEl, oProp)
{
var iEl, aProp;
aProp = new Array();
for(sProp in oProp)
aProp[Sp.camelize(sProp)] = oProp[sProp];
iEl = 0;
while(aEl[iEl] != oEl)
{
for(sProp in aProp)
aEl[iEl].style[sProp] = aProp[sProp];
iEl++;
}
for(sProp in aProp)
oEl.style[sProp] = aProp[sProp];
return true;
},
addBehaviour: function(sTag, oProp)
{
var aEl, aEls, iEl;
aEl = aEls = Sp.aTag(document, sTag);
iEl = aEls.length;
do
aEls[--iEl].onclick = function()
{
Sp.bindProperties(this, aEl, oProp);
return false;
};
while(iEl > 0);
return true;
},
initialize: function(sTag, oProp)
{
return Sp.connect(window, 'load', function() { Sp.addBehaviour(sTag, oProp); }, false);
}
};
BindPropertiesToLinks = new Script;
BindPropertiesToLinks.initialize(
'a',
{
'color': 'red',
'background-color': 'black',
'padding-left': '50px'
}
);
BindPropertiesToDivs = new Script;
BindPropertiesToDivs.initialize(
'div',
{
'background-color': 'black',
'width': '50px',
'height': '50px'
}
);
//--></script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<ul>
<li><a href="#">lien 1</a></li>
<li><a href="#">lien 2</a></li>
<li><a href="#">lien 3</a></li>
<li><a href="#">lien 4</a></li>
<li><a href="#">lien 5</a></li>
<li><a href="#">lien 6</a></li>
<li><a href="#">lien 7</a></li>
<li><a href="#">lien 8</a></li>
<li><a href="#">lien 9</a></li>
</ul>
</body>
</html>
Dans cet exemple, Script est une fonction vide. De là, on définit au sein du prototype de celle-ci les méthodes utiles au script.
Pour ne pas avoir à retaper systématiquement Script.prototype.maMethode, je crée un raccourci Sp puis je m'en sers à tout va (les méthodes s'écrivent maintenant Sp.maMethode. On pourrait mettre this.maMethode à la place mais je préfère l'éviter car ce n'est jamais parlant). Après, le principe, c'est qu'on peut se resservir du prototype pour créer plusieurs instances.
Ici, j'y crée deux instances, l'une pour styliser les divs et l'autre pour les liens. Je passe les propriétés de style via un objet JSON et pour que les propriétés soient correctement prises en compte, je camélise les labels de l'objet (ex. : background-color devient backgroundColor que j'associe à l'objet style de l'élément)
PS : A mon avis, le principe ne va pas te paraître bien clair malgré mes explications mais bon, je te laisse tester et éplucher le script... désolé
Modifié par koala64 (10 Sep 2007 - 14:58)
