« Programmation JavaScript/Programmer en deux minutes/Tout un site web dans un seul document » : différence entre les versions
Contenu supprimé Contenu ajouté
m <source> -> <syntaxhighlight> (phab:T237267) |
Aucun résumé des modifications |
||
Ligne 2 :
Pour créer '''Tout un site web dans un seul document''', écrivez un document HTML
contenant des divisions non-affichées (<code>style="display:none"</code>) et une fonction
ce qui exécute le
<syntaxhighlight lang="javascript">
function afficher(a) {
var e=document.getElementById(a); /* e est l'élément du document d'identité a */
e.style.display="inline"; /* Applique le style display:inline à
cacher_sauf(e); /* Cache les autres éléments. */
}
Ligne 24 :
<syntaxhighlight lang="html4strict"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
<head>
Ligne 79 :
;CSS:
<syntaxhighlight lang="css">
.page .corps { display:none;} /* Le corps n'est pas affiché. */
.page:hover .corps { display:block;} /* Lorsque la souris est sur la page, le corps est affiché. */
Ligne 88 :
<syntaxhighlight lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
Ligne 180 :
;CSS :
<syntaxhighlight lang="css">
div#galerie {height:700px;
position:relative; /* Ses divisions seront positionnées par rapport à ce parent. */
Ligne 203 :
</syntaxhighlight>
;
:La librairie jQuery est déclarée en tête du document (<code><script src=http://</code>). Ensuite viennent nos instructions utilisant l'objet jQuery '''<code>$()</code>'''.
Ligne 213 :
<syntaxhighlight lang="javascript">
$(document).ready(function() { // Lorsque le document est prêt,
$ = new slider("#galerie"); // crée l'objet slider().
Ligne 288 :
* Créez ce document <code>*.html</code> et ouvrez-le dans un navigateur :
<syntaxhighlight lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
Ligne 365 :
;CSS declarations:
<syntaxhighlight lang="css">
div#menu {width:100px;}
div#menu ul {padding: 0; width: 100px; border:1px solid gray; margin:0px; }
Ligne 383 :
;Créez ce document <code>*.html</code> et ouvrez-le dans votre navigateur :
<syntaxhighlight lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
| |||