[resolu] Stocker des variables dans les attributs

Bonjour,

J'aimerais stocker des variables pour chaque element, et je m'interroge sur la meilleure facon de faire.

Ce que j'aimerais faire c'est par exemple sur un certain noeud, pouvoir affecter une collection de pair de clé/valeur.

par exemple

<div property="param1=value1;param2=value2" > 

existe t'il une astuce pour faire ca maintenant ? je suis en XHTML 1.0 et je veux que mon document soit correcte pour la majorité des navigateurs récents (IE et FF)

Pour l'instant la seul solution que j'entrevoie c'est de stocker les variables dans l'attribut class

c'est à dire

<div class="NomClass property:[param1=value1;param2=value2]" > 

Je ne pense pas avoir été le seul confronté à ce problème, existe-il une autre solution ? en utilisant plusieurs schémas ?

Et enfin derniere question : il me semble qu'en XHTML2 ce serait possible ? quelqu'un pourrait m'eclairer

Merci de vos réponses
Modifié par CyrilCS (28 Aug 2005 - 20:00)

Salut,

j'avoue ne pas saisir ou tu souhaite en venir...

Quel est le but de ta démarche ?

En fait, je veux faire ceci pour pouvoir avoir des proprietes en plus sur mes elements, et je m'en servirais bien sur en javascript.


Imagine par exemple que j'ai un bete "Container" que l'on peut cacher, j'aurais donc un code html plus ou moins comme ca

    <div id="container1" class="Container Expandable">
        <div class="Titre">Titre de ma section</div>
       <div>
            <p>
                Lorem ip sum dolor sit amet, consectetuer adipiscing elit. Cras scelerisque justo ac neque. Suspendisse potenti. Cras suscipit dignissim magna.Phasellus feugiat felis at tellus. Praesent felis.
            </p>
       </div>
    </div>

puis aprés un traitement sur le onclick du Titre du container

Ce que j'aimerais c'est pouvoir stocker l'etat du container s'il est visible ou non

    <div id="container1" class="Container Expandable property:[visible=false]">
        <div class="Titre">Titre de ma section</div>
       <div>
            <p>
                Lorem ip sum dolor sit amet, consectetuer adipiscing elit. Cras scelerisque justo ac neque. Suspendisse potenti. Cras suscipit dignissim magna.Phasellus feugiat felis at tellus. Praesent felis.
            </p>
       </div>
    </div>

Dans ce cas je pourrais faire autrement car j'ai un id je pourrais stocker tout ca dans un tableau, avec l'id en paramètre, mais tous les elements n'ont pas d'id.

Ce que j'aimerais aussi c'est lorsqu'on charge la page, le serveur puisse définir l'etat du container, il faut donc qu'il ecrive l'etat de l'element dans le html

La finalité de la chose, c'est de pouvoir ecrire

alert(utilities.DOM.Property.get($('container1')));
utilities.DOM.Property.set($('container1'), false);

(avec $ la fonction définit par la librairie prototype http://prototype.conio.net/ )

Je ne vois donc pas d'autres solution que d'ecrire mes variable directement dans le html

Bien sur ceci n'est qu'un exemple et j'aurais bien plus de variable à écrire au final


PS : mon problème n'est point de récuperer les valeurs via javascript, mais juste de savoir la meilleure facon de les stocker.

PS2 : Je ne peux pas étendre le DOM en faisant par exemple

if (Node.prototype)
     Node.prototype.property = {}

puis

$('container1').property.visible = true;

car IE n'a pas l'air de l'accepter, et dans ce cas je ne peux pas écrire mes propriétés à partir du serveur (sauf en tuant les perf )
Modifié par CyrilCS (22 Aug 2005 - 10:30)

Bonjour.

J'ai été confronté au même problème, et j'ai lu quelquepart que dom et w3c autorisait la création de propriété personelle. J'ai donc fait l'expérience, et celà semble fonctionner :

<p id = "bal001" class="ma_class" maprop1="Nom" maprop2="Prénom" onclick="alert('test : ' + getElementById('bal001').getAttribute('maprop1'))">
Ceci est un exemple...
</p>

Marche aussi avec firefox tel quel.

içi la détection se fait par l'id, mais on peut groupper avec les name. On utilise alors getElementsByName et on obtiens une liste d'éléments.

oula ?

t'es sur de toi ? car la ca m'etonnerais vraiment beaucoup que le w3c autoriserait ca! Que ca marche oui c'est sur, mais je ne pense pas que ca soit valide car normalement l'attribut ne respecte pas le schéma.

Donc si tu pouvais retrouver le lien expliquant quelque chose dans ce sens, je suis trés curieux

pour l'instant j'hésite toujours entre mettre mes propriétés dans l'attribut class, d'oublier les standards ou alors de mettre des id de partout et de faire ensuite un

$('monid').property = {key:val, etc...}

Par exemple, la propriété Type des listes li n'est pas mentionnée dans la DTD. Les navigateurs prennent en compte les propriétés quils veulent.
Ainsi, datafld, datasrc d'IE sont spécifiques à IE.
Le navigateur accepte tout, et traite ce qu'il sait faire.
Je vais chercher l'autorisation si je la retrouve...

C'est dommage de modifier l'attribut CLASS, il est trés utile pour la mise en forme. Chaque attribut son rôle:
ID unique
NAME pour manipuler par lot
TITLE pour les tooltip
STYLE pour les css en ligne

mais toujours en minuscule
Modifié par GeorgesM (28 Aug 2005 - 17:54)

Voilà un premier lien :

http://www.u-picardie.fr/~ferment/etude/deppe/xhtml4.html

a écrit :
Conformité
Un type de document XHTML est définit comme un ensemble de modules abstraits. Il est possible de modifier des types de documents existants ou de définir de nouveaux types de document en utilisant à la fois des modules existants et des modules crées. De tels types de document sont conformes lorsqu'ils rencontrent les critères suivants :

Le type de document doit être implémenté via une DTD XML.
Le type de document doit avoir un identifiant unique.
Le type de document doit inclure, au minimum, les modules XHTML Structure, Hypertext, Basic Text et List.
L'utilisation des modules crées par W3C implique qu'aucun élément ou attribut présent dans un module ne soit retiré.
En revanche, il est possible d'étendre ce module en ajoutant des éléments et attributs.
Le type de document peut définir de nouveaux éléments et attributs. Cependant, ils doivent avoir leur propre nom de domaine.

Ce qui veut dire : faire précéder ses attributs persos avec un nom de domaine :

<p id="P002"
mpp:prop1="Ce qu'on veut y mettre"
mpp:prop2="la suite"
onclick="....">
Le domaine mpp est MaPropPerso.
</p>

Et c'est du xhtml, donc à la mode, bien vu et impressionnant.
Modifié par GeorgesM (28 Aug 2005 - 18:03)

Oui je suis bien d'accord que ta solution fonctionne

Mais je voulais savoir s'il existait une facon de faire propre, et conforme avec le XHTML1.0

Je pense que l'on peut rajouter des attributs en créant son propre namespace xml + schéma, mais la je ne suis pas assez calé pour dire

Pour l'instant je fais avec

<div cyril:property="key1:val1;key2:val2" 

mais ce n'est pas conforme vu que l'attribut cyril:property n'existe pas, dans la DTD, donc j'ai pensé mettre mes valeur dans l'attribut class

<div class="property:[key1:val1;key2:val2]" 

avec le code ci dessus c'est valide, mais l'attribut class n'a pas à avoir ce genre de propriété.


Je ne cherche pas à faire marcher mon truc, mais à faire un truc en accord avec le W3C et aprés je me demerderais bien pour recuperer mes valeurs en js

<Edit>
Je ne modifie pas l'attribut Class, je me sert toujours des classes en CSS, mais je stock en plus mes variables dedans, c'est le seul endroit que j'ai trouvé pour faire ce genre de choses tout en restant conforme pour un validateur et je suis conscient qu'il faut mieux avoir un attribut fait pour ca ... et c'est justement ma question

Je viens de voir le lien, j'y vais de ce pas
</Edit>
Modifié par CyrilCS (28 Aug 2005 - 18:04)

Sans problème, c'est possible et bien vu.

Le fait de se pencher sur la rédaction d'une DTD n'est que conseillée. Dans un premier temps, tu peux faire tourner ton application en html sur IE6, IE7 et firefox elle marchera.
Dans le même temps, apprendre les rudiments de la DTD, au début ça fait peur, mais aprés on a nécessairement un meilleur point de vue sur html et xml.
Quand les trois lignes de DTD seront au point, alors basculement en xhtml.

Il te faudra au moins quelques jours.

A force d'editer on va plus rien comprendre


Donc oui je sais qu'il est possible de mettre son namespace dans un document xml, mais je ne sais pas ce qu'il en est dans un document xhtml1.0

Le lien que tu m'as donné, j'ai pas tout compris (faudra que je le relise a tete plus reposé) mais si tu avais un exemple qui etendrais le xhtml ce serait sympa


En fait ce que je voudrais c'est savoir comment rendre valide

<div cyril:property="truc" >

Si c'est possible et surtout si ca cause pas trop d'emmerdes avec les navigateurs actuels ...
Modifié par CyrilCS (28 Aug 2005 - 18:13)

ça ne pose pas de problème avec IE et firefox. Le reste, je sais pas.

Pour faire un document xhtml, il faut le mentionner dans l'entête.

Je vais checher un exemple.

xhtml est du XML associé à une DTD qui définit les balises et les attributs employés.Comme c'est du XML, il est possible d'étendre la DTD localement.
C'est une question de reconnaissance du namespace "cyril:"

Voilà une en-tête xhtml

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//FR"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Un exemple d'entête valide XHTML 1.0 Strict</title>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
</head>
<body>
<p>... Contenu HTML de la page ici ...</p>
</body>
</html>

à celà, ajouter :
xmlns:cyril="http://www.bidon.com"
je sais pas où, et quelque chose à doctype.

çà : a l'air interressant...
http://alexandre.alapetite.net/download/valide-xhtml/index.fr.html

Ce que tu me met au dessus, pour l'instant je le savais, mais c'est justement ensuite que je ne sais pas :s comment faire pour etendre ma DTD ? dois-je en faire une copie locale puis modifier le fichier ? ou alors est-ce possible d'avoir 2 DTD ? une pour le xhtml et une perso ?

Si l'on regarde : http://css.alsacreations.com/rss.php

il n'y a meme pas de DTD de spécifié

<?xml version="1.0" encoding="iso-8859-1" ?>
<?xml-stylesheet href="/xmedia/theme/rss.css" type="text/css"?>

<rdf:RDF
  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  xmlns:dc="http://purl.org/dc/elements/1.1/"
  xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
  xmlns:admin="http://webns.net/mvcb/"
  xmlns:cc="http://web.resource.org/cc/"
  xmlns="http://purl.org/rss/1.0/">

Autre chose qui me gene dans ton exemple : <meta http-equiv="content-type"
content="text/html;charset=utf-8" />
tu envoie le document comme du HTML ?

il serait pas possible dans mon cas de faire comme le fichier rss plus haut ? ce qui me serait quand meme beaucoup plus simple

Non, hélas, ce n'est plus simple : le fichier XML rss n'est pas lisible directement par le navigateur.

Mais j'avance :

<?xml version="1.0" encoding="iso-8859-1"?>
<!doctype html public"-//monsite//dtd xhtml-exemple1.0//fr" 
"http://www.monsite.com/dtd/exemple.dtd"
<html xmlns="http://www.w3.org/1999/xhtml" 
xmlns:cyril="http://www.monsite.com/dtd/exemple.dtd">
<head></head>
<body>
<p 
id = "bal001" 
class="ma_class" 
cyril:maprop1="Nom" 
cyril:maprop2="Prénom" 
onclick="alert('test : ' + getElementById('bal001').getAttribute('cyril:maprop1'))">
Ceci est un exemple...
</p>
</body>
</html>

La DTD n'est pas obligatoire. C'est la définition du namespace qui l'est.
A l'arrivée, le navigateur test (mollement) la conformité, et affiche s'il n'y voit pas d'objection.

Mais dans tous les cas, il convertit le xhtml en dom pour l'afficher. Donc, si javascript arrive à lire les propriétés de la balise, tout est bon.

donc si j'ai bien compris, il faut que je modifie le doctype du XHTML1.1 et ajoute mes propres attributs dedans ?

Le problème que je vois et que les navigateurs adaptent le rendu suivant le DTD (bascule sur doctype) donc la est-ce qu'ils vont basculer sur le doctype xhtml 1.0 ou alors un truc par défaut car le navigateur ne pourra pas adapter le rendu avec mon DTD

Donc la plutot que de prendre le risque d'avoir un rendu mode quircks, je prefererais plutot mettre mes attributs et ne pas etre conforme

Sinon pour ce qui est du rss qui n'est pas censé etre lu par un navigateur, pourquoi alors possede t'il une feuille de style ?

En tout cas je te remercie pour l'aide que tu m'apportes

Concernant rss, la feuille de style permet justement d'afficher le XML. Sans cette feuille de style, on ne verrait que le contenu XML sans mise en forme.

la modification minimale à appliquer et celle-ci

<html xmlns="http://www.w3.org/1999/xhtml" 
xmlns:cyril="http://www.monsite.com/dtd/exemple.dtd">

qui déclare le namespace.

L'extension de DTD est conseillée mais purement facultative. C'est le navigateur qui décide, en fonction de ses versions ce qui est juste ou faut.

Je répète que tu est trés scrupuleux. L'ajout de propriété personelle est le lot quotidien de netscape, IE, w3c et firefox. Aucun navigateur plante pour celà. Au pire il ignore ce qu'il ne connait pas.

Concernant le rendu, c'est la feuille de style qui doit tout faire, et donc valider une feuille CSS est autrement plus important que le reste.

Je sais que je suis trés pointilleux, et que de toute facon ca passe si je met un attribut perso, mais j'ai envie de faire quelque chose de propre et je cherche la meilleure facon


dans ton exemple, http://www.monsite.com/dtd/exemple.dtd doit exister ? il doit y avoir quoi dedans ?

une DTD qui spécifie que tous les elements peuvent avoir l'attribut property ? ou alors toutes la DTD XHTML modifié ?

a écrit :
dans ton exemple, http://www.monsite.com/dtd/exemple.dtd doit exister ? il doit y avoir quoi dedans ?

Non, ce n'est pas nécessaire. Il faut une url, mais celle-ci peut ne pointer sur rien. Le navigateur ne se banche pas.

Je ne suis pas assez calé en xhtml pour répondre exactement comment faire.

Chaque fois que j'ai fais une DTD, j'y ai passé beaucoup de temps, et la mise au point est délicate.

Je me suis basé sur les documents de ce site, qui est excellent.
http://fr.selfhtml.org/xml/dtd/index.htm

Je répète que la DTD est optionnelle, c'est le namespace qui est obligatoire.

ok merci beaucoup


Je vais marquer ce sujet Résolu mais si quelqu'un passe par la, j'aimerais bien avoir son avis aussi

Bonjour à tous,

n'est il pas plus simple de changer la classe, par exemple en mettant une classe "hidden" qu'on change à "show" lors du clic (avec les règles CSS adéquates).
Sinon (je ne suis vraiment pas un spécialiste de javascript), n'est il pas possible de récupérer la valeur d'une propriété CSS appliquée à un élément ?
Du genre :

var element = document.getElementById('truc');

if(element.style.visibility == 'hidden')
{
alert('Cet élément est caché.');
}

Cya all

Oui mais la n'est pas du tout le problème

Par exemple à l'instant, j'ai un div qui contient des infos decrivant une image, avec l'image bien sur et aussi deux liens suivant et précedent.

Quand je clique sur les liens suivant et précédent j'ai envie de changer une l'image en cours, le problème c'est que ca va rafraichir toute la page, donc j'ai fait ca en javascript, et je change dynamiquement les images, le problème reste à savoir ou sont les images pour cela, j'ai fait un fichier xml que je recupere via ajax etc...


au final, j'ai donc

<div class="maGallerie">
<img />
<p class="description">
<ul>
<li><a href="lienversimagesuivante">suivante</a></li>
<li ... precedent ... />
</ul>
</div>

Le problème reste de passer le fichier xml pour que je puisse connaitre les images

<div class="maGallerie" cyril:property="xmlFile:monfichier.xml">
<img />
<p class="description">
<ul>
<li><a href="lienversimagesuivante">suivante</a></li>
<li ... precedent ... />
</ul>
</div>

Ensuite je boucle sur tous les div ayant l'id une bonne dose de javascript et tout est beau et la c'est encore un cas particulier, mais il y a beaucoup de cas ou l'on a besoin d'une propriété en plus.

pour l'instant j'ai pas fait le fichier xml etc... mais ce que j'ai commencé se trouve ici : http://www.cyrildurand.net/test/test.htm c'est loin d'etre encore finit car il y a encore quelques bugs, et puis il faut écrire encore beaucoup de javascript (au final juste de mettre la propriété ou classe qui dit que c'est une gallerie, et le fichier xml et le tour sera joué )
Modifié par CyrilCS (28 Aug 2005 - 20:12)