Séparation présentation / contenu / comportement
Posté : 09 août 2005, 15:10
À partir du classique code pour ouvrir des popup en se basant sur la classe d'un lien, j'ai fait un "parseur" qui permet de déclarer les comportements comme on déclare les styles en CSS.
Exemple : http://naholyr.free.fr/events/test.html
(gaffe, le lien rouge ouvre une popup au passage de la souris)
Le principe est le suivant :
- On écrit sa page (le contenu), avec uniquement la structure sémantique
http://naholyr.free.fr/events/test.html
- On y ajoute un style (présentation) avec une feuille CSS
http://naholyr.free.fr/events/events.css
- On y ajoute les comportements en incluant :
- - Un script implémentant les fonctions (définitions des comportements), et les attachant à l'aide d'une chaine de caractères.
http://naholyr.free.fr/events/setevents.js *
- - La librairie qui se charge d'appliquer tout ça.
http://naholyr.free.fr/events/events.js
Pas envie de donner plus d'explications sur le moment, ze veux zuste des critiques pour l'instant
( et pitié dites-moi que pour une fois j'ai pas inventé un truc qui existe déjà )
* La syntaxe de la déclaration des comportements est sensiblement la même que pour les CSS :
[TAG][.CLASS ou #ID]:EVENEMENT { FONCTION1; FONCTION2; ... }
Et ce pour chaque comportement à déclarer.
EVENEMENT peut être click, mouseover, mouseout, blur, focus, etc... (le nom de l'evenement javascript sans le "on" devant).
Le point intéressant de ça c'est qu'avec XmlHttpRequest on peut externaliser la déclaration des comportements dans un fichier, ou avec innerHTML la mettre dans un tag invisible, etc...
Exemple : http://naholyr.free.fr/events/test.html
(gaffe, le lien rouge ouvre une popup au passage de la souris)
Le principe est le suivant :
- On écrit sa page (le contenu), avec uniquement la structure sémantique
- On y ajoute un style (présentation) avec une feuille CSS
- On y ajoute les comportements en incluant :
- - Un script implémentant les fonctions (définitions des comportements), et les attachant à l'aide d'une chaine de caractères.
- - La librairie qui se charge d'appliquer tout ça.
Pas envie de donner plus d'explications sur le moment, ze veux zuste des critiques pour l'instant
( et pitié dites-moi que pour une fois j'ai pas inventé un truc qui existe déjà )
* La syntaxe de la déclaration des comportements est sensiblement la même que pour les CSS :
[TAG][.CLASS ou #ID]:EVENEMENT { FONCTION1; FONCTION2; ... }
Et ce pour chaque comportement à déclarer.
EVENEMENT peut être click, mouseover, mouseout, blur, focus, etc... (le nom de l'evenement javascript sans le "on" devant).
Le point intéressant de ça c'est qu'avec XmlHttpRequest on peut externaliser la déclaration des comportements dans un fichier, ou avec innerHTML la mettre dans un tag invisible, etc...