+ Rispondi alla Discussione
Risultati da 1 a 5 di 5

Ajax: menù a comparsa

Ultimo Messaggio di D-royal il:
  1. #1
    L'avatar di Giorgiotave
    Data Registrazione
    Oct 2004
    Località
    Monasterace
    Messaggi
    43,021
    Visita il canale Youtube di Giorgiotave

    Ajax: menù a comparsa

    Salve ragazzi,

    sarebbe bello riuscire a realizzare un piccolo tutorial qui nel Forum GT e metterlo a disposizione degli utenti, per mostrare
    come realizzare un menù a comparsa.

    Cioè, pensiamo di avere ad esempio:

    Calabria | Lazio | Piemonte

    Ecco, quando si clicca su Calabria viene mostrato il link Reggio, Catanzaro e Vibo, quando si clicca su Piemonte viene
    mostrato Alessandria, Torino, Novi Ligure.

    Giorgio
    Cosa bisognerà fare nel 2020? Stiamo affrontanto i vari temi
    Google 2020 | SEO 2020 | E-commerce 2020 | Social 2020 | YouTube 2020

  2. #2
    Esperto L'avatar di Gorka
    Data Registrazione
    Apr 2006
    Località
    Ragusa
    Messaggi
    1,681
    Io ci ho provato , vi posto i codici.

    Inizia il file HTML in maniera tradizionale:
    Codice:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Menu a comparsa utilizzando tecniche AJAX</title>
    Inizializzo le funzioni in javascript che mi permettono di utilizzare AJAX
    Codice:
    <script type="text/javascript">
    
    // inizializzo le funzioni basilari di AJAX
    
    var myRequest = null;
    
    function CreateXmlHttpReq(handler) {
      var xmlhttp = null;
      try {
        xmlhttp = new XMLHttpRequest();
      } catch(e) {
        try {
            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch(e) {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
      }
      xmlhttp.onreadystatechange = handler;
      return xmlhttp;
    }
    
    function myHandler() {
        if (myRequest.readyState == 4 && myRequest.status == 200) {
            e = document.getElementById("provincia");
            e.innerHTML = myRequest.responseText;
        }
    }
    Definisco la funzione che interrogherà il database (un semplice file php che descriverò più avanti) delle regioni e province:
    Codice:
    function provincia(regione){
         var e = document.getElementById("provincia");
        myRequest = CreateXmlHttpReq(myHandler);
        myRequest.open("GET","provincia.php?regione="+escape(regione));
        myRequest.send(null);
        
    }
    </script>
    Completo l'HEAD con degli stili rudimentali, tanto per dare visibilità agli script
    Codice:
    <style type="text/css">
        #regioni { border-style: solid;
                    border-width: 1px;
                    border-color: red;
                    width: 200px;
                    float: left;
                    line-height: 50px;
                    
                    }
        #provincia { border-style: solid;
                    border-width: 1px;
                    border-color: green;
                    width: 200px;
                    float: left;
                    margin-left: 250px;
                    }
                
    </style>
    </head>
    Arriviamo al BODY, dove ai nomi delle regioni ho applicato all'evento "onmouseover" la funzione "provincia", passando come parametro il nome della regione.

    Codice:
    <body>
    
        <div id="regioni">
            <span onmouseover="provincia('sicilia')" >Sicilia</span><br/>
            <span onmouseover="provincia('calabria')" >Calabria</span><br/>
            <span onmouseover="provincia('lazio')" >Lazio</span>
            
        </div>
        
        <div id="provincia">
            Seleziona una regione
        </div>
    
    </body>
    </html>
    Arriviamo quindi al file php (provincia.php) che è composto da un semplice switch che controlla la variabile "regione" passata con il metodo GET dall'AJAX:

    Codice:
    <?php
        $regione = $_GET[regione];
            switch ($regione) {
            case sicilia:
            echo ("Agrigento<br>Caltanissetta<br>Catania<br>Enna<br>Messina<br>Palermo<br>Ragusa<br>Siracusa<br>Trapani<br>");
            break;
            case calabria:
            echo "Catanzaro<br>Cosenza<br>Crotone<br>Reggio Calabria<br>Vibo Valentia";
            break;
            case lazio:
            echo "Frosinone<br>Latina<br>Rieti<br>Roma<br>Viterbo";
            break;
            case vuota:
            echo "Seleziona una regione";
            break;
            
                }
            
    ?>
    Potete provare lo script a questo indirizzo sostando con il cursore del mouse sopra il nome di una regione.

    Per dubbi, suggerimenti e critiche sono a disposizione

  3. #3
    Esperto L'avatar di FuSioNmAn
    Data Registrazione
    Jan 2007
    Località
    Salerno
    Messaggi
    495
    Gorka...il tuo è gia perfettamente funzionante. Bisogna solo impaginarlo ed aggiungere qualche piccolezza (tipo l'onmouseout temporizzato per la scomparsa) e testarlo un po.
    Bel lavoro.

  4. #4
    User
    Data Registrazione
    Mar 2006
    Località
    Livorno
    Messaggi
    43
    Bravo davvero
    Guide e manuali per linux http://www.betacrew.org

  5. #5
    User
    Data Registrazione
    May 2007
    Messaggi
    208
    Io invece propongo il seguente menù a comparsa (Javascript) :

    <style>
    A.cassetto:hover {color: blue}
    DIV.cassetto {font-family: verdana; font-size:11pt; font-weight:bold}
    </style>

    <SCRIPT LANGUAGE="JavaScript">

    ie=document.all ? 1 : 0
    n=document.layers ? 1 : 0
    // Setta in pixel la parte visibile del cassetto
    lshow=18
    // Di quanti pixel vuoi che si sposti il cassetto ad ogni passo?
    var move=10;
    // Setta la velocità
    menuSpeed=40
    // Vuoi che il cassetto si sposti insieme allo scroll della pagina?
    var moveOnScroll=true
    // Adesso non cambiare più niente
    var tim;

    function makeMenu(obj,nest)
    {
    nest=(!nest) ? '' : 'document.' + nest + '.'
    this.css=(n) ? eval(nest+'document.'+obj) : eval(obj+'.style')
    this.state=1
    this.go=0
    this.height=n ? this.css.document.height : eval(obj+'.offsetHeight')
    this.top=b_gettop
    this.obj = obj + "Object";
    eval(this.obj + "=this")
    }

    function b_gettop()
    {
    var gleft=(n) ? eval(this.css.top) : eval(this.css.pixelTop);
    return gleft;
    }

    function moveMenu()
    {
    if(!oMenu.state)
    {
    clearTimeout(tim)
    mIn()
    }
    else
    {
    clearTimeout(tim)
    mOut()
    }
    }

    function mIn()
    {
    if(oMenu.top()>eval(scrolled)-oMenu.height+lshow)
    {
    oMenu.go=1
    oMenu.css.top=oMenu.top()-move
    tim=setTimeout("mIn()",menuSpeed)
    }
    else
    {
    oMenu.go=0
    oMenu.state=1
    }
    }

    function mOut()
    {
    if(oMenu.top()<eval(scrolled))
    {
    oMenu.go=1
    oMenu.css.top=oMenu.top()+move
    tim=setTimeout("mOut()",menuSpeed)
    }
    else
    {
    oMenu.go=0
    oMenu.state=0
    }
    }

    function checkScrolled()
    {
    if(!oMenu.go)
    oMenu.css.top=(!oMenu.state) ? eval(scrolled) : eval(scrolled)-oMenu.height+lshow
    if(n)
    setTimeout('checkScrolled()',30)
    }

    function menuInit()
    {
    oMenu=new makeMenu('divMenu')
    scrolled=n ? "window.pageYOffset" : "document.body.scrollTop"
    oMenu.css.top=eval(scrolled)-oMenu.height+lshow
    oMenu.css.visibility='visible'
    if(moveOnScroll)
    ie ? window.onscroll=checkScrolled : checkScrolled();
    }

    onload = menuInit;

    </SCRIPT>

    <div class="cassetto" id="divMenu" style="position:absolute; top:0; left:30; height:100; width:200; visibility:hidden; background: url('sfondo.gif')">
    <center>
    <a class="cassetto" href="#">LINK1</a> <br>
    <br>
    <a class="cassetto" href="#">LINK2</a> <br>
    <br>
    <a class="cassetto" href="#">LINK3</a> <br>
    <br>
    <a class="cassetto" href="#">LINK4</a> <br>
    <br>
    <a class="cassetto" href="#">LINK5</a> <br>
    <br>
    <a class="cassetto" href="#">LINK6</a> <br>

    Ciao alla prossima raga !!!


    ____________________________________________
    Web dreams '07 Progettazione e Creazione siti Web

+ Rispondi alla Discussione

Tag per Questa 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.