February 20
Le pagine Web hanno un proprio elemento dell'interfaccia utente specifico, il collegamento ipertestuale. Tuttavia, le pagine Web possono anche utilizzare molti tipi di interfacce native per il sistema operativo del computer, come barre di scorrimento, caselle di controllo e menu a discesa. Utilizzare il tag "select" in HTML per inserire un menu a discesa nella pagina Web e utilizzare il codice JavaScript per farlo rispondere in modo dinamico quando l'utente seleziona un elemento da esso. Si può fare un menu a discesa nella pagina Web di rispondere in un ricco, maniera user-friendly, proprio come un normale software di interfaccia.
1 Aggiungere il seguente codice al corpo del documento HTML:
<Select onChange = "menuAction (questo);">
<Option value = "cmd1"> Comando 1 </ option>
<Option value = "cmd2"> Comando 2 </ option>
<Option value = "CMD3"> Comando 3 </ option>
</ Select>
Questo codice genera un menu a tendina con tre elementi. Il atttribute "onChange" del tag "selezionare" attiva una funzione JavaScript quando l'utente seleziona un nuovo elemento.
2 Aggiungere il seguente codice tra i tag "testa" del documento HTML per dichiarare la funzione "menuAction" che verrà attivato dal menu a discesa:
<Script type = "text / javascript">
Funzione menuAction (menu) {
allarme (menu.options [menu.selectedIndex] .value);
}
</ Script>
Questa funzione presenta semplicemente una finestra di dialogo che dice all'utente quale elemento hanno scelto dal menu a discesa. Il Document Object Model riferimento al tag "selezionare" viene passato alla funzione utilizzando il "questo" parola chiave, in modo da poter creare molti menu a discesa diversi, ognuno con la stessa funzione JavaScript.
3 Utilizzare un'istruzione switch nella funzione "menuAction" per eseguire codice JavaScript specifico, a seconda di quale punto l'utente seleziona in un menu a discesa. Ecco una funzione "menuAction" che esegue un codice diverso a seconda di ciò che l'utente seleziona esempio:
Funzione menuAction (menu) {
Interruttore (menu.options [menu.selectedIndex] .value)
{
caso "cmd1":
alert ( "Si è scelto di comando 1");
rompere;
caso "cmd2":
window.location.assign ( "http://www.ehow.com");
rompere;
caso "CMD3":
menu.style.visibility = "hidden";
rompere;
}
}
Includere l'istruzione "pausa" per ogni "caso" per assicurarsi che un solo comando viene eseguito. L'attributo "valore" del tag "opzione" determina che il codice viene eseguito, a prescindere da quale viene utilizzato menu a discesa.
4 Utilizzare i tag "OPTGROUP" per organizzare le voci di menu in gruppi separati. Ecco un esempio:
<Select onChange = "menuAction (questo);">
<Label optgroup = "Gruppo1">
<option value="cmd1">Command 1</option>
& Lt; option value = "cmd2"> Command 2 & lt; / option>
</ Optgroup>
<Label optgroup = "Gruppo2">
<option value="cmd3">Command 3</option>
& Lt; option value = "CMD4"> Comando 4 & lt; / option>
</ Optgroup>
</ Select>