jQuery UI par exemple - pliage panneau (Accordéon)
Dans un affichage de l'espace limité pour la présentation du contenu de l'information panneau réductible.
Pour plus de détails sur la partie de l' accordéon, consultez la documentation de l' API membre du panel de pliage (un accordéon le Widget) .
La fonction par défaut
Cliquez sur la tête pour développer / contenu de l'effondrement est divisé en différentes parties de la logique, comme les onglets (onglets) les mêmes. Vous pouvez éventuellement mettre en place lorsque la souris survole l'opportunité de passer à ouvrir les différentes parties de l'état marche / arrêt.
Les balises HTML de base sont une série de titres (balises H3) et le contenu div, de sorte que le contenu peut être utilisé sans passer par JavaScript.
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Titre> jQuery UI accordéon (Accordéon) - La fonction par défaut </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// 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 = "accordéon">
<H3> Partie 1 </ h3>
<Div>
<P>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Entier
ut neque. Vivamus nisi metus, molestie vel, grávida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur Malesuada. Vestibulum un velit eu ante scelerisque vulputate.
</ P>
</ Div>
<H3> Partie 2 </ h3>
<Div>
<P>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor à aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. En
suscipit faucibus urna.
</ P>
</ Div>
<H3> section 3 </ h3>
<Div>
<P>
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
Phasellus pellentesque purus à massa. Aenean en pede. Phasellus ac libero
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
lacinia ornare, quam ante aliquam nisi, leo le purus de venenatis eu dui.
</ P>
<Ul>
<Li> Liste élément one </ li>
<Li> Liste point deux </ li>
<Li> Liste item trois </ li>
</ Ul>
</ Div>
<H3> Partie 4 </ h3>
<Div>
<P>
Cras dictum. Pellentesque habitant morbi tristique senectus et Netus
ET fames de Malesuada ac egestas de Turpis. Vestibulum ante ipsum primis dans
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est.
</ P>
<P>
nisl Suspendisse eu. Nullam ut libero. Integer dignissim consequat lectus.
Classe aptent Taciti sociosqu ad Litora torquent par conubia nostra, par
inceptos himenaeos.
</ P>
</ Div>
</ Div>
</ Body>
</ Html>
Folding contenu
Par défaut, les panneaux d'effondrement restent toujours une partie est ouverte. Pour donner toutes les pièces sont pliées, peuvent être réglés collapsible option pour vrai. Cliquez sur la section actuellement ouvert à l'effondrement de son contenu volet.
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Titre> jQuery UI accordéon (Accordion) - contenu pliant </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// 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 ({
pliable: true
});
});
</ Script>
</ Head>
<Body>
<Div id = "accordéon">
<H3> Partie 1 </ h3>
<Div>
<P> Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Entier ut neque. Vivamus nisi metus, molestie vel, grávida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur Malesuada. Vestibulum un velit eu ante scelerisque vulputate. </ p>
</ Div>
<H3> Partie 2 </ h3>
<Div>
<P> Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor à aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. Dans suscipit faucibus urna. < / p>
</ Div>
<H3> section 3 </ h3>
<Div>
<P> Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus dans Aenean massa. En pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare , quam ante aliquam nisi, leo le purus de venenatis eu dui. </ p>
<Ul>
<Li> Liste élément one </ li>
<Li> Liste point deux </ li>
<Li> Liste item trois </ li>
</ Ul>
</ Div>
<H3> Partie 4 </ h3>
<Div>
<P> Cras dictum Pellentesque habitant morbi tristique senectus et Netus et Malesuada fames ac egestas de Turpis Vestibulum ante ipsum primis dans faucibus orci luctus et ultrices posuere cubilia Curae; .. Aenean lacinia mauris vel is </ p> <p> Suspendisse eu nisl. . Nullam ut libero. Integer dignissim consequat lectus. classe aptent Taciti sociosqu ad Litora torquent par conubia nostra, par inceptos himenaeos. </ p>
</ Div>
</ Div>
</ Body>
</ Html>
Icônes personnalisées
Grâce à des icons d' options pour personnaliser l'icône du titre, icons option pour accepter le titre par défaut et activer (ouvert) classe d'état. Utilisez le cadre UI CSS de toute catégorie ou créer une classe personnalisée à utiliser une image de fond.
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Titre> jQuery UI accordéon (Accordion) - icône personnalisée </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
icônes var = {
header: "ui-icon-circle-arrow-e",
activeHeader: "ui-icon-circle-arrow-s"
};
$ ( "#accordion") .Accordion ({
icons: icônes
});
$ ( "#toggle") .button (). Cliquez sur (function () {
if ($ ( "#accordion") .Accordion ( "option", "icônes")) {
$ ( "#accordion") .Accordion ( "Option", "icônes", null);
} Else {
$ ( "#accordion") .Accordion ( "Option", "icônes", icônes);
}
});
});
</ Script>
</ Head>
<Body>
<Div id = "accordéon">
<H3> Partie 1 </ h3>
<Div>
<P> Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Entier ut neque. Vivamus nisi metus, molestie vel, grávida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur Malesuada. Vestibulum un velit eu ante scelerisque vulputate. </ p>
</ Div>
<H3> Partie 2 </ h3>
<Div>
<P> Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor à aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. Dans suscipit faucibus urna. < / p>
</ Div>
<H3> section 3 </ h3>
<Div>
<P> Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus dans Aenean massa. En pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare , quam ante aliquam nisi, leo le purus de venenatis eu dui. </ p>
<Ul>
<Li> Liste élément one </ li>
<Li> Liste point deux </ li>
<Li> Liste item trois </ li>
</ Ul>
</ Div>
<H3> Partie 4 </ h3>
<Div>
<P> Cras dictum Pellentesque habitant morbi tristique senectus et Netus et Malesuada fames ac egestas de Turpis Vestibulum ante ipsum primis dans faucibus orci luctus et ultrices posuere cubilia Curae; .. Aenean lacinia mauris vel is </ p> <p> Suspendisse eu nisl. . Nullam ut libero. Integer dignissim consequat lectus. classe aptent Taciti sociosqu ad Litora torquent par conubia nostra, par inceptos himenaeos. </ p>
</ Div>
</ Div>
<Bouton id = "toggle"> toggle icône </ button>
</ Body>
</ Html>
espace de remplissage
Depuis le panneau de pliage est composé d'éléments de niveau bloc, et par défaut, sa largeur remplit l'espace horizontal disponible. Pour remplir l'espace vertical alloué par le conteneur, définissez heightStyle l' option "fill" , le script définit automatiquement la hauteur de la taille du panneau de pliage du conteneur parent.
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Titre> jQuery UI accordéon (Accordéon) - remplir l'espace </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
# Accordion-resizer {
padding: 10px;
largeur: 350px;
hauteur: 220px;
}
</ Style>
<Script>
$ (Function () {
$ ( "#accordion") .Accordion ({
heightStyle: "remplir"
});
});
$ (Function () {
$ ( "# Accordéon-resizer") .resizable ({
minHeight: 140,
minWidth: 200,
redimensionner: function () {
$ ( "#accordion") .Accordion ( "Refresh");
}
});
});
</ Script>
</ Head>
<Body>
<Classe H3 = "docs"> réajuster le récipient extérieur: </ h3>
<Div id = "accordéon resizer" class = "ui-widget-content">
<Div id = "accordéon">
<H3> Partie 1 </ h3>
<Div>
<P> Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Entier ut neque. Vivamus nisi metus, molestie vel, grávida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur Malesuada. Vestibulum un velit eu ante scelerisque vulputate. </ p>
</ Div>
<H3> Partie 2 </ h3>
<Div>
<P> Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor à aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. Dans suscipit faucibus urna. < / p>
</ Div>
<H3> section 3 </ h3>
<Div>
<P> Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus dans Aenean massa. En pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare , quam ante aliquam nisi, leo le purus de venenatis eu dui. </ p>
<Ul>
<Li> Liste élément one </ li>
<Li> Liste point deux </ li>
<Li> Liste item trois </ li>
</ Ul>
</ Div>
<H3> Partie 4 </ h3>
<Div>
<P> Cras dictum Pellentesque habitant morbi tristique senectus et Netus et Malesuada fames ac egestas de Turpis Vestibulum ante ipsum primis dans faucibus orci luctus et ultrices posuere cubilia Curae; .. Aenean lacinia mauris vel is </ p> <p> Suspendisse eu nisl. . Nullam ut libero. Integer dignissim consequat lectus. classe aptent Taciti sociosqu ad Litora torquent par conubia nostra, par inceptos himenaeos. </ p>
</ Div>
</ Div>
</ Div>
</ Body>
</ Html>
Hauteur non automatique
Réglage heightStyle: "content" , de sorte que les panneaux pliés conservent leur hauteur d' origine.
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Titre> jQuery UI accordéon (Accordéon) - hauteur non-automatique </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// 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: "content"
});
});
</ Script>
</ Head>
<Body>
<Div id = "accordéon">
<H3> Partie 1 </ h3>
<Div>
<P> Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur Malesuada. Vestibulum un velit eu ante scelerisque vulputate. </ P>
</ Div>
<H3> Partie 2 </ h3>
<Div>
<P> Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor à aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. Dans suscipit faucibus urna. < / p>
</ Div>
<H3> section 3 </ h3>
<Div>
<P> Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus dans Aenean massa. En pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare , quam ante aliquam nisi, leo le purus de venenatis eu dui. </ p>
<Ul>
<Li> Liste élément </ li>
<Li> Liste élément </ li>
<Li> Liste élément </ li>
<Li> Liste élément </ li>
<Li> Liste élément </ li>
<Li> Liste élément </ li>
<Li> Liste élément </ li>
</ Ul>
</ Div>
</ Div>
</ Body>
</ Html>
Lorsque hover ouvert
Cliquez sur la tête pour développer / contenu de l'effondrement est divisé en différentes parties de la logique, comme les onglets (onglets) les mêmes. Vous pouvez éventuellement mettre en place lorsque la souris survole l'opportunité de passer à ouvrir les différentes parties de l'état marche / arrêt.
Les balises HTML de base sont une série de titres (balises H3) et le contenu div, de sorte que le contenu peut être utilisé sans passer par JavaScript.
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Titre> jQuery UI accordéon (Accordéon) - En vol stationnaire ouvert </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// 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 ({
événement: "cliquez sur hoverintent"
});
});
/ *
* HoverIntent | Copyright 2011 Brian Cherne
* Http://cherne.net/brian/resources/jquery.hoverIntent.html
* Modifié par l'équipe jQuery UI
* /
$ .event.special.hoverintent = {
setup: function () {
$ (Ce) .bind ( "mouseover", jQuery.event.special.hoverintent.handler);
},
teardown: function () {
$ (Ce) .unbind ( "mouseover", jQuery.event.special.hoverintent.handler);
},
gestionnaire: function (event) {
var currentX, currentY, timeout,
args = arguments,
target = $ (event.target),
previousX = event.pageX,
= event.pageY, avait déjà fait;
piste de fonction (event) {
currentX = event.pageX;
currentY = event.pageY;
};
fonction clear () {
cible
.unbind ( "mousemove", piste)
.unbind ( "mouseout", claire);
clearTimeout (timeout);
}
gestionnaire function () {
var prop,
orig = événement;
if ((Math.abs (previousX - currentX) +
Math.abs (, avait déjà fait - currentY)) <7) {
clear ();
event = $ .Event ( "hoverintent");
pour (prop dans orig) {
if (! (prop dans l'événement)) {
événement [prop] = orig [prop];
}
}
// Empêcher l'accès à l'événement d'origine, parce que le nouvel événement sera déclenché de manière asynchrone, l'ancien événement est plus disponible (# 6028)
supprimer event.originalEvent;
target.trigger (event);
} Else {
previousX = currentX;
= currentY, avait déjà fait;
timeout = setTimeout (gestionnaire, 100);
}
}
timeout = setTimeout (gestionnaire, 100);
target.bind ({
mousemove: piste,
mouseout: clair
});
}
};
</ Script>
</ Head>
<Body>
<Div id = "accordéon">
<H3> Partie 1 </ h3>
<Div>
<P>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Entier
ut neque. Vivamus nisi metus, molestie vel, grávida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur Malesuada. Vestibulum un velit eu ante scelerisque vulputate.
</ P>
</ Div>
<H3> Partie 2 </ h3>
<Div>
<P>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor à aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. En
suscipit faucibus urna.
</ P>
</ Div>
<H3> section 3 </ h3>
<Div>
<P>
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
Phasellus pellentesque purus à massa. Aenean en pede. Phasellus ac libero
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
lacinia ornare, quam ante aliquam nisi, leo le purus de venenatis eu dui.
</ P>
<Ul>
<Li> Liste élément one </ li>
<Li> Liste point deux </ li>
<Li> Liste item trois </ li>
</ Ul>
</ Div>
<H3> Partie 4 </ h3>
<Div>
<P>
Cras dictum. Pellentesque habitant morbi tristique senectus et Netus
ET fames de Malesuada ac egestas de Turpis. Vestibulum ante ipsum primis dans
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est.
</ P>
<P>
nisl Suspendisse eu. Nullam ut libero. Integer dignissim consequat lectus.
Classe aptent Taciti sociosqu ad Litora torquent par conubia nostra, par
inceptos himenaeos.
</ P>
</ Div>
</ Div>
</ Body>
</ Html>
Trier (Sortable)
Faites glisser le titre dans le panneau pour réorganiser.
<! DOCTYPE html>
<Html lang = "fr">
<Head>
<Meta charset = "utf-8">
<Titre> jQuery UI accordéon (Accordéon) - tri (Sortable) </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
/ * Lors de la commande, il y a des problèmes de mise en page IE (voir # 5413) * /
.group {zoom: 1}
</ Style>
<Script>
$ (Function () {
$ ( "#accordion")
.Accordion ({
en-tête: "> div> h3"
})
.sortable ({
axe: "y",
gérer: "h3",
stop: function (event, ui) {
// Lorsque vous triez, IE ne peut pas être inscrit flou, de sorte que le déclenchement focusout gestionnaire pour supprimer .ui-état-focus
ui.item.children ( "h3") .triggerHandler ( "focusout");
}
});
});
</ Script>
</ Head>
<Body>
<Div id = "accordéon">
<Class = Div "groupe">
<H3> Partie 1 </ h3>
<Div>
<P> Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Entier ut neque. Vivamus nisi metus, molestie vel, grávida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur Malesuada. Vestibulum un velit eu ante scelerisque vulputate. </ p>
</ Div>
</ Div>
<Class = Div "groupe">
<H3> Partie 2 </ h3>
<Div>
<P> Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor à aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. Dans suscipit faucibus urna. < / p>
</ Div>
</ Div>
<Class = Div "groupe">
<H3> section 3 </ h3>
<Div>
<P> Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus dans Aenean massa. En pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare , quam ante aliquam nisi, leo le purus de venenatis eu dui. </ p>
<Ul>
<Li> Liste élément one </ li>
<Li> Liste point deux </ li>
<Li> Liste item trois </ li>
</ Ul>
</ Div>
</ Div>
<Class = Div "groupe">
<H3> Partie 4 </ h3>
<Div>
<P> Cras dictum Pellentesque habitant morbi tristique senectus et Netus et Malesuada fames ac egestas de Turpis Vestibulum ante ipsum primis dans faucibus orci luctus et ultrices posuere cubilia Curae; .. Aenean lacinia mauris vel is </ p> <p> Suspendisse eu nisl. . Nullam ut libero. Integer dignissim consequat lectus. classe aptent Taciti sociosqu ad Litora torquent par conubia nostra, par inceptos himenaeos. </ p>
</ Div>
</ Div>
</ Div>
</ Body>
</ Html>