September 16
jQuery è una libreria JavaScript che fornisce potenti funzionalità per la gestione di oggetti browser. La sua sintassi è molto succinta. L'affermazione "$ ( 'div') nascondere ();". nasconde tutti gli oggetti di tag div, mentre "$ ( 'div div') nascondere ();". nasconde tutti i doppi div annidati di. Nascondere i tag opzione nidificati in una casella di riepilogo può essere utile se si richiede solo le opzioni specifiche per una situazione specifica. La sintassi "$ ( 'selezionare l'opzione') nascondere ();". lavora nel browser Firefox, ma non in Internet Explorer. I passi seguenti forniscono una soluzione con la costruzione del menu in modo dinamico.
1 Scarica il file di libreria jQuery (jquery-1.5.1.min.js) da jQuery (vedi Risorse). Salvare il file sul desktop.
2 Aprire il blocco note e copiare e incollare il seguente codice. Salva come "hideopts.html" sul desktop.
<Html>
<Head>
<Script type = "text / javascript 'src =' jquery-1.5.1.min.js '> </ script>
</ Head>
3 Copiare e incollare il seguente codice nella parte inferiore della hideopts.html. Il "var cibo = {..};" dichiarazione crea una matrice chiave coppia di valori. Le chiavi sono "frutta", "dado" e "vegetale". "JQuery.fn.buildSelect = function (hidetype)" è la funzione che crea l'elenco goccia. I itera esterne ciclo foreach attraverso ogni riga della matrice di dati e assegna la lista stringa alla variabile "stringlist". Se il tipo di valore, "frutta", non si verifica in "hidetype," o "hidetype" è uguale a "showall" il controllo passa al ciclo foreach interno. Questo interne itera ciclo attraverso ogni stringa in "stringlist" per costruire l'opzione di riepilogo. Questa funzione viene chiamata da l'ultima riga del <script> .. </ script> ambito.
<Body>
< 'Selezionare Opzioni' select id => </ select>
<Script>
cibo var = {
"Frutto": [ "mela", "banana", "uva"],
"Dado": [ "mandorla", "pecan", "nocciola"],
"Vegetale": [, "fungo" "pomodoro", "pisello"]
};
jQuery.fn.buildSelect = function (hidetype) {
$ ( "#") Selezionare Opzioni html ( ".");
$ .Ogni (Cibo, la funzione (tipo, stringlist) {
if ((hidetype.search (tipo) == - 1) || (hidetype == "showAll")) {
$ .Ogni (Stringlist, la funzione (numero, stringval) {
. $ ( "# Selezionare Opzioni") aggiungere ( "<option value = '" + stringval + "'>" + stringval + "</ option");
});
}
});
}
$ ( '#') Selezionare Opzioni buildSelect ( 'showall.');
</ Script>
</ Body>
</ Html>
4 Copiare e incollare le seguenti righe sopra il tag <script> per creare i due pulsanti che nascondere le opzioni di frutta e mostrare tutte le opzioni del menu.
<Input type = 'tasto' class = 'btn' id = 'frutta' value = 'nascondere frutta' />
<Input type = 'tasto' class = 'btn' id = valore 'showAll' = 'mostra tutti' />
5 Copiare e incollare il seguente riga di jQuery sopra il </ script> tag di chiusura. Si tratta di una funzione di evento, chiamato ogni volta che si fa clic su qualsiasi oggetto della classe "BTN". Si passa attributo id del pulsante di ingresso alla funzione buildSelect.
. $ ( '. BTN') clicca (function () {$ ( '#' + this.id) .buildSelect (this.id)});
6 Copia e incolla le righe seguenti alla fine della funzione "buildSelect" in modo che le opzioni sono ordinati, con la prima opzione selezionata come opzione predefinita.
var sortedOptions = $ .makeArray ($ ( 'opzione di selezione')). sort (function (a, b) {
tornare a.text == b.text? 0: a.text <b.text? -1: 1;
});
$ ( "# Selezionare Opzioni") html (sortedOptions).;
$ ( "# Selezionare Opzioni") [0] .selectedIndex = 0;
7 Salva hideopts.html. Provatelo aprendolo all'interno di un browser e cliccando su "Nascondi frutti" ei pulsanti "Mostra tutto".