Boîte déroulante
De Wicri Outils
Pour installer une boîte déroulante sur un wiki, il faut modifier les pages MediaWiki:Monobook.css et MediaWiki:Monobook.js et activer les javascripts personnalisés.
Sommaire
Ajouter ce contenu à la page MediaWiki:Monobook.css
div.BoxenVerschmelzen, div.NavFrame { margin:0px; padding:2px; border:1px solid #AAAAAA; text-align:center; border-collapse:collapse; font-size:95%; } div.BoxenVerschmelzen div.NavFrame { border-style:none; border-style:hidden; } div.NavFrame + div.NavFrame { border-top-style:none; border-top-style:hidden; } div.NavPic { background-color:#FFFFFF; margin:0px; padding:2px; float:left; } div.NavFrame div.NavHead { height:1.6em; font-weight:bold; font-size:100%; background-color:#EFEFEF; } div.NavFrame p { font-size:100%; } div.NavFrame div.NavContent { font-size:100%; } div.NavFrame div.NavContent p { font-size:100%; } div.NavEnd { margin:0px; padding:0px; line-height:1px; clear:both; } /* Standard Navigationsleisten */ div.BoxenVerschmelzen, div.NavFrame { margin: 0px; padding: 2px; border: 1px solid #aaaaaa; text-align: center; border-collapse: collapse; font-size: 95%; } div.BoxenVerschmelzen div.NavFrame { border-style: none; border-style: hidden; } div.NavFrame + div.NavFrame { border-top-style: none; border-top-style: hidden; } div.NavPic { background-color: #ffffff; margin: 0px; padding: 2px; float: left; } div.NavFrame div.NavHead { height: 1.6em; font-weight: bold; font-size: 100%; background-color: #efefef; } div.NavFrame p { font-size: 100%; } div.NavFrame div.NavContent { font-size: 100%; } div.NavFrame div.NavContent p { font-size: 100%; } div.NavEnd { margin: 0px; padding: 0px; line-height: 1px; clear: both; } .NavToggle { font-size: x-small; float:right; }
Activer les javascript personnalisés
Ajouter l'option $wgAllowUserJs = true; au fichier LocalSettings.php pour activer le javascript
Ajouter ce contenu à la page MediaWiki:Monobook.js
/* <nowiki> */ // BEGIN Dynamic Navigation Bars // set up the words in your language var NavigationBarHide = 'Enrouler'; var NavigationBarShow = 'Dérouler'; // set up max count of Navigation Bars on page, // if there are more, all will be hidden // NavigationBarShowDefault = 0; // all bars will be hidden // NavigationBarShowDefault = 1; // on pages with more than 1 bar all bars will be hidden var NavigationBarShowDefault = 0; // shows and hides content and picture (if available) of navigation bars // Parameters: // indexNavigationBar: the index of navigation bar to be toggled function toggleNavigationBar(indexNavigationBar) { var NavToggle = document.getElementById("NavToggle" + indexNavigationBar); var NavFrame = document.getElementById("NavFrame" + indexNavigationBar); if (!NavFrame || !NavToggle) { return false; } // if shown now if (NavToggle.firstChild.data == NavigationBarHide) { for ( var NavChild = NavFrame.firstChild; NavChild != null; NavChild = NavChild.nextSibling ) { if (NavChild.className == 'NavPic') { NavChild.style.display = 'none'; } if (NavChild.className == 'NavContent') { NavChild.style.display = 'none'; } if (NavChild.className == 'NavToggle') { NavChild.firstChild.data = NavigationBarShow; } } // if hidden now } else if (NavToggle.firstChild.data == NavigationBarShow) { for ( var NavChild = NavFrame.firstChild; NavChild != null; NavChild = NavChild.nextSibling ) { if (NavChild.className == 'NavPic') { NavChild.style.display = 'block'; } if (NavChild.className == 'NavContent') { NavChild.style.display = 'block'; } if (NavChild.className == 'NavToggle') { NavChild.firstChild.data = NavigationBarHide; } } } } // adds show/hide-button to navigation bars function createNavigationBarToggleButton() { var indexNavigationBar = 0; // iterate over all <div>-elements for( var i=0; NavFrame = document.getElementsByTagName("div")[i]; i++ ) { // if found a navigation bar if (NavFrame.className == "NavFrame") { indexNavigationBar++; var NavToggle = document.createElement("a"); NavToggle.className = 'NavToggle'; NavToggle.setAttribute('id', 'NavToggle' + indexNavigationBar); NavToggle.setAttribute('href', 'javascript:toggleNavigationBar(' + indexNavigationBar + ');'); var NavToggleText = document.createTextNode(NavigationBarHide); NavToggle.appendChild(NavToggleText); // add NavToggle-Button as first div-element // in <div class="NavFrame"> NavFrame.insertBefore( NavToggle, NavFrame.firstChild ); NavFrame.setAttribute('id', 'NavFrame' + indexNavigationBar); } } // if more Navigation Bars found than Default: hide all if (NavigationBarShowDefault < indexNavigationBar) { for( var i=1; i<=indexNavigationBar; i++ ) { toggleNavigationBar(i); } } } aOnloadFunctions[aOnloadFunctions.length] = createNavigationBarToggleButton; // END Dynamic Navigation Bars // ============================================================ /* </nowiki> */
Source
Cette aide est tirée de la page Personnalisation Boîte déroulante de Wikimédia