Utilisateur:Cantons-de-l'Est/Boutons de navigation

Une page de Wikipédia, l'encyclopédie libre.
Sauter à la navigation Sauter à la recherche

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 :

1uparrow.png (aller tout en haut de la page)

1downarrow.png (aller tout en bas de la page)

lds (naviguer à votre liste de suivi)

Icon stat bar.png (naviguer au Bistro du jour)

Création[modifier | modifier le code]

Pour 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. 1uparrow.png : 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="//upload.wikimedia.org/wikipedia/commons/a/af/1uparrow.png" height=20 width=20 border=0 />'
  + '    </a>'
  + '  </li>';
4.2. 1downarrow.png : 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="//upload.wikimedia.org/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.wikipedia.org/wiki/Spécial:Liste_de_suivi" >'
  + '      <span style="font-weight: bold; font-size:100%;">lds</span>'
  + '    </a>'
  + '  </li>';
4.4. Icon stat bar.png : 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.wikipedia.org/wiki/Wikipédia:Le_Bistro/'+ Today()+'">'
  + '    <img src="//upload.wikimedia.org/wikipedia/commons/3/3d/Icon_stat_bar.png" height=20 width=20 border=0 />'
  + '  </a>'
  + '  </li>';
4.5. Run.png : naviguer à l'Oracle
_Html += ''
  + '  <li style="border:1px solid #A7D7F9; margin-bottom:3px; background-color:#F6F6F6;">'
  + '    <a title="Oracle" href="//fr.wikipedia.org/wiki/Wikipédia:Oracle">'
  + '      <img src="//upload.wikimedia.org/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 Sourire. 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[modifier | modifier le code]

Vous 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 :

  • Verre cocktail.svg : naviguer au Bistro (les dernières pages en une seule)
_Html += ''
  + '  <li style="border:1px solid #A7D7F9; margin-bottom:3px; background-color:#F6F6F6;">'
  + '    <a title="Bistro" href="//fr.wikipedia.org/wiki/Wikipédia:Le_Bistro">'
  + '      <img src="//upload.wikimedia.org/wikipedia/commons/a/a5/Verre_cocktail.svg" height=20 width=20 border=0 />'
  + '    </a>'
  + '  </li>';
  • Nuvola apps klipper.png Bulletin des administrateurs :
_Html += ''
  + '  <li style="border:1px solid #A7D7F9; margin-bottom:3px; background-color:#F6F6F6;">'
  + '    <a title="Bulletin des administrateurs" href="//fr.wikipedia.org/wiki/Wikipédia:Bulletin_des_administrateurs">'
  + '      <img src="//upload.wikimedia.org/wikipedia/commons/a/a3/Nuvola_apps_klipper.png" height=20 width=20 border=0 />'
  + '    </a>'
  + '  </li>';
  • Farm-Fresh arrow refresh small.png Rafraîchir la page :
_Html += ''
  + '  <li style="border:1px solid #A7D7F9; margin-bottom:3px; background-color:#F6F6F6;">'
  + '    <a title="Rafraîchir" href="javascript:window.location.reload()" >'
  + '      <img src="//upload.wikimedia.org/wikipedia/commons/b/bb/Farm-Fresh_arrow_refresh_small.png" height=20 width=20 border=0 />'
  + '    </a>'
  + '  </li>';
  • Icon stat bar.png Bistro de Wikimedia Commons :
_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="//upload.wikimedia.org/wikipedia/commons/3/3d/Icon_stat_bar.png" height=20 width=20 border=0 />'
  + '    </a>'
  + '  </li>';

Divers[modifier | modifier le code]

Les 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 | modifier le code]

Habillages
  • Fait Bleu de Cologne, Moderne, Monobook et Vector
Navigateurs

Voir aussi[modifier | modifier le code]

  • 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