+ Rispondi alla Discussione
Risultati da 1 a 8 di 8

jquery - menu accordion fisarmonica con memoria al refresh

Ultimo Messaggio di Anu il:
  1. #1
    Anu è offline
    User L'avatar di Anu
    Data Registrazione
    Nov 2012
    Località
    Padova
    Messaggi
    93

    jquery - menu accordion fisarmonica con memoria al refresh

    Salve a tutti!
    Volevo sapere come riuscire ad avere un jquery accordion con la memoria, ovvero che al momento del refresh mi mantega il tab selezionato aperto...
    Prendiamo ad esempio il base di jquery ui.. :

    Codice:
    <head>
    [..]
            <script src="js/jquery-1.8.3.js"></script>
        <script src="js/jquery-ui-1.9.2.custom.js"></script>
        <script type="text/javascript" src="js/script.js"></script>
        <script>
        $(function() {
            $( ".accordion" ).accordion();
        });
        </script>
    </head>
    
    <body>
    <div class="accordion">
        <h4>calzature di sicurezza</h4>
        <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
        <h4>performance</h4>
        <div>Phasellus mattis tincidunt nibh.</div>
        <h4>industria farmaceutica</h4>
        <div>Nam dui erat, auctor a, dignissim quis.</div>
    </div>
    </body>
    grazie mille

  2. #2
    Esperta L'avatar di Jantima
    Data Registrazione
    Mar 2005
    Località
    Silicon Valley
    Messaggi
    639
    Ciao Anu,

    Lo puoi fare con due semplici modifiche:

    1. Aggiungendo un plugin per jQuery che si chiama cookies.js
    (Lo devi includere dopo aver incluso jQuery.)
    2. Aggiungendo una funzione in JavaScript che mantiene le informazioni relative a quale tab è attivo tramite cookie.
    Codice:
    <script>
    	jQuery(document).ready(function(){
            $( "#accordion" ).accordion({
            change: function(event, ui) {
                //set cookie for current index on change event
                $.cookie('saved_index', null);
                $.cookie('saved_index', $( "#accordion" )
                        .accordion( "option", "active" ));
            },
            active:parseInt($.cookie('saved_index'))
        	});
         });
        </script>
    Puoi vedere un esempio completo e il codice sorgente a questa pagina.

    Nota 1. rispetto al tuo codice HTML ho cambiato il tag del div accordion da class="accordion" a id="accordion"
    Ti consiglio di usare id, ma se vuoi usare class, allora devi anche cambiare il codice JavaScript nella seconda riga da "#accordion" a ".accordion"

    Nota 2. ho anche usato un foglio di stile fatto apposta per il jquery.ui, non è necessario che lo usi per quanto riguarda la funzionalità.

    Ciao, spero di essere stata d'aiuto.
    Ultima modifica di Jantima; 20-12-12 alle 09:42

  3. #3
    Anu
    Anu è offline
    User L'avatar di Anu
    Data Registrazione
    Nov 2012
    Località
    Padova
    Messaggi
    93
    Ciao!
    sei stato gentilissimo!
    Un'altra cosa.. nel mio accordion, ho aggiunto il tag <a> sulla h4(la testata dell'accordion), vorrei che al click, mi attivasse il link, come posso fare?
    Grazie.

  4. #4
    Esperta L'avatar di Jantima
    Data Registrazione
    Mar 2005
    Località
    Silicon Valley
    Messaggi
    639
    Ciao, potresti essere piu chiaro su quello che cerchi di fare. Ho provato a mettere un anchor e href link all interno del h4, e funziona, solo che manda al link invece di aprire l'accordion. Non vedo l'utilità. Potresti far vedere un esempio del codice che hai provato, e anche spiegare cosa vorresti che accada.

  5. #5
    Anu
    Anu è offline
    User L'avatar di Anu
    Data Registrazione
    Nov 2012
    Località
    Padova
    Messaggi
    93
    certamente


    HTML
    Codice:
    <div id="prova">
                    <h4 class="accordion" id="body-section1"><a href="accordion.html" target="_blank">Add the Javascript</a></h4>
                    <div class="container">
                        <div class="content">
                            <ul>
                                <li><a href="#">ssClose when closed</a></li>
                                <li><a href="#">ssClose when closed</a></li>
                                <li><a href="#">ssClose when closed</a></li>
                                <li><a href="#">ssClose when closed</a></li>
                            </ul>
                        </div>
                    </div>
    
    
                    <h4 class="accordion" id="body-section2"><a href="#">Add the Javascript</a></h4>
                    <div class="container">
                        <div class="content">
                            <ul>
                                <li><a href="#">ssClose when closed</a></li>
                                <li><a href="#">ssClose when closed</a></li>
                                <li><a href="#">ssClose when closed</a></li>
                                <li><a href="#">ssClose when closed</a></li>
                            </ul>
                        </div>
                    </div>
    </div>
    Script

    Codice:
    <script type="text/javascript" src="javascript/jquery.cookie.min.js"></script>
    <script type="text/javascript" src="javascript/jquery.accordion.js"></script>
    <script type="text/javascript" src="javascript/highlight.pack.js"></script>
    <script type="text/javascript">
                $(document).ready(function() {
    
    
                    //syntax highlighter
                    hljs.tabReplace = '    ';
                    hljs.initHighlightingOnLoad();
    
    
                    //accordion
                    $('h4.accordion').accordion({
                        defaultOpen: 'section1',
                        cookieName: 'accordion_nav',
                        speed: 'slow',
                        animateOpen: function (elem, opts) { //replace the standard slideUp with custom function
                            elem.next().slideFadeToggle(opts.speed);
                        },
                        animateClose: function (elem, opts) { //replace the standard slideDown with custom function
                            elem.next().slideFadeToggle(opts.speed);
                        }
                    });
        
    
    
                    //custom animation for open/close
                    $.fn.slideFadeToggle = function(speed, easing, callback) {
                        return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
                    };
    
    
                });
            </script>
    Ho optato per questa soluzione per avere l'accordion con i cookie.
    Vorrei che cliccando sull'h4, si aprisse l'accordion (come da norma) e che mi aprisse il link su un'altra pagina (target:_blank), tutto cui

  6. #6
    Anu
    Anu è offline
    User L'avatar di Anu
    Data Registrazione
    Nov 2012
    Località
    Padova
    Messaggi
    93
    Provando ad usare la funzione che mi hai dato non mi pare comunque la <a>:

    Codice:
    <div id="accordion">
        <h4><a href="ciao.html" target="_blank">cat1</a></h4>
        <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
        <h4>cat2</h4>
        <div>Phasellus mattis tincidunt nibh.</div>
        <h4>cat3</h4>
        <div>Nam dui erat, auctor a, dignissim quis.</div>
    </div>
    Codice:
    <script src="......code.jquery.com/jquery-1.8.3.js"></script>
        <script src="......code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
        <script src="js/jquery.cookie.js" type="text/javascript"></script>
    
    
        <script>
        jQuery(document).ready(function(){
            $( "#accordion" ).accordion({
            change: function(event, ui) {
                //set cookie for current index on change event
                $.cookie('saved_index', null);
                $.cookie('saved_index', $( "#accordion" )
                        .accordion( "option", "active" ));
            },
            active:parseInt($.cookie('saved_index'))
            });
         });
        </script>
    a me basta che si avvi il link in un'altra pagina e l'apertura nella pagina attuale dell'accordion

  7. #7
    Esperta L'avatar di Jantima
    Data Registrazione
    Mar 2005
    Località
    Silicon Valley
    Messaggi
    639
    Ciao, ho fatto una prova ed in effetti aggiungendo un anchor all interno del h4, l'accordion smette di funzonare e il link nemmeno funziona. Il problema nasce dal fatto che il funzionamento dell accordion aggiunge un tag <span> all interno del <h4> e attorno al testo. (lo puoi vedere se utilizzi firebug oppure il 'inspect element' su firefox o su chrome)
    Mettendo un <a> questo funzionamento non accade, e il tag span risulta vuoto, per questo motivo poi l'accordion non funziona.

    Ho fatto un paio di prove e una delle soluzioni potrebbe essere usare appunto JavaScript per far aprire la pagina:
    Codice:
     <h4 onclick="window.open('http://www.alice.bo.it', 'newWindow');">calzature di sicurezza</h4>
    Ho modificato il mio esempio originale aggiungendo questo funzionamento sul primo link.

  8. #8
    Anu
    Anu è offline
    User L'avatar di Anu
    Data Registrazione
    Nov 2012
    Località
    Padova
    Messaggi
    93
    Benissimo, funziona tutto alla perfezione
    Per chi volesse invece aprire la nuova pagina nella stessa finestra consiglio di utilizzare questo:

    Codice:
    <h4 onclick="window.location.href='link';">Categoria</h4>
    Grazie infinite a Jantima

+ Rispondi alla Discussione

^ Permessi di Scrittura

  • Tu non puoi inviare nuove discussioni
  • Tu non puoi inviare risposte
  • Tu non puoi inviare allegati
  • Tu non puoi modificare i tuoi messaggi
  •  
  • Il codice BB è Attivato
  • Le faccine sono Attivato
  • Il codice [IMG] è Attivato
  • Il codice [VIDEO] è Attivato
  • Il codice HTML è Disattivato
  • Trackbacks Attivato
  • Pingback Attivato
  • Refback Attivato

SEO by vBSEO 3.6.0 PL2 ©2011, Crawlability, Inc.