Utilisateur:Cantons-de-l'Est/Boutons de navigation
Si vous contribuez régulièrement, vous naviguez souvent à certaines pages. Consultez-vous votre liste de suivi une fois par jour ? Ce lien est présent tout en haut de chaque page, mais vous devez « monter » dans la page pour le voir. Vous naviguez peut-être régulièrement à la page d'un projet, mais il n'y a aucun lien dans les pages de la Wikipédia. Ne serait-il pas utile que ces « favoris » soient toujours visibles sous la forme de boutons de navigation ?
Pour créer des boutons de navigation qui s'affichent dans n'importe quelle page de la Wikipédia en français (ou presque), il suffit d'ajouter un programme à common.js
qui affiche par exemple ces boutons :
(aller tout en haut de la page)
(aller tout en bas de la page)
lds (naviguer à votre liste de suivi)
Création
modifierPour créer une barre de boutons verticales, suivez ces étapes :
- 1. Allez à
common.js
(créez cette page si nécessaire).
- 2. Modifiez cette page.
- 3. Copiez-y ce fragment de code (que j'appelle « en-tête » du programme), sans en modifier quoi que ce soit :
var BoutonsNavigation = function ($) { var Today = function() { var m = ["janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre"]; var today = new Date(); var day = today.getDate(); var month = m[today.getMonth()]; var year = today.getYear(); if (year<2000) year = year + 1900; return (day + "_" + month + "_" + year); }; var _Div = document.createElement('div'); _Div.className = "noprint"; _Div.setAttribute("style", "position:fixed; display:block; width:20px; margin:0; padding:0; top:40%; right:4px; background-color:#FFF; z-index:3;"); var _Html = '<ul style="list-style:none; margin:0; padding:0;">';
Le moteur de Wikipédia affichera peut-être des messages d'erreurs ou d'avertissements. C'est normal parce que le code est, à ce moment-ci, incomplet. Lorsque vous aurez terminé de copier les fragments de code, les messages disparaîtront.
- 4. Choisissez les boutons. Ces fragments doivent être empilés tels quels, sinon le programme ne fonctionnera pas. Vous pouvez cependant les empiler dans n'importe quel ordre.
- 4.1. : aller tout en haut de la page
_Html += '' + ' <li style="border:1px solid #A7D7F9; margin-bottom:3px; background-color:#F6F6F6;">' + ' <a title="Haut de page" href="#">' + ' <img src="//up.wiki.x.io/wikipedia/commons/a/af/1uparrow.png" height=20 width=20 border=0 />' + ' </a>' + ' </li>';
- 4.2. : aller tout en bas de la page
_Html += '' + ' <li style="border:1px solid #A7D7F9; margin-bottom:3px; background-color:#F6F6F6;">' + ' <a title="Bas de page" href="#footer">' + ' <img src="//up.wiki.x.io/wikipedia/commons/7/7d/1downarrow.png" height=20 width=20 border=0 />' + ' </a>' + ' </li>';
- 4.3. lds : naviguer à votre liste de suivi
_Html += '' + ' <li style="border:1px solid #A7D7F9; margin-bottom:3px; background-color:#F6F6F6;">' + ' <a title="Liste de suivi" href="//fr.wiki.x.io/wiki/Spécial:Liste_de_suivi" >' + ' <span style="font-weight: bold; font-size:100%;">lds</span>' + ' </a>' + ' </li>';
- 4.4. : naviguer au Bistro du jour
_Html += '' + ' <li style="border:1px solid #A7D7F9; margin-bottom:3px; background-color:#F6F6F6;">' + ' <a title="Bistro du jour" href="//fr.wiki.x.io/wiki/Wikipédia:Le_Bistro/'+ Today()+'">' + ' <img src="//up.wiki.x.io/wikipedia/commons/3/3d/Icon_stat_bar.png" height=20 width=20 border=0 />' + ' </a>' + ' </li>';
- 4.5. : naviguer à l'Oracle
_Html += '' + ' <li style="border:1px solid #A7D7F9; margin-bottom:3px; background-color:#F6F6F6;">' + ' <a title="Oracle" href="//fr.wiki.x.io/wiki/Wikipédia:Oracle">' + ' <img src="//up.wiki.x.io/wikipedia/commons/9/98/Run.png" height=20 width=20 border=0 />' + ' </a>' + ' </li>';
- 5. Complétez en recopiant ce fragment de code (que j'appelle « conclusion » du programme) :
_Html += '</ul>'; _Div.innerHTML = _Html; document.body.insertBefore(_Div, document.body.firstChild); }; $(document).ready(BoutonsNavigation);
Je me répète : Les fragments de code doivent être empilés tels quels, sinon le programme ne fonctionnera pas.
- 5. Prévisualisez. Si les boutons apparaissent à la droite de votre écran, vous avez réussi . Si le programme ne fonctionne pas, vérifiez que vous avez respecté les consignes précédentes. Si ça ne fonctionne toujours pas, posez des questions.
- 6. Si le résultat vous plaît, sauvegardez.
Boutons supplémentaires
modifierVous pouvez empiler autant de boutons que vous le souhaitez. Inspirez-vous des fragments de code plus haut, mais l'« en-tête » et la « conclusion » doivent être présents. Pour faciliter le repérage des boutons, utilisez une image distinctive. Voici quatre exemples :
_Html += '' + ' <li style="border:1px solid #A7D7F9; margin-bottom:3px; background-color:#F6F6F6;">' + ' <a title="Bistro" href="//fr.wiki.x.io/wiki/Wikipédia:Le_Bistro">' + ' <img src="//up.wiki.x.io/wikipedia/commons/a/a5/Verre_cocktail.svg" height=20 width=20 border=0 />' + ' </a>' + ' </li>';
_Html += '' + ' <li style="border:1px solid #A7D7F9; margin-bottom:3px; background-color:#F6F6F6;">' + ' <a title="Bulletin des administrateurs" href="//fr.wiki.x.io/wiki/Wikipédia:Bulletin_des_administrateurs">' + ' <img src="//up.wiki.x.io/wikipedia/commons/a/a3/Nuvola_apps_klipper.png" height=20 width=20 border=0 />' + ' </a>' + ' </li>';
_Html += '' + ' <li style="border:1px solid #A7D7F9; margin-bottom:3px; background-color:#F6F6F6;">' + ' <a title="Rafraîchir" href="javascript:window.location.reload()" >' + ' <img src="//up.wiki.x.io/wikipedia/commons/b/bb/Farm-Fresh_arrow_refresh_small.png" height=20 width=20 border=0 />' + ' </a>' + ' </li>';
_Html += '' + ' <li style="border:1px solid #A7D7F9; margin-bottom:3px; background-color:#F6F6F6;">' + ' <a title="Bistro Commons" href="//commons.wikimedia.org/wiki/Commons:Bistro" >' + ' <img src="//up.wiki.x.io/wikipedia/commons/3/3d/Icon_stat_bar.png" height=20 width=20 border=0 />' + ' </a>' + ' </li>';
Divers
modifierLes boutons sont empilés à la droite de la page. La taille de chacun est fixée à 20 pixels. Il y a d'autres paramètres qui influencent la disposition des boutons. Vous pouvez modifier chacun de ces paramètres, mais selon mon expérience avec un ordinateur de table et un portable, ils sont ergonomiquement situés et ont une taille qui plaît à l'oeil.
Compatibilité
modifier- Habillages
- Bleu de Cologne, Moderne, Monobook et Vector
- Navigateurs
- IE6, IE8
- Google Chrome 33, Internet Explorer 11, Mozilla Firefox (18 à 33), Opera 20 et Safari 5.1
Voir aussi
modifier- Script
GoTop.js
, un produit plus complet du contributeur Lepsyleon, plus facile à mettre en oeuvre mais qui est plus difficile à personnaliser - Boutons de navigation (bis), un autre ensemble de boutons, que vous pouvez utiliser dans n'importe quel wiki de l'écosystème