jQuery UI esempio - pannello pieghevole (fisarmonica)
All'interno di un display spazio limitato per presentare contenuto informativo del pannello pieghevole.
Per maggiori dettagli circa la parte fisarmonica, consultare la documentazione API componente del gruppo di piegatura (una fisarmonica il Widget) .
La funzione di default
Fare clic sulla testa per espandere / contenuti crollo è diviso in varie parti della logica, come schede (tabs) lo stesso. Facoltativamente, è possibile configurare quando il mouse passa se passare per aprire le varie parti della stato on / off.
tag HTML di base sono una serie di titolo (tag H3) e il contenuto div, in modo che il contenuto può essere utilizzato senza passare attraverso JavaScript.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI fisarmonica (Fisarmonica) - La funzione di default </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#accordion") .accordion ();
});
</ Script>
</ Head>
<Body>
<Div id = "accordion">
<H3> Parte 1 </ h3>
<Div>
<P>
Mauris Mauris ante, blandit et, ultrices una, suscipit Eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, Gravida in, condimentum sedersi
amet, nunc. Nam un nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum un velit eu ante scelerisque vulputate.
</ P>
</ Div>
<H3> Parte 2 </ h3>
<Div>
<P>
non urna sed. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
Purus. Vivamus hendrerit, dolor a aliquet laoreet, Mauris turpis porttitor
velit, faucibus interdum Tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</ P>
</ Div>
<H3> sezione 3 </ h3>
<Div>
<P>
Nam enim risus, molestie et, AC Porta, aliquam AC, risus. Quisque lobortis.
Phasellus Pellentesque Purus a Massa. Aenean in pede. Ac libero Phasellus
ac Tellus Pellentesque sempre. Sed ac felis. Sed Commodo, magna quis
Lacinia ornare, quam ante aliquam nisi, eu iaculis leo Purus venenatis dui.
</ P>
<Ul>
<LI> voce della lista di </ li>
<LI> voce dell'Elenco due </ li>
<LI> voce dell'Elenco tre </ li>
</ Ul>
</ Div>
<H3> Parte 4 </ h3>
<Div>
<P>
Cras dictum. Pellentesque abitante morbi tristique senectus et Netus
et fames ac malesuada egestas turpis. Vestibulum ante ipsum primis in
faucibus Orci luctus et ultrices Inchiesta cubilia Curae; Aenean Lacinia
Mauris vel est.
</ P>
<P>
Suspendisse eu Nisl. Nullam ut libero. Integer dignissim consequat lectus.
Classe aptent Taciti sociosqu annuncio litora torquent per conubia Nostra, per
inceptos himenaeos.
</ P>
</ Div>
</ Div>
</ Corpo>
</ Html>
contenuti pieghevole
Per impostazione predefinita, comprimere i pannelli rimangono sempre una parte è aperta. Per dare tutte le parti sono piegati, possono essere impostati collapsible opzione su true. Clicca sulla sezione attualmente aperta al collasso il suo riquadro del contenuto.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI fisarmonica (Fisarmonica) - tenore pieghevole </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#accordion") .accordion ({
pieghevole: true
});
});
</ Script>
</ Head>
<Body>
<Div id = "accordion">
<H3> Parte 1 </ h3>
<Div>
<P> Mauris Mauris ante, blandit et, ultrices una, suscipit Eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, Gravida in, condimentum sit amet, nunc. Nam un nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum un velit eu ante scelerisque vulputate. </ p>
</ Div>
<H3> Parte 2 </ h3>
<Div>
<P> Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet Purus. Vivamus hendrerit, dolor a aliquet laoreet, Mauris turpis porttitor velit, faucibus interdum Tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. < / p>
</ Div>
<H3> sezione 3 </ h3>
<Div>
<P> Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus Pellentesque Purus a Massa. Aenean in pede. Phasellus ac libero ac tellus Pellentesque sempre. Sed ac felis. Sed Commodo, magna quis Lacinia ornare , quam ante aliquam nisi, eu iaculis leo Purus venenatis dui. </ p>
<Ul>
<LI> voce della lista di </ li>
<LI> voce dell'Elenco due </ li>
<LI> voce dell'Elenco tre </ li>
</ Ul>
</ Div>
<H3> Parte 4 </ h3>
<Div>
<P> Cras dictum Pellentesque abitante morbi tristique senectus et Netus et malesuada fames ac turpis egestas Vestibulum ante ipsum primis in faucibus Orci luctus et ultrices Inchiesta cubilia Curae; .. Aenean Lacinia Mauris vel est </ p> <p> Suspendisse eu nisl. . Nullam ut libero. Integer dignissim consequat lectus. Classe aptent Taciti sociosqu annuncio litora torquent per conubia Nostra, per inceptos himenaeos. </ p>
</ Div>
</ Div>
</ Corpo>
</ Html>
icone personalizzate
Attraverso icons opzioni per personalizzare l'icona del titolo, icons possibilità di accettare il titolo predefinito e attivare (aperto) di classe dello stato. Utilizzare il framework di interfaccia utente CSS di qualsiasi classe, o creare una classe personalizzata per usare un'immagine di sfondo.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI fisarmonica (Fisarmonica) - icona personalizzato </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
Icone var = {
Intestazione: "ui-icon-cerchio-freccia-e",
activeHeader: "ui-icon-cerchio-freccia-s"
};
$ ( "#accordion") .accordion ({
Icone: Icone
});
$ ( "#toggle") Apri un (). Fare clic (function () {
if ($ ( "#accordion") .accordion ( "opzione", "icone")) {
$ ( "#accordion") .accordion ( "Opzione", "icone", null);
} Else {
$ ( "#accordion") .accordion ( "Opzioni", "icone", icone);
}
});
});
</ Script>
</ Head>
<Body>
<Div id = "accordion">
<H3> Parte 1 </ h3>
<Div>
<P> Mauris Mauris ante, blandit et, ultrices una, suscipit Eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, Gravida in, condimentum sit amet, nunc. Nam un nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum un velit eu ante scelerisque vulputate. </ p>
</ Div>
<H3> Parte 2 </ h3>
<Div>
<P> Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet Purus. Vivamus hendrerit, dolor a aliquet laoreet, Mauris turpis porttitor velit, faucibus interdum Tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. < / p>
</ Div>
<H3> sezione 3 </ h3>
<Div>
<P> Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus Pellentesque Purus a Massa. Aenean in pede. Phasellus ac libero ac tellus Pellentesque sempre. Sed ac felis. Sed Commodo, magna quis Lacinia ornare , quam ante aliquam nisi, eu iaculis leo Purus venenatis dui. </ p>
<Ul>
<LI> voce della lista di </ li>
<LI> voce dell'Elenco due </ li>
<LI> voce dell'Elenco tre </ li>
</ Ul>
</ Div>
<H3> Parte 4 </ h3>
<Div>
<P> Cras dictum Pellentesque abitante morbi tristique senectus et Netus et malesuada fames ac turpis egestas Vestibulum ante ipsum primis in faucibus Orci luctus et ultrices Inchiesta cubilia Curae; .. Aenean Lacinia Mauris vel est </ p> <p> Suspendisse eu nisl. . Nullam ut libero. Integer dignissim consequat lectus. Classe aptent Taciti sociosqu annuncio litora torquent per conubia Nostra, per inceptos himenaeos. </ p>
</ Div>
</ Div>
<Button id = "Toggle"> icona Toggle </ button>
</ Corpo>
</ Html>
spazio di riempimento
Dal momento che il pannello pieghevole è composto da elementi a livello di blocco, e per impostazione predefinita la sua larghezza riempie lo spazio orizzontale disponibile. Per riempire lo spazio verticale assegnato dal contenitore, impostare heightStyle opzione "fill" , lo script imposta automaticamente l'altezza della dimensione del pannello pieghevole del contenitore principale.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI fisarmonica (fisarmonica) - riempire lo spazio </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
# Fisarmonica-resizer {
padding: 10px;
width: 350px;
altezza: 220px;
}
</ Style>
<Script>
$ (Function () {
$ ( "#accordion") .accordion ({
heightStyle: "riempire"
});
});
$ (Function () {
$ ( "# Accordion-Resizer") .resizable ({
MinHeight: 140,
minWidth: 200,
ridimensionare: function () {
$ ( "#accordion") .accordion ( "Refresh");
}
});
});
</ Script>
</ Head>
<Body>
<H3 class = "doc"> riadattare contenitore esterno: </ h3>
<Div id = "accordion-Resizer" class = "ui-widget di-content">
<Div id = "accordion">
<H3> Parte 1 </ h3>
<Div>
<P> Mauris Mauris ante, blandit et, ultrices una, suscipit Eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, Gravida in, condimentum sit amet, nunc. Nam un nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum un velit eu ante scelerisque vulputate. </ p>
</ Div>
<H3> Parte 2 </ h3>
<Div>
<P> Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet Purus. Vivamus hendrerit, dolor a aliquet laoreet, Mauris turpis porttitor velit, faucibus interdum Tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. < / p>
</ Div>
<H3> sezione 3 </ h3>
<Div>
<P> Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus Pellentesque Purus a Massa. Aenean in pede. Phasellus ac libero ac tellus Pellentesque sempre. Sed ac felis. Sed Commodo, magna quis Lacinia ornare , quam ante aliquam nisi, eu iaculis leo Purus venenatis dui. </ p>
<Ul>
<LI> voce della lista di </ li>
<LI> voce dell'Elenco due </ li>
<LI> voce dell'Elenco tre </ li>
</ Ul>
</ Div>
<H3> Parte 4 </ h3>
<Div>
<P> Cras dictum Pellentesque abitante morbi tristique senectus et Netus et malesuada fames ac turpis egestas Vestibulum ante ipsum primis in faucibus Orci luctus et ultrices Inchiesta cubilia Curae; .. Aenean Lacinia Mauris vel est </ p> <p> Suspendisse eu nisl. . Nullam ut libero. Integer dignissim consequat lectus. Classe aptent Taciti sociosqu annuncio litora torquent per conubia Nostra, per inceptos himenaeos. </ p>
</ Div>
</ Div>
</ Div>
</ Corpo>
</ Html>
altezza non automatico
Impostazione heightStyle: "content" , in modo che i pannelli piegati mantengono la loro altezza originale.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI fisarmonica (Fisarmonica) - altezza non automatico </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#accordion") .accordion ({
heightStyle: "contenuti"
});
});
</ Script>
</ Head>
<Body>
<Div id = "accordion">
<H3> Parte 1 </ h3>
<Div>
<P> Mauris Mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum un eu velit ante scelerisque vulputate. </ P>
</ Div>
<H3> Parte 2 </ h3>
<Div>
<P> Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet Purus. Vivamus hendrerit, dolor a aliquet laoreet, Mauris turpis porttitor velit, faucibus interdum Tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. < / p>
</ Div>
<H3> sezione 3 </ h3>
<Div>
<P> Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus Pellentesque Purus a Massa. Aenean in pede. Phasellus ac libero ac tellus Pellentesque sempre. Sed ac felis. Sed Commodo, magna quis Lacinia ornare , quam ante aliquam nisi, eu iaculis leo Purus venenatis dui. </ p>
<Ul>
<LI> elemento della lista </ li>
<LI> elemento della lista </ li>
<LI> elemento della lista </ li>
<LI> elemento della lista </ li>
<LI> elemento della lista </ li>
<LI> elemento della lista </ li>
<LI> elemento della lista </ li>
</ Ul>
</ Div>
</ Div>
</ Corpo>
</ Html>
Una volta aperto hover
Fare clic sulla testa per espandere / contenuti crollo è diviso in varie parti della logica, come schede (tabs) lo stesso. Facoltativamente, è possibile configurare quando il mouse passa se passare per aprire le varie parti della stato on / off.
tag HTML di base sono una serie di titolo (tag H3) e il contenuto div, in modo che il contenuto può essere utilizzato senza passare attraverso JavaScript.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI fisarmonica (Fisarmonica) - Quando si libra aperto </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#accordion") .accordion ({
evento: "click hoverIntent"
});
});
/ *
* HoverIntent | Copyright 2011 Brian Cherne
* Http://cherne.net/brian/resources/jquery.hoverIntent.html
* Modificato dal team di jQuery UI
* /
$ .event.special.hoverintent = {
messa a punto: function () {
$ (This) .bind ( "mouseover", jQuery.event.special.hoverintent.handler);
},
teardown: function () {
$ (This) .unbind ( "mouseover", jQuery.event.special.hoverintent.handler);
},
handler: function (evento) {
var CurrentX, CurrentY, timeout,
args = argomenti,
target = $ (event.target),
previousX = event.pageX,
previousy = event.pageY;
funzione di pista (evento) {
CurrentX = event.pageX;
currenty = event.pageY;
};
Funzione chiaro () {
bersaglio
.unbind ( "mouseMove", traccia)
.unbind ( "mouseout", chiaro);
clearTimeout (timeout);
}
handler function () {
var prop,
orig = evento;
if ((Math.abs (previousX - CurrentX) +
Math.abs (previousy - CurrentY)) <7) {
chiaro ();
evento = $ .Event ( "hoverIntent");
per (prop in orig) {
if (! (prop nell'evento)) {
evento [prop] = orig [prop];
}
}
// Impedire l'accesso a l'evento originale, in quanto il nuovo evento verrà attivato in modo asincrono, il vecchio evento non è più disponibile (# 6028)
eliminare event.originalEvent;
target.trigger (evento);
} Else {
previousX = CurrentX;
previousy = CurrentY;
timeout = setTimeout (gestore, 100);
}
}
timeout = setTimeout (gestore, 100);
target.bind ({
MouseMove: pista,
mouseout: chiaro
});
}
};
</ Script>
</ Head>
<Body>
<Div id = "accordion">
<H3> Parte 1 </ h3>
<Div>
<P>
Mauris Mauris ante, blandit et, ultrices una, suscipit Eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, Gravida in, condimentum sedersi
amet, nunc. Nam un nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum un velit eu ante scelerisque vulputate.
</ P>
</ Div>
<H3> Parte 2 </ h3>
<Div>
<P>
non urna sed. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
Purus. Vivamus hendrerit, dolor a aliquet laoreet, Mauris turpis porttitor
velit, faucibus interdum Tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</ P>
</ Div>
<H3> sezione 3 </ h3>
<Div>
<P>
Nam enim risus, molestie et, AC Porta, aliquam AC, risus. Quisque lobortis.
Phasellus Pellentesque Purus a Massa. Aenean in pede. Ac libero Phasellus
ac Tellus Pellentesque sempre. Sed ac felis. Sed Commodo, magna quis
Lacinia ornare, quam ante aliquam nisi, eu iaculis leo Purus venenatis dui.
</ P>
<Ul>
<LI> voce della lista di </ li>
<LI> voce dell'Elenco due </ li>
<LI> voce dell'Elenco tre </ li>
</ Ul>
</ Div>
<H3> Parte 4 </ h3>
<Div>
<P>
Cras dictum. Pellentesque abitante morbi tristique senectus et Netus
et fames ac malesuada egestas turpis. Vestibulum ante ipsum primis in
faucibus Orci luctus et ultrices Inchiesta cubilia Curae; Aenean Lacinia
Mauris vel est.
</ P>
<P>
Suspendisse eu Nisl. Nullam ut libero. Integer dignissim consequat lectus.
Classe aptent Taciti sociosqu annuncio litora torquent per conubia Nostra, per
inceptos himenaeos.
</ P>
</ Div>
</ Div>
</ Corpo>
</ Html>
Sort (ordinabile)
Trascina il titolo per il pannello di riordinare.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI fisarmonica (Fisarmonica) - ordinamento (ordinabili) </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
/ * Al momento dell'ordine, non c'è problemi di layout IE (vedi # 5413) * /
.group {zoom: 1}
</ Style>
<Script>
$ (Function () {
$ ( "#accordion")
.accordion ({
Intestazione: "> div> h3"
})
.sortable ({
Asse: "y",
gestire: "H3",
fermare: la funzione (evento, ui) {
// Quando si ordina, IE non può essere mosso registrato, in modo che il grilletto focusOut gestore per rimuovere .ui-stato-focus
ui.item.children ( "H3") .triggerHandler ( "focusOut");
}
});
});
</ Script>
</ Head>
<Body>
<Div id = "accordion">
<Div class = "gruppo">
<H3> Parte 1 </ h3>
<Div>
<P> Mauris Mauris ante, blandit et, ultrices una, suscipit Eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, Gravida in, condimentum sit amet, nunc. Nam un nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum un velit eu ante scelerisque vulputate. </ p>
</ Div>
</ Div>
<Div class = "gruppo">
<H3> Parte 2 </ h3>
<Div>
<P> Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet Purus. Vivamus hendrerit, dolor a aliquet laoreet, Mauris turpis porttitor velit, faucibus interdum Tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. < / p>
</ Div>
</ Div>
<Div class = "gruppo">
<H3> sezione 3 </ h3>
<Div>
<P> Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus Pellentesque Purus a Massa. Aenean in pede. Phasellus ac libero ac tellus Pellentesque sempre. Sed ac felis. Sed Commodo, magna quis Lacinia ornare , quam ante aliquam nisi, eu iaculis leo Purus venenatis dui. </ p>
<Ul>
<LI> voce della lista di </ li>
<LI> voce dell'Elenco due </ li>
<LI> voce dell'Elenco tre </ li>
</ Ul>
</ Div>
</ Div>
<Div class = "gruppo">
<H3> Parte 4 </ h3>
<Div>
<P> Cras dictum Pellentesque abitante morbi tristique senectus et Netus et malesuada fames ac turpis egestas Vestibulum ante ipsum primis in faucibus Orci luctus et ultrices Inchiesta cubilia Curae; .. Aenean Lacinia Mauris vel est </ p> <p> Suspendisse eu nisl. . Nullam ut libero. Integer dignissim consequat lectus. Classe aptent Taciti sociosqu annuncio litora torquent per conubia Nostra, per inceptos himenaeos. </ p>
</ Div>
</ Div>
</ Div>
</ Corpo>
</ Html>