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.

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