Bonjour pyxosledisciple,
a écrit :
Oui, mais plus exactement que si elle est cachée, un clic la fasse apparaître et qu'un nouveau clic la fasse disparaître.
Ah oué, rien de plus simple pour quelqu'un qui se met à l'Ajax (sous-entendu qui maîtrise XHTML, CSS, JS, qui a des connaissances sur XML ou JSON, PHP,... et qui sait rendre ses codes accessibles). Ca doit être juste un petit oubli alors...
Voilà de quoi se rafraîchir la mémoire :
index.php
<?php
header("Content-type: text/html; charset=iso-8859-1");
?><!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=iso-8859-1" />
<title>Exemple</title>
<style type="text/css" media="screen, projection">
@charset "iso-8859-1";
@import "style.css.php";
</style>
<script type="text/javascript" src="script.js.php"></script>
<script type="text/javascript"><!--
document.write('<'+'style type="text/css"><!--');
document.write('div { display: none; }');
document.write('--><'+'/style>');
//--></script>
</head>
<body>
<h3>Citation du jour</h3>
<div>
<q>Ils ont échoué parce qu'ils n'avaient pas commencé par le rêve.</q>
<p>William Shakespeare</p>
</div>
</body>
</html>
style.css.php
<?php
header("Content-type: text/css; charset=iso-8859-1");
?>
a
{
font-weight: bold;
color: #000;
font-size: 1.3em;
}
a:hover, a:focus, .Over, .Focus
{
color: #D0D;
}
.Affiche
{
display: block;
}
.Cache
{
display: none;
}
script.js.php
<?php
header("Content-type: text/javascript; charset=iso-8859-1");
?>
var oUtil =
{
'handle': 'h3',
'elem': 'div',
'CSS1': 'Affiche',
'CSS2': 'Cache',
'CSS3': 'Over',
'CSS4': 'Focus',
'attr': 'class',
_Test: function()
{
if(!document.getElementsByTagName ||
!document.createElement ||
!document.createTextNode) return false;
return oUtil._Scenario(oUtil['handle'], oUtil['elem']);
},
_Scenario: function(handle, elem)
{
var oHandle = document.getElementsByTagName(handle)[0];
var oLink = oUtil._CreaLink('#', oHandle.lastChild.nodeValue);
var oElem = document.getElementsByTagName(elem)[0];
oElem.className = oUtil['CSS2'];
document.getElementsByTagName('body')[0].replaceChild(oLink, oHandle);
oUtil._Connect(oLink, 'over', function() { oLink.className = oUtil['CSS3']; }, false);
oUtil._Connect(oLink, 'focus', function() { oLink.className = oUtil['CSS4']; }, false);
oUtil._Connect(oLink, 'out', function() { oLink.removeAttribute(oUtil['attr']); }, false);
oUtil._Connect(oLink, 'blur', function() { oLink.removeAttribute(oUtil['attr']); }, false);
oUtil._Connect(oLink, 'click', function(e) { oUtil._Style(oElem); oUtil._CancelClick(e); }, false);
},
_CreaLink: function(href, txt)
{
var oTmpLink = document.createElement('a');
var oTmpTxtLink = document.createTextNode(txt);
oTmpLink.setAttribute('href', href);
oTmpLink.appendChild(oTmpTxtLink);
return oTmpLink;
},
_Style: function(elem)
{
elem.className = elem.className == oUtil['CSS2'] ? oUtil['CSS1'] : oUtil['CSS2'];
if(elem.className == oUtil['CSS2']) elem.blur();
},
_Connect: function(elm, evType, fn, useCapture)
{
if(elm.addEventListener) elm.addEventListener(evType, fn, useCapture);
else if(elm.attachEvent) elm.attachEvent('on' + evType, fn);
else elm['on' + evType] = fn;
},
_CancelClick: function(e)
{
if(window.event)
{
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if(e && e.stopPropagation && e.preventDefault)
{
e.stopPropagation();
e.preventDefault();
}
}
};
oUtil._Connect(window, 'load', oUtil._Test, false);
Bien entendu, ces codes ne te posent aucun problème et tu en comprends les moindres rouages, n'est-ce pas ?
Plus sérieusement, dans l'Ajax, il y a une bonne partie Javascript... Connais-tu ce langage ? Ca ne se limite aux notions de base lorsqu'on touche à l'Ajax. Ce que tu demandes est, somme toute, basique mais mérite quelques attentions particulières, ce pourquoi j'ai la forte impression que tu tentes de brûler les étapes...
Je pense que tu devrais prendre le temps de te pencher un peu plus sur toutes les technologies qui constituent l'Ajax ainsi que sur certaines notions d'accessibilité avant même de penser à en faire.
Par ailleurs, le jour où tu y viendras, Ajax à 200% n'est pas un livre pour apprendre... Préfère ceux qui se trouvent dans ce sujet :
http://forum.alsacreations.com/topic-5-17057-1-Livres-de-rfrence-Javascript.html
Ce qui ne va pas dans ce que tu souhaites faire, c'est que tu ne devrais déjà pas avoir un tableau pour la mise en page mais de préférence un code sémantique... donc, au moins, un titre (hn), une courte citation (q) suivi d'un paragraphe (p). Par ailleurs, un titre n'est pas censé être cliquable. Si tu changes son rôle et que tu le rends cliquable, tu mets les utilisateurs naviguant au clavier à la porte. Il faut donc remplacer le titre par un lien généré en JS puis redonner au lien obtenu l'apparence d'un titre via CSS. Il est préférable de laisser le soulignement pour indiquer que c'est un lien et si tu souhaites donner un effet au survol comme ci-dessus, il est bon de le doubler via le focus pour que tout le monde puisse voir cet effet (navigation clavier). Donc, ne crois-tu pas qu'il te reste beaucoup de choses à apprendre avant de te pencher sur l'Ajax ? J'en ai bien l'impression...
Bien sûr, ce n'est qu'un avis, libre à toi de continuer à faire de la soupe...
Modifié par koala64 (21 Sep 2006 - 09:48)
) du DHTML. Ajax consiste en la communication avec le serveur sans rafraichissement de la page.
).
)