[Javascript] Voce del menu evidenziata in base alla pagina attiva

Discussione in 'Javascript' iniziata da PavlovTheDog, 23 Aprile 2018.

  1. macus_adi

    macus_adi Utente Attivo

    Registrato:
    5 Dicembre 2017
    Messaggi:
    881
    Mi Piace Ricevuti:
    48
    Punteggio:
    28
    Sesso:
    Maschio
    Occupazione:
    Developer
    Località:
    L'Aquila
    Non è del tutto vero.... In basso è riportato esattamente questo caso, anche se duplichi codice a go go su più pagine lo script continua a funzionare, naturalmente deve essere incluso su più pagine.

    Mantenendo la logica usata fin d'ora, potresti aggiungere un piccolo script:
    Codice:
    $(document).ready(function(){
        $('.item').removeClass('attiva');
        var url = window.location.href.split('/').pop();
        var links=$('.nav_item');
        _.each(links,function(v,k){
            var current=$(v).attr('href');
            if(url===current){
                $(v).parent().addClass('attiva');
            }
        });
    });
    Il tuo html dovrebbe diventare una cosa del genere, aggiungi la classe nav_item al tag a
    HTML:
    <ul>
        <li class="attiva item"><a href="home.php" class="nav_item" data-name="home" target="_self">Home</a></li>
        <li class="item"><a href="pag1.html" class="nav_item" data-name="pag1" target="_self">pag1</a></li>
        <li class="item"><a href="pag2.html" class="nav_item" data-name="pag2" target="_self">pag2</a></li>
        <li class="item"><a href="pag3.html" class="nav_item" data-name="pag3" target="_self">pag3</a></li>
    </ul>
    
    Lascia stare i data-name ho fatto una prova non inerente a questo contesto, e includi la Lib Underscore in tutte le pagine:
    Codice:
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.0/underscore-min.js"></script>
    Con queste linee di "codice" anche se ricarichi la/e pagina e/o aggiungi pagine a go go, non hai bisogno di scrivere / aggiungere nulla sullo script, in quanto attraverso l'each verifica tutti gli elementi del menu.

    Risultato funzionante!
     
  2. PavlovTheDog

    PavlovTheDog Nuovo Utente

    Registrato:
    14 Aprile 2018
    Messaggi:
    24
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    Buongiorno Macus.
    Ho provato a cambiare lo script in questo modo, visto che tutti i "li" hanno già la classe "page" e ho sostituito "attiva" con "selected", che è il mio CSS per la pagina attiva:

    Codice:
     $(document).ready(function(){
        $('.page').removeClass('selected');
        var url = window.location.href.split('/').pop();
        var links=$('.nav_item');
        _.each(links,function(v,k){
            var current=$(v).attr('href');
            if(url===current){
                $(v).parent().addClass('selected');
            }
        });
    });   
    Pare non funzionare nel mio caso, ma a questo punto, scusandomi per la mia scarsa conoscenza sull'argomento, ho dei dubbi:
    1) in che posizione dell'html devo inserire
    Codice:
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.0/underscore-min.js"></script>
    , va bene anche subito prima della funzione js in questione?

    2) qual è il tag corretto per includere la funzione?
    3) se ho un'altra funzione js nella pagina, le inserisco nello stesso tag "<script></script>", semplicemente separandole con ";"? O devo mettere tag separati? (ho già provato in entrambi i modi).
     
  3. macus_adi

    macus_adi Utente Attivo

    Registrato:
    5 Dicembre 2017
    Messaggi:
    881
    Mi Piace Ricevuti:
    48
    Punteggio:
    28
    Sesso:
    Maschio
    Occupazione:
    Developer
    Località:
    L'Aquila
    Vedi l'esempio!
     

    Files Allegati:

  4. Max 1

    Max 1 Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    29 Febbraio 2012
    Messaggi:
    3.765
    Mi Piace Ricevuti:
    283
    Punteggio:
    83
    Sesso:
    Maschio
    Non posso credere che si debba cercare un improbabile modo in JS e non poter usare il css e basta
     
  5. macus_adi

    macus_adi Utente Attivo

    Registrato:
    5 Dicembre 2017
    Messaggi:
    881
    Mi Piace Ricevuti:
    48
    Punteggio:
    28
    Sesso:
    Maschio
    Occupazione:
    Developer
    Località:
    L'Aquila
    @Max 1 hai ragione, sarebbe stato meglio avere il menu a modi widget, con classe adatta al caso, ma mi pare di aver capito che di classi / funzioni / mvc / ogetti non si parla, quindi non credo sia la strada giusta da perseguire in caso di mancata conoscenza degli strumenti...
    Sarebbe utile, magari qui tutti ne parlano ma pochi lo fanno, utilizzare il modello MVC, demandando al controller l'onere di effettuare le opportune verifiche sul menù.
    In un caso drastico, avendo replicato il menu a manina su 100 pagine, come ti comporteresti, scrivendo la logica su tutti i file?
    Indubbiamente concordo con te, quindi sarebbe da scrivere ex-novo parametrizzando il tutto nel giusto modo...
     
  6. PavlovTheDog

    PavlovTheDog Nuovo Utente

    Registrato:
    14 Aprile 2018
    Messaggi:
    24
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    Beh, di fatto nell'editor di aruba già c'è un widget che fa da menu di navigazione (widget.extendednavigation) e in effetti l'html che ho utilizzato è esattamente quello estrapolato, per mezzo della console, dal widget base, perché mi serviva il menu sia in italiano che in inglese, e l'editor non consente di inserirne due, o per lo meno io non so come si possa fare e aruba non da assistenza sviluppo, mentre basekit (proprietario dell'editor), non la fornisce ai clienti aruba o_O.
    Purtroppo, il mio html, pur avendo id e classi del tutto simili a quelle del widget.extendednavigation, non assorbe tutte le funzioni js di quel widget (contenute in un file js lunghissimo, di cui non conosco la esatta collocazione, e per me molto complesso), in particolare per la parte responsive e per mettere in evidenza la voce attiva.
    Ieri, vedendo che non arrivavamo a una soluzione, ho risolto coi CSS, ma per fare questo ho dovuto creare ben 10 file.twig aggiuntivi per le singole pagine, oltre a quelli della home in italiano e della home in inglese, quindi 12 in totale. Originariamente ne avevo solo 4 (home e default, italiano e inglese) e speravo, con js di potere appunto ridurre la cosa.
     
    Ultima modifica: 24 Aprile 2018
  7. PavlovTheDog

    PavlovTheDog Nuovo Utente

    Registrato:
    14 Aprile 2018
    Messaggi:
    24
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    Macus, penso di aver seguito bene il tuo esempio, ma non va. Preciso che nel mio caso il menu è nell'head e non nel body.
     
  8. PavlovTheDog

    PavlovTheDog Nuovo Utente

    Registrato:
    14 Aprile 2018
    Messaggi:
    24
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
  9. macus_adi

    macus_adi Utente Attivo

    Registrato:
    5 Dicembre 2017
    Messaggi:
    881
    Mi Piace Ricevuti:
    48
    Punteggio:
    28
    Sesso:
    Maschio
    Occupazione:
    Developer
    Località:
    L'Aquila
    ?????? qualcosa non va....!
     
Sto caricando...

Condividi questa Pagina