« Programmation JavaScript/Programmer en deux minutes/Tout un site web dans un seul document » : différence entre les versions
Contenu supprimé Contenu ajouté
m Formatage, ajout de code |
m <source> -> <syntaxhighlight> (phab:T237267) |
||
Ligne 5 :
ce qui exécute le JavaScript suivant :
<
function afficher(a) {
var e=document.getElementById(a); /* e est l'élément du document d'identité a */
Ligne 18 :
}
}
</syntaxhighlight>
Ligne 24 :
<
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
<head>
Ligne 67 :
</body>
</html>
</syntaxhighlight>
'''Félicitation''', les divisions de classe ''page'' sont affichées et cachées lors des clics sur les ancres.
Ligne 79 :
;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é. */
</syntaxhighlight>
Ligne 88 :
<
<!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 169 :
</body>
</html>
</syntaxhighlight>
== Avec jQuery, une librairie d'instructions javascript ==
Ligne 180 :
;CSS :
<
div#galerie {height:700px;
position:relative; /* Ses divisions seront positionnées par rapport à ce parent. */
Ligne 201 :
padding:0 0em;
width:1000px;}
</syntaxhighlight>
;Javacript :
Ligne 213 :
<
$(document).ready(function() { // Lorsque le document est prêt,
$ = new slider("#galerie"); // crée l'objet slider().
Ligne 280 :
);
}
</syntaxhighlight>
Ces instructions exécutent la méthode ready() de l'objet $(document). (<code>$(document).ready(function(){});</code>)
Ligne 288 :
* Créez ce document <code>*.html</code> et ouvrez-le dans un navigateur :
<
<!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 356 :
</body>
</html>
</syntaxhighlight>
== Un menu déroulant en CSS ==
Ligne 365 :
;CSS declarations:
<
div#menu {width:100px;}
div#menu ul {padding: 0; width: 100px; border:1px solid gray; margin:0px; }
Ligne 377 :
div#menu li a {text-decoration: none; color:gray;}
div#menu li.sousmenu {background: #F0F0F0;}
</syntaxhighlight>
''ul.niveau2'' est affiché (<code>display:block;</code>) lorsque la souris est dessus ''li.sousmenu'' (<code>li.sousmenu:hover</code>) contenue dans ''div#menu ul.niveau1''.
Ligne 383 :
;Créez ce document <code>*.html</code> et ouvrez-le dans votre navigateur :
<
<!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 490 :
</body>
</html>
</syntaxhighlight>
| |||