Modif menu javascript

Sujet publié le 03/04/2012 par django et classé dans javascript site web

Bonjour.

Dans un vieux site Joomla 1.0.12, j'ai un menu géré en javascript, sur le template ultimateblog

Le problème : Que faut-il ajouter au code javascript pour que quand on clique un lien de l'un des 3 sous-menus (modules1, 2 et 3), on reste sur le module dans lequel on se trouvait. Actuellement, on retourne systématique sur le module 1.

Code javascript de l'index.php du template :

<script type="text/javascript">

function showHideSpan(elId, showhide){
    var el;
    if (document.getElementById) {el=document.getElementById(elId)}
    if (document.all) {el=eval("document.all." + elId)}
    if (el == undefined) return;
    if (showhide==1) {el.style.display='block'}
    else {el.style.display='none'}
    }

    function ChangeImgSrc(elId, newsrc){
        var el;
        if (document.getElementById) {el=document.getElementById(elId)}
        if (document.all) {el=eval("document.all." + elId)}
        if (el == undefined) return;
        el.src = "<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/images/" + newsrc;
    }


    function OnMod1Chng(){
        showHideSpan('mod1_content', 1);
        showHideSpan('mod2_content', 0);
        showHideSpan('mod3_content', 0);

        ChangeImgSrc('mod1_btn', 'mod1_active.png');
        ChangeImgSrc('mod2_btn', 'mod2.png');
        ChangeImgSrc('mod3_btn', 'mod3.png');
    }

    function OnMod2Chng(){
        showHideSpan('mod1_content', 0);
        showHideSpan('mod2_content', 1);
        showHideSpan('mod3_content', 0);

        ChangeImgSrc('mod1_btn', 'mod1.png');
        ChangeImgSrc('mod2_btn', 'mod2_active.png');
        ChangeImgSrc('mod3_btn', 'mod3.png');
    }

    function OnMod3Chng(){
        showHideSpan('mod1_content', 0);
        showHideSpan('mod2_content', 0);
        showHideSpan('mod3_content', 1);

        ChangeImgSrc('mod1_btn', 'mod1.png');
        ChangeImgSrc('mod2_btn', 'mod2.png');
        ChangeImgSrc('mod3_btn', 'mod3_active.png');
    }

</script>

par django, 03/04/2012 à 18h24

répondre

Désolé, je n'arrive pas à afficher le javascript correctement sur ce forum. (et encore moins à le modifier dans mon site)

par django, 03/04/2012 à 18h31

Salut,

J'ai corrigé l'affichage du message.

En cliquant sur un sous-menu, tu changes de page et donc tout le script se rejoue. Pour faire ce que tu souhaites, il faudrait donc sauvegarder le module activé entre deux pages. Pour cela, tu peux passer par un paramètre dans l'url ou utiliser un cookie par exemple.

Avec le cookie, cela donnerait un code ressemblant celui-ci :

<script type="text/javascript">

function showHideSpan(elId, showhide){
    var el;
    if (document.getElementById) {el=document.getElementById(elId)}
    if (document.all) {el=eval("document.all." + elId)}
    if (el == undefined) return;
    if (showhide==1) {el.style.display='block'}
    else {el.style.display='none'}
}

function ChangeImgSrc(elId, newsrc){
    var el;
    if (document.getElementById) {el=document.getElementById(elId)}
    if (document.all) {el=eval("document.all." + elId)}
    if (el == undefined) return;
    el.src = "<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/images/" + newsrc;
}

function OnMod1Chng(){
    showHideSpan('mod1_content', 1);
    showHideSpan('mod2_content', 0);
    showHideSpan('mod3_content', 0);

    ChangeImgSrc('mod1_btn', 'mod1_active.png');
    ChangeImgSrc('mod2_btn', 'mod2.png');
    ChangeImgSrc('mod3_btn', 'mod3.png');

    createCookie('module_actif', 'OnMod1Chng');
}

function OnMod2Chng(){
    showHideSpan('mod1_content', 0);
    showHideSpan('mod2_content', 1);
    showHideSpan('mod3_content', 0);

    ChangeImgSrc('mod1_btn', 'mod1.png');
    ChangeImgSrc('mod2_btn', 'mod2_active.png');
    ChangeImgSrc('mod3_btn', 'mod3.png');

    createCookie('module_actif', 'OnMod2Chng');
}

function OnMod3Chng(){
    showHideSpan('mod1_content', 0);
    showHideSpan('mod2_content', 0);
    showHideSpan('mod3_content', 1);

    ChangeImgSrc('mod1_btn', 'mod1.png');
    ChangeImgSrc('mod2_btn', 'mod2.png');
    ChangeImgSrc('mod3_btn', 'mod3_active.png');

    createCookie('module_actif', 'OnMod3Chng');
}

window.onload = function () {
    var moduleActif = readCookie('module_actif');
    if (moduleActif != null) {
        switch (moduleActif) {
            case 'OnMod1Chng': OnMod1Chng(); break;
            case 'OnMod2Chng': OnMod2Chng(); break;
            case 'OnMod3Chng': OnMod3Chng(); break;
        }
        eraseCookie('module_actif'); 
    }
}

</script>

Les fonctions javascript createCookie, readCookie et eraseCookie sont disponibles sur http://ppk.developpez.com/tutoriels/javascript/gestion-cookies-javascript/.

Note, je n'ai pas testé le code, il faudra très certainement y faire des ajustements.

Bon courage

par jules [modérateur], 03/04/2012 à 20h11
Tester un programme peut démontrer la présence de bugs, jamais leur absence.

répondre