JqueryUI - Fisarmonica
Accordion Widget in jQueryUI è un contenitore di contenuto espandibile e comprimibile basato su jQuery suddiviso in sezioni e probabilmente simile a schede. jQueryUI fornisce il metodo accordion () per ottenere ciò.
Sintassi
Il accordion() metodo può essere utilizzato in due forme:
$ (selettore, contesto) .accordion (opzioni) Metodo
Il metodo accordion (opzioni) dichiara che un elemento HTML e il suo contenuto devono essere trattati e gestiti come menu a fisarmonica. Il parametro options è un oggetto che specifica l'aspetto e il comportamento del menu coinvolto.
Sintassi
$(selector, context).accordion (options);Puoi fornire una o più opzioni alla volta utilizzando l'oggetto Javascript. Se ci sono più opzioni da fornire, le separerai usando una virgola come segue:
$(selector, context).accordion({option1: value1, option2: value2..... });La tabella seguente elenca le diverse opzioni che possono essere utilizzate con questo metodo:
| Sr.No. | Opzione e descrizione |
|---|---|
| 1 | attivo
Indica l'indice del menu che è aperto al primo accesso alla pagina. Per impostazione predefinita, il suo valore è0, ovvero il primo menu. Option - active Indica l'indice del menu che è aperto al primo accesso alla pagina. Per impostazione predefinita, il suo valore è0, ovvero il primo menu. Questo può essere di tipo -
Syntax |
| 2 | animare
Questa opzione viene utilizzata per impostare come animare i pannelli che cambiano. Per impostazione predefinita, il suo valore è{}. Option - animate Questa opzione viene utilizzata per impostare come animare i pannelli che cambiano. Per impostazione predefinita, il suo valore è{}. Questo può essere di tipo -
Syntax |
| 3 | collassabile
Questa opzione, se impostata su true , consente agli utenti di chiudere un menu facendo clic su di esso. Per impostazione predefinita, i clic sull'intestazione del pannello aperto non hanno alcun effetto. Per impostazione predefinita, il suo valore èfalse. Option - collapsible Questa opzione, se impostata su true , consente agli utenti di chiudere un menu facendo clic su di esso. Per impostazione predefinita, i clic sull'intestazione del pannello aperto non hanno alcun effetto. Per impostazione predefinita, il suo valore èfalse. Syntax |
| 4 | Disabilitato
Questa opzione, se impostata su true, disabilita la fisarmonica. Per impostazione predefinita, il suo valore èfalse. Option - disabled Questa opzione, se impostata su true, disabilita la fisarmonica. Per impostazione predefinita, il suo valore èfalse. Syntax |
| 5 | evento
Questa opzione specifica l'evento utilizzato per selezionare un'intestazione di fisarmonica. Per impostazione predefinita, il suo valore èclick. Option - event Questa opzione specifica l'evento utilizzato per selezionare un'intestazione di fisarmonica. Per impostazione predefinita, il suo valore èclick. Syntax |
| 6 | intestazione
Questa opzione specifica un selettore o un elemento per sovrascrivere il modello predefinito per identificare gli elementi dell'intestazione. Per impostazione predefinita, il suo valore è> li > :first-child,> :not(li):even. Option - header Questa opzione specifica un selettore o un elemento per sovrascrivere il modello predefinito per identificare gli elementi dell'intestazione. Per impostazione predefinita, il suo valore è> li > :first-child,> :not(li):even. Syntax |
| 7 | heightStyle
Questa opzione viene utilizzata per controllare l'altezza della fisarmonica e dei pannelli. Per impostazione predefinita, il suo valore èauto. Option - heightStyle Questa opzione viene utilizzata per controllare l'altezza della fisarmonica e dei pannelli. Per impostazione predefinita, il suo valore èauto. I valori possibili sono -
Syntax |
| 8 | icone
Questa opzione è un oggetto che definisce le icone da utilizzare a sinistra del testo dell'intestazione per i pannelli aperti e chiusi. L'icona da utilizzare per i pannelli chiusi è specificata come proprietà denominata header , mentre l'icona da utilizzare per i pannelli aperti è specificata come proprietà denominata headerSelected . Per impostazione predefinita, il suo valore è{ "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s" }. Option - icons Questa opzione è un oggetto che definisce le icone da utilizzare a sinistra del testo dell'intestazione per i pannelli aperti e chiusi. L'icona da utilizzare per i pannelli chiusi è specificata come proprietà denominata header , mentre l'icona da utilizzare per i pannelli aperti è specificata come proprietà denominata headerSelected . Per impostazione predefinita, il suo valore è{ "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s" }. Syntax |
La sezione seguente ti mostrerà alcuni esempi di funzionamento della funzionalità del widget della fisarmonica.
Funzionalità predefinita
L'esempio seguente mostra un semplice esempio di funzionalità del widget a fisarmonica, senza passare parametri al file accordion() metodo.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Accordion Example </title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#accordion-1" ).accordion();
});
</script>
<style>
#accordion-1{font-size: 14px;}
</style>
</head>
<body>
<div id = "accordion-1">
<h3>Tab 1</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<h3>Tab 2</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<h3>Tab 3</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</body>
</html>Salviamo il codice sopra in un file HTML accordionexample.htme aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output. Ora puoi giocare con il risultato:
Fare clic sulle intestazioni (Scheda 1, Scheda 2, Scheda 3) per espandere / comprimere il contenuto suddiviso in sezioni logiche, proprio come le schede.
Uso di pieghevole
Il seguente esempio dimostra l'utilizzo di tre opzioni collapsible nel widget della fisarmonica di JqueryUI.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Accordion Example </title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#accordion-2" ).accordion({
collapsible: true
});
});
</script>
<style>
#accordion-2{font-size: 14px;}
</style>
</head>
<body>
<div id = "accordion-2">
<h3>Tab 1</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<h3>Tab 2</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<h3>Tab 3</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
</div>
</body>
</html>Salviamo il codice sopra in un file HTML accordionexample.htme aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output. Ora puoi giocare con il risultato:
Qui abbiamo impostato pieghevole su true . Fare clic su un'intestazione di fisarmonica, questo permette di comprimere la sezione attiva.
Uso di heightStyle
Il seguente esempio dimostra l'utilizzo di tre opzioni heightStyle nel widget della fisarmonica di JqueryUI.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Accordion Example </title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#accordion-3" ).accordion({
heightStyle: "content"
});
$( "#accordion-4" ).accordion({
heightStyle: "fill"
});
});
</script>
<style>
#accordion-3, #accordion-4{font-size: 14px;}
</style>
</head>
<body>
<h3>Height style-content</h3>
<div style = "height:250px">
<div id = "accordion-3">
<h3>Tab 1</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
<li>List item four</li>
<li>List item five</li>
</ul>
</div>
<h3>Tab 2</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
</p>
</div>
<h3>Tab 3</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
</p>
</div>
</div>
</div><br><br>
<h3>Height style-Fill</h3>
<div style = "height:250px">
<div id = "accordion-4">
<h3>Tab 1</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
<li>List item four</li>
<li>List item five</li>
</ul>
</div>
<h3>Tab 2</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.
</p>
</div>
<h3>Tab 3</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.
</p>
</div>
</div>
</div>
</body>
</html>Salviamo il codice sopra in un file HTML accordionexample.htme aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output. Ora puoi giocare con il risultato:
Qui abbiamo due fisarmoniche, la prima ha l' opzione heightStyle impostata sul contenuto , che consente ai pannelli della fisarmonica di mantenere la loro altezza nativa. La seconda fisarmonica ha l' opzione heightStyle impostata su fill , lo script imposterà automaticamente le dimensioni della fisarmonica all'altezza del suo contenitore principale.
$ (selector, context) .accordion ("action", params)
Il metodo accordion ("action", params) può eseguire un'azione sugli elementi della fisarmonica, come selezionare / deselezionare il menu della fisarmonica. L'azione è specificata come una stringa nel primo argomento (ad esempio, "disable" disabilita tutti i menu). Controlla le azioni che possono essere trasmesse, nella tabella seguente.
Sintassi
$(selector, context).accordion ("action", params);;La tabella seguente elenca le diverse azioni che possono essere utilizzate con questo metodo:
| Sr.No. | Azione e descrizione |
|---|---|
| 1 | distruggere
Questa azione distrugge completamente la funzionalità della fisarmonica di un elemento. Gli elementi tornano al loro stato pre-inizializzazione. Action - destroy Questa azione distrugge completamente la funzionalità della fisarmonica di un elemento. Gli elementi tornano al loro stato pre-inizializzazione. Syntax |
| 2 | disattivare
Questa azione disabilita tutti i menu. Nessun clic verrà preso in considerazione. Questo metodo non accetta argomenti. Action - disable Questa azione disabilita tutti i menu. Nessun clic verrà preso in considerazione. Questo metodo non accetta argomenti. Syntax |
| 3 | abilitare
Questa azione riattiva tutti i menu. I clic vengono nuovamente considerati. Questo metodo non accetta argomenti. Action - enable Questa azione riattiva tutti i menu. I clic vengono nuovamente considerati. Questo metodo non accetta argomenti. Syntax |
| 4 | opzione (optionName)
Questa azione ottiene il valore dell'elemento fisarmonica attualmente associato con l' opzione optionName specificato . Questo prende un valore String come argomento. Action - option( optionName ) Questa azione ottiene il valore dell'elemento fisarmonica attualmente associato con l' opzione optionName specificato . Questo prende un valore String come argomento. Syntax |
| 5 | opzione
Questa azione ottiene un oggetto contenente coppie chiave / valore che rappresentano l'hash delle opzioni di fisarmonica corrente. Action - option Questa azione ottiene un oggetto contenente coppie chiave / valore che rappresentano l'hash delle opzioni di fisarmonica corrente. Syntax |
| 6 | opzione (optionName, value)
Questa azione imposta il valore dell'opzione accordion associata all'opzione optionName specificato. Action - option( optionName, value ) Questa azione imposta il valore dell'opzione accordion associata all'opzione optionName specificato. Syntax |
| 7 | opzione (opzioni)
Questa azione imposta una o più opzioni per la fisarmonica. Action - option( options ) Questa azione imposta una o più opzioni per la fisarmonica. Dove opzioni è una mappa di coppie opzione-valore da impostare. Syntax |
| 8 | ricaricare
Questa azione elabora tutte le intestazioni e i pannelli aggiunti o rimossi direttamente nel DOM. Quindi ricalcola l'altezza dei pannelli a fisarmonica. I risultati dipendono dal contenuto e dall'opzione heightStyle. Questo metodo non accetta argomenti. Action - refresh Questa azione elabora tutte le intestazioni e i pannelli aggiunti o rimossi direttamente nel DOM. Quindi ricalcola l'altezza dei pannelli a fisarmonica. I risultati dipendono dal contenuto e dall'opzione heightStyle. Questo metodo non accetta argomenti. Syntax |
| 9 | aggeggio
Questa azione restituisce l'elemento widget della fisarmonica; quello annotato con il nome della classe ui-accordion . Action - widget Questa azione restituisce l'elemento widget della fisarmonica; quello annotato con il nome della classe ui-accordion . Syntax |
Esempio
Vediamo ora un esempio usando le azioni della tabella sopra. Il seguente esempio dimostra l'uso del metodo option (optionName, value) .
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Accordion Example </title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#accordion-5" ).accordion({
disabled: false
});
$("input").each(function () {
$(this).change(function () {
if ($(this).attr("id") == "disableaccordion") {
$("#accordion-5").accordion("option", "disabled", true);
} else {
$("#accordion-5").accordion("option", "disabled", false);
}
});
});
});
</script>
<style>
#accordion-5{font-size: 14px;}
</style>
</head>
<body>
<div id = "accordion-5">
<h3>Tab 1</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</p>
</div>
<h3>Tab 2</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</p>
</div>
<h3>Tab 3</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
</div>
<div style = "margin-top:30px">
<input type = "radio" name = "disable" id = "disableaccordion"
value = "disable">Disable accordion
<input type = "radio" name = "disable" id = "enableaccordion" checked
value = "enable">Enable accordion
</div>
</body>
</html>Salviamo il codice sopra in un file HTML accordionexample.htm e aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output:
Qui mostriamo l'attivazione e la disattivazione delle fisarmoniche. Selezionare i rispettivi pulsanti di opzione per controllare ciascuna azione.
Gestione eventi su elementi a fisarmonica
Oltre al metodo accordion (opzioni) che abbiamo visto nelle sezioni precedenti, JqueryUI fornisce metodi di eventi che vengono attivati per un particolare evento. Questi metodi di evento sono elencati di seguito:
| Sr.No. | Metodo e descrizione dell'evento |
|---|---|
| 1 | attivare (evento, ui)
Questo evento viene attivato quando viene attivato un menu. Questo evento viene generato solo all'attivazione del pannello, non viene attivato per il pannello iniziale quando viene creato il widget della fisarmonica. Event - activate(event, ui) Questo evento viene attivato quando viene attivato un menu. Questo evento viene generato solo all'attivazione del pannello, non viene attivato per il pannello iniziale quando viene creato il widget della fisarmonica. Dove event è di tipo Event e ui è di tipo Object . I possibili valori di ui sono -
Syntax |
| 2 | beforeActivate (evento, ui)
Questo evento viene attivato prima che un pannello venga attivato. Questo evento può essere annullato per impedire l'attivazione del pannello. Event - beforeActivate(event, ui) Questo evento viene attivato prima che un pannello venga attivato. Questo evento può essere annullato per impedire l'attivazione del pannello. Dove event è di tipo Event e ui è di tipo Object . I possibili valori di ui sono -
Syntax |
| 3 | create (evento, ui)
Questo evento viene attivato quando viene creata la fisarmonica. Event - create(event, ui) Questo evento viene attivato quando viene creata la fisarmonica. Dove event è di tipo Event e ui è di tipo Object . I possibili valori di ui sono -
Syntax |
Esempio
L'esempio seguente mostra l'utilizzo del metodo degli eventi nei widget a fisarmonica. Questo esempio dimostra l'uso degli eventi create , beforeActive e active .
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Accordion Example </title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#accordion-6" ).accordion({
create: function (event, ui) {
$("span#result").html ($("span#result").html () +
"<b>Created</b><br>");
},
beforeActivate : function (event, ui) {
$("span#result").html ($("span#result").html () +
", <b>beforeActivate</b><br>");
},
activate: function (event, ui) {
$("span#result").html ($("span#result").html () +
"<b>activate</b><br>");
}
});
});
</script>
<style>
#accordion-6{font-size: 14px;}
</style>
</head>
<body>
<div id = "accordion-6">
<h3>Tab 1</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</p>
</div>
<h3>Tab 2</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</p>
</div>
<h3>Tab 3</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
</div>
<hr />
<span id = result></span>
</body>
</html>Salviamo il codice sopra in un file HTML accordionexample.htm e aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output:
Qui stiamo visualizzando un testo in basso, basato sugli eventi.