Pour partager cette vidéo sur les réseaux sociaux ou sur un site, voici son url :
Sujets que vous pourriez aussi aimer :Trier les rubriques sur une page Web
A l'occasion des deux
astuces Javascript précédentes, nous avons vu comment
déplacer un calque sur une
page Web mais aussi comment le
redimensionner dynamiquement à l'aide de la
souris. Avec cette nouvelle
astuce et toujours dans la même lignée, nous allons découvrir comment le
Javascript épaulé par le
JQuery permet de réagencer la
disposition des calques sur une
page Html, toujours à l'aide de la
souris.
Sur l'exemple illustré par la capture, des rubriques cliquables sont proposées sur une
page Web. Mais les thématiques ne sont pas forcément organisées au goût de l'utilisateur. C'est ainsi qu'il peut les glisser et les déposer de manière à les réunir, et tout cela, uniquement à l'aide de la souris.
Sources de travail
Pour la démonstration de cette nouvelle
astuce, nous devons récupérer des sources dont un
fichier Html offrant déjà ces rubriques.
Nous découvrons le
fichier de la page Web. Il est nommé
index.htm. Ses ressources l'accompagnent dans les sous dossiers, dont les
feuilles de styles dans le
sous dossier Css et les
librairies JQuery dans le
sous dossier Js.
- Double cliquer sur le fichier index.htm pour l'ouvrir dans le navigateur par défaut,
Nous retrouvons la
page Web de la présentation. Les rubriques cliquables sont bien présentes et les liens sont fonctionnels. Mais à ce stade, si vous tentez de déplacer un calque sur l'emplacement d'un autre pour modifier l'organisation et la présentation, rien ne se produit. Fort naturellement, c'est tout l'enjeu de cette découverte.
Organisation Html en liste
Nous allons le comprendre, l'application d'une
méthode JQuery est essentielle pour donner vie à cette solution. Mais c'est grâce à une
astuce organisationnelle que ce
réagencement à la souris est rendu possible. Toutes les rubriques doivent appartenir à un
même groupe. Et pour cela, nous les avons organisées dans une
liste énumérée (balises html ul et li).
- A la racine du dossier de décompression, cliquer droit sur le fichier index.htm,
- Dans le menu contextuel, choisir de l'ouvrir avec un éditeur comme le Notepad ++,
Nous affichons ainsi le
code Html de la
page Web. Bien entendu, les références aux
feuilles de styles et aux
librairies JQuery sont établies dans la
section Head :
...
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/mes-styles.css">
<link rel="stylesheet" href="css/les-styles.css">
<script src="js/jquery-1.12.4.js"></script>
<script src="js/jquery-ui.js"></script>
</head>
<body>
...
Plus bas dans le
code Html, nous trouvons ensuite l'organisation des rubriques qui nous intéressent. Elles sont imbriquées dans un
calque parent d'
identifiant auCentre :
...
<div id="auCentre">
<ul id="groupe">
<li class="case access"><a href='https://www.bonbache.fr/... .html' target='_blank'><u>Microsoft Access</u></a></li>
<li class="case excel"><a href='https://www.bonbache.fr/ ....html' target='_blank'><u>Microsoft Excel</u></a></li>
<li class="case php"><a href='https://www.bonbache.fr/ ....html' target='_blank'><u>Langage PHP</u></a></li>
<li class="case access"><a href='https://www.bonbache.fr/... .html' target='_blank'><u>Langage VBA Access</u></a></li>
<li class="case word"><a href='https://www.bonbache.fr/ ....html' target='_blank'><u>Microsoft Word</u></a></li>
<li class="case photoshop"><a href='https://www.bonbache.fr/... .html' target='_blank'><u>Logiciel Photoshop</u></a></li>
<li class="case excel"><a href='https://www.bonbache.fr/ ....html' target='_blank'><u>Langage VBA Excel</u></a></li>
<li class="case javascript"><a href='https://www.bonbache.fr/... .html' target='_blank'><u>Langage Javascript</u></a></li>
<li class="case excel"><a href='https://www.bonbache.fr/ ....html' target='_blank'><u>Excel Astuces</u></a></li>
<li class="case access"><a href='https://www.bonbache.fr/... .html' target='_blank'><u>Access Astuces</u></a></li>
<li class="case css"><a href='https://www.bonbache.fr/ ....html' target='_blank'><u>Les Styles Css</u></a></li>
<li class="case word"><a href='https://www.bonbache.fr/ ....html' target='_blank'><u>Word Astuces</u></a></li>
</ul>
</div>
...
Comme vous pouvez le voir, chaque rubrique cliquable (balise a) est inscrite dans une liste (balise li) d'un même groupe (balise ul). C'est grâce à cette organisation, que nous allons pouvoir influer sur les emplacements des uns par rapport aux autres, grâce à une
méthode JQuery. Les
styles utilisés sont le
style groupe pour le groupe (c'est aussi son identifiant) et le
style case commun à chaque élément de la liste. Ensuite, chaque rubrique combine un second style pour la couleur. Mais tous les réglages opérés en
Css sont on ne peut plus classiques et n'ont aucune importance ou incidence pour la mise en place de la solution. Vous pouvez néanmoins les consulter en ouvrant la
feuille de styles les-styles.css placée dans le sous
dossier Css :
...
#groupe
{
list-style-type: none;
margin: auto;
padding: 0;
width: 650px;
}
#groupe li
{
margin: 6px 6px 6px 6px;
border:#666 1px solid;
padding-top: 7px;
float: left;
width: 150px;
height: 110px;
font-size: 30px;
text-align: center;
}
.word {background-color:#2b579a; color:#f2f2f2; border:#103f91 1px solid;}
.excel {background-color:#457e5f; color:#f2f2f2; border:#185c37 1px solid;}
.access {background-color:#a13638; color:#f2f2f2; border:#881421 1px solid;}
.php {background-color:#72759d; color:#f2f2f2; border:#484c89 1px solid;}
.javascript {background-color:#b1994d; color:#f2f2f2; border:#836c25 1pxsolid;}
.css {background-color:#862e38; color:#f2f2f2; border:#52141b 1px solid;}
.photoshop {background-color:#6e9ee0; color:#f2f2f2; border:#3866a5 1px solid;}
...
Organiser les calques à la souris
A partir du moment où vous respectez cette
construction Html, le plus dur est fait pour donner vie à ce système de
réagencement par
cliquer-glisser à l'aide de la
souris. Une
seule méthode JQuery doit être appliquée sur l'
élément Html du groupe, soit le conteneur des rubriques. Et cette
méthode se nomme
sortable.
- Revenir dans le code de la page Html,
- Puis, atteindre la section de script située tout en bas de page,
- Dans cette section, inscrire l'instruction Javascript suivante :
<script type="text/javascript" language="javascript">
$("#groupe").sortable();
</script>
Et c'est tout aussi incroyable que cela puisse paraître. C'est la
méthode JQuery sortable appliquée sur l'
élément Html groupe appropriée par le
JQuery grâce à l'alias ($) qui se charge de tout le reste. Et nous allons le vérifier.
- Enregistrer les modifications (CTRL + S) puis revenir sur la page Web (ALT + Tab),
- Rafraîchir le navigateur avec la touche F5 du clavier,
- Puis, déplacer des cases de rubriques pour interchanger leurs positions,
Comme vous pouvez l'apprécier, les rubriques se réorganisent effectivement à la guise de l'internaute, par simples cliquer-glisser avec la souris.