Menu a tendina con i selectbox: il JumpMenu

Corso jQuery
Creare applicazioni client-side col Framework jQuery

Scritto da Luca Ruggiero nella sezione Javascript

Il cosiddetto JumpMenu è un menu a scelta rapida, utile sia per l'utente per una navigazione più agevole, che per lo sviluppatore, onde ottimizzare spazio sulla pagina e risorse.

Viene realizzato mediante l'utilizzo del Tag Html <select>, ed animato con un piccolo script ad hoc.

Creiamo sia il codice Html che lo script in un'unica routine Javascript:

function JumpMenu(links) {
    //Crea un link all'indice della select selezionato
    location.href = links[links.selectedIndex].value;
}

//Crea la tabella di dati contenente le voci delle possibili opzioni
var voci = new Array();
    voci[0] = "Pagina 1";
    voci[1] = "Pagina 2";
    voci[2] = "Pagina 3";
    voci[3] = "Pagina 4";
    voci[4] = "Pagina 5";
//Crea la tabella di dati contenente i link alle rispettive voci delle opzioni

var link = new Array();
    link[0] = "pagina1.htm";
    link[1] = "pagina2.htm";
    link[2] = "pagina3.htm";
    link[3] = "pagina4.htm";
    link[4] = "pagina5.htm";

//Crea la struttura Html della select, all'evento onChange lancia la funzione
document.write("<select onChange=JumpMenu(this)>");
document.write("<option value=#>Jump to...</option>");

//Esegue un ciclo ed estende tutte le voci del menu con i relativi valori
for(i=0; i<5; i++) {
    document.write("<option value=" + link[i] + ">" + voci[i] + "</option>");
}

document.write("</select>");

I più cliccati della sezione Javascript

:: jQuery Validation: validazione di un form con jQuery (106.555)

:: Breve guida a jQuery (96.818)

:: Le espressioni regolari in Javascript (84.690)

:: Gestione delle stringhe in Javascript (74.154)

:: Stampare una pagina col Dhtml (42.639)

:: Inserire in automatico lo slash nel formato data gg/mm/aaaa (39.785)

:: Menu orizzontale dinamico in Dhtml (36.961)

:: Gli Array in Javascript (35.690)

:: Temporizzazioni Javascript (31.211)

:: Istruzion condizionali in Javascript: if e switch (28.629)

IN EVIDENZA
DOWNLOAD