jQuery UI ejemplo - el panel plegable (acordeón)
Dentro de un espacio limitado pantalla de presentación de panel desplegable de contenido de información.
Para más detalles sobre la parte del acordeón, consulte la documentación de la API miembro del panel de plegado (un acordeón el widget) .
La función predeterminada
Haga clic en la cabeza se expanda / colapso contenido se divide en varias partes de la lógica, como pestañas (tabs) de la misma. Opcionalmente, puede establecer cuando el ratón pasa si cambiar para abrir las diversas partes del estado activado / desactivado.
etiquetas HTML básicas son una serie de título (etiquetas H3) y la div de contenido, por lo que el contenido se pueden utilizar sin tener que pasar a través de JavaScript.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> jQuery UI acordeón (acordeón) - La función por defecto </ 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>
<Cuerpo>
<Div id = "acordeón">
<H3> Parte 1 </ h3>
<Div>
<P>
Mauris mauris ante, et blandit, ultrices una, suscipit eget, quam. Entero
ut ñeque. Vivamus nisi metus, vel molestie, gesta en, sentarse condimentum
amet, nunc. Nam un nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum una velita de la UE ante scelerisque vulputate.
</ P>
</ Div>
<H3> Parte 2 </ h3>
<Div>
<P>
no urna de sed. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor en laoreet aliquet, mauris turpis porttitor
velita, faucibus interdum Tellus libero ac Justo. Vivamus no quam. En
suscipit faucibus urna.
</ P>
</ Div>
<H3> sección 3 </ h3>
<Div>
<P>
Nam enim Risus, et molestie, ac porta, ac aliquam, Risus. Lobortis Quisque.
Phasellus pellentesque purus en Massa. Aenean en pede. Ac libero Phasellus
ac semper Tellus pellentesque. Sed ac felis. Sed commodo, magna quis
ornare Lacinia, quam ante aliquam nisi, eu iaculis purus leo venenatis dúos.
</ P>
<Ul>
<Li> objeto de lista de </ li>
<Li> Elemento de la lista dos </ li>
<Li> Elemento de lista de tres </ li>
</ Ul>
</ Div>
<H3> Parte 4 </ h3>
<Div>
<P>
Cras dictum. Pellentesque habitant morbi tristique senectus et Netus
et famas malesuada ac egestas turpis. Vestibulum ante ipsum primis en
faucibus Orci luctus et ultrices posuere cubilia Curae; lacinia Aenean
mauris vel est.
</ P>
<P>
Suspendisse eu nisl. Nullam ut líbero. Entero dignissim consequat lectus.
Clase Aptent taciti sociosqu anuncio Litora torquent por conubia nostra, por
inceptos himenaeos.
</ P>
</ Div>
</ Div>
</ Body>
</ Html>
contenido de plegamiento
De forma predeterminada, contraer paneles permanecen siempre una parte está abierta. Para dar a todas las partes se doblan, se pueden establecer collapsible opción de verdad. Haga clic en la sección actualmente abierto al colapso de su panel de contenido.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> jQuery UI acordeón (acordeón) - contenido plegable </ 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 ({
colapsable: true
});
});
</ Script>
</ Head>
<Cuerpo>
<Div id = "acordeón">
<H3> Parte 1 </ h3>
<Div>
<P> Mauris mauris ante, blandit et, ultrices una, suscipit eget, quam. Entero ut ñeque. Vivamus nisi metus, vel molestie, gesta en, condimentum sit amet, nunc. Nam un nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum una velita de la UE 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 en laoreet aliquet, mauris turpis porttitor velita, faucibus interdum Tellus libero ac Justo. Vivamus no quam. En suscipit faucibus urna. < / p>
</ Div>
<H3> sección 3 </ h3>
<Div>
<P> Nam enim Risus, molestie et, ac porta, ac aliquam, Risus. Lobortis Quisque. Phasellus pellentesque purus en Massa. Aenean en pede. Phasellus ac libero ac Tellus pellentesque sempre. Sed ac felis. Sed commodo, magna quis lacinia ornare , quam ante aliquam nisi, eu iaculis purus leo venenatis dúos. </ p>
<Ul>
<Li> objeto de lista de </ li>
<Li> Elemento de la lista dos </ li>
<Li> Elemento de lista de tres </ li>
</ Ul>
</ Div>
<H3> Parte 4 </ h3>
<Div>
<P> Cras dictum Pellentesque habitant morbi tristique senectus et Netus et malesuada famas ac turpis egestas Vestibulum ante ipsum primis en faucibus Orci luctus et ultrices posuere cubilia Curae; .. Aenean lacinia mauris vel est </ p> <p> Suspendisse eu nisl. . Nullam ut líbero. Entero dignissim consequat lectus. Clase Aptent taciti sociosqu anuncio Litora torquent por conubia nostra, por inceptos himenaeos. </ p>
</ Div>
</ Div>
</ Body>
</ Html>
Los iconos personalizados
A través de icons opciones para personalizar el icono del título, icons opción de aceptar el título predeterminado y activar la clase de estado (abierto). Utilice el marco de interfaz de usuario CSS de cualquier clase, o crear una clase personalizada para utilizar una imagen de fondo.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> jQuery UI acordeón (acordeón) - icono personalizado </ 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 () {
iconos var = {
header: "ui-icon-circle-arrow-e",
activeHeader: "ui-icon-circle-arrow-s"
};
$ ( "#accordion") .accordion ({
iconos: Iconos
});
$ ( "#toggle") .button (). Haga clic (function () {
if ($ ( "#accordion") .accordion ( "opción", "iconos")) {
$ ( "#accordion") .accordion ( "Opción", "iconos", null);
} Else {
$ ( "#accordion") .accordion ( "Opción", "iconos", iconos);
}
});
});
</ Script>
</ Head>
<Cuerpo>
<Div id = "acordeón">
<H3> Parte 1 </ h3>
<Div>
<P> Mauris mauris ante, blandit et, ultrices una, suscipit eget, quam. Entero ut ñeque. Vivamus nisi metus, vel molestie, gesta en, condimentum sit amet, nunc. Nam un nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum una velita de la UE 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 en laoreet aliquet, mauris turpis porttitor velita, faucibus interdum Tellus libero ac Justo. Vivamus no quam. En suscipit faucibus urna. < / p>
</ Div>
<H3> sección 3 </ h3>
<Div>
<P> Nam enim Risus, molestie et, ac porta, ac aliquam, Risus. Lobortis Quisque. Phasellus pellentesque purus en Massa. Aenean en pede. Phasellus ac libero ac Tellus pellentesque sempre. Sed ac felis. Sed commodo, magna quis lacinia ornare , quam ante aliquam nisi, eu iaculis purus leo venenatis dúos. </ p>
<Ul>
<Li> objeto de lista de </ li>
<Li> Elemento de la lista dos </ li>
<Li> Elemento de lista de tres </ li>
</ Ul>
</ Div>
<H3> Parte 4 </ h3>
<Div>
<P> Cras dictum Pellentesque habitant morbi tristique senectus et Netus et malesuada famas ac turpis egestas Vestibulum ante ipsum primis en faucibus Orci luctus et ultrices posuere cubilia Curae; .. Aenean lacinia mauris vel est </ p> <p> Suspendisse eu nisl. . Nullam ut líbero. Entero dignissim consequat lectus. Clase Aptent taciti sociosqu anuncio Litora torquent por conubia nostra, por inceptos himenaeos. </ p>
</ Div>
</ Div>
<Botón id = "cambiar"> icono de palanca </ botón>
</ Body>
</ Html>
espacio de llenado
Desde el panel de plegado se compone de elementos de bloque, y por defecto, su anchura llena el espacio horizontal disponible. Para llenar el espacio vertical asignado por el contenedor, establece heightStyle opción de "fill" , el guión se ajusta automáticamente la altura del tamaño del panel plegado del contenedor primario.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> jQuery UI acordeón (acordeón) - llenar el espacio </ 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>
# Acordeón-redimensionador {
padding: 10px;
Anchura: 350px;
altura: 220px;
}
</ Style>
<Script>
$ (Function () {
$ ( "#accordion") .accordion ({
heightStyle: "llenar"
});
});
$ (Function () {
$ ( "# Acordeón-redimensionado") .resizable ({
minHeight: 140,
anchoMin: 200,
cambiar el tamaño: function () {
$ ( "#accordion") .accordion ( "Actualizar");
}
});
});
</ Script>
</ Head>
<Cuerpo>
<H3 class = "docs"> reajustar el recipiente exterior: </ h3>
<Div id = "acordeón cambiar el tamaño de" class = "ui-Reproductor-content">
<Div id = "acordeón">
<H3> Parte 1 </ h3>
<Div>
<P> Mauris mauris ante, blandit et, ultrices una, suscipit eget, quam. Entero ut ñeque. Vivamus nisi metus, vel molestie, gesta en, condimentum sit amet, nunc. Nam un nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum una velita de la UE 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 en laoreet aliquet, mauris turpis porttitor velita, faucibus interdum Tellus libero ac Justo. Vivamus no quam. En suscipit faucibus urna. < / p>
</ Div>
<H3> sección 3 </ h3>
<Div>
<P> Nam enim Risus, molestie et, ac porta, ac aliquam, Risus. Lobortis Quisque. Phasellus pellentesque purus en Massa. Aenean en pede. Phasellus ac libero ac Tellus pellentesque sempre. Sed ac felis. Sed commodo, magna quis lacinia ornare , quam ante aliquam nisi, eu iaculis purus leo venenatis dúos. </ p>
<Ul>
<Li> objeto de lista de </ li>
<Li> Elemento de la lista dos </ li>
<Li> Elemento de lista de tres </ li>
</ Ul>
</ Div>
<H3> Parte 4 </ h3>
<Div>
<P> Cras dictum Pellentesque habitant morbi tristique senectus et Netus et malesuada famas ac turpis egestas Vestibulum ante ipsum primis en faucibus Orci luctus et ultrices posuere cubilia Curae; .. Aenean lacinia mauris vel est </ p> <p> Suspendisse eu nisl. . Nullam ut líbero. Entero dignissim consequat lectus. Clase Aptent taciti sociosqu anuncio Litora torquent por conubia nostra, por inceptos himenaeos. </ p>
</ Div>
</ Div>
</ Div>
</ Body>
</ Html>
altura no automáticas
Configuración heightStyle: "content" , de modo que los paneles plegados conservan su altura original.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> jQuery UI acordeón (acordeón) - altura no automática </ 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: "contenido"
});
});
</ Script>
</ Head>
<Cuerpo>
<Div id = "acordeón">
<H3> Parte 1 </ h3>
<Div>
<P> Mauris mauris ante, et blandit, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum una velita de la UE 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 en laoreet aliquet, mauris turpis porttitor velita, faucibus interdum Tellus libero ac Justo. Vivamus no quam. En suscipit faucibus urna. < / p>
</ Div>
<H3> sección 3 </ h3>
<Div>
<P> Nam enim Risus, molestie et, ac porta, ac aliquam, Risus. Lobortis Quisque. Phasellus pellentesque purus en Massa. Aenean en pede. Phasellus ac libero ac Tellus pellentesque sempre. Sed ac felis. Sed commodo, magna quis lacinia ornare , quam ante aliquam nisi, eu iaculis purus leo venenatis dúos. </ p>
<Ul>
<Li> Elemento de lista </ li>
<Li> Elemento de lista </ li>
<Li> Elemento de lista </ li>
<Li> Elemento de lista </ li>
<Li> Elemento de lista </ li>
<Li> Elemento de lista </ li>
<Li> Elemento de lista </ li>
</ Ul>
</ Div>
</ Div>
</ Body>
</ Html>
Cuando la libración abierto
Haga clic en la cabeza se expanda / colapso contenido se divide en varias partes de la lógica, como pestañas (tabs) de la misma. Opcionalmente, puede establecer cuando el ratón pasa si cambiar para abrir las diversas partes del estado activado / desactivado.
etiquetas HTML básicas son una serie de título (etiquetas H3) y la div de contenido, por lo que el contenido se pueden utilizar sin tener que pasar a través de JavaScript.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> jQuery UI acordeón (acordeón) - Al pasar abierta </ 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 ({
evento: "clic hoverintent"
});
});
/ *
* HoverIntent | Copyright 2011 Brian Cherne
* Http://cherne.net/brian/resources/jquery.hoverIntent.html
* Modificado por el equipo de jQuery UI
* /
$ .event.special.hoverintent = {
configuración: function () {
$ (Este) .bind ( "mouseover", jQuery.event.special.hoverintent.handler);
},
desmontaje: function () {
$ (Este) .unbind ( "mouseover", jQuery.event.special.hoverintent.handler);
},
manejador: function (event) {
var CurrentX, CurrentY, tiempo de espera,
args = argumentos,
target = $ (event.target),
previousX = event.pageX,
previousy = event.pageY;
pista function (event) {
CurrentX = event.pageX;
CurrentY = event.pageY;
};
función clear () {
objetivo
.unbind ( "mouseMove", pista)
.unbind ( "mouseout", claro);
clearTimeout (tiempo de espera);
}
manejador function () {
prop var,
orig = evento;
if ((Math.abs (previousX - CurrentX) +
Math.abs (previousy - CurrentY)) <7) {
clear ();
evento = $ .Los ( "hoverintent");
para (prop en original) {
if (! (prop en el evento)) {
evento [prop] = orig [prop];
}
}
// Impedir el acceso al evento original, debido a que el nuevo evento se activará de forma asíncrona, el viejo caso ya no está disponible (# 6028)
Eliminar event.originalEvent;
target.trigger (evento);
} Else {
previousX = CurrentX;
previousy = CurrentY;
timeout = setTimeout (manipulador, 100);
}
}
timeout = setTimeout (manipulador, 100);
target.bind ({
mousemove: pista
mouseout: clara
});
}
};
</ Script>
</ Head>
<Cuerpo>
<Div id = "acordeón">
<H3> Parte 1 </ h3>
<Div>
<P>
Mauris mauris ante, et blandit, ultrices una, suscipit eget, quam. Entero
ut ñeque. Vivamus nisi metus, vel molestie, gesta en, sentarse condimentum
amet, nunc. Nam un nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum una velita de la UE ante scelerisque vulputate.
</ P>
</ Div>
<H3> Parte 2 </ h3>
<Div>
<P>
no urna de sed. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor en laoreet aliquet, mauris turpis porttitor
velita, faucibus interdum Tellus libero ac Justo. Vivamus no quam. En
suscipit faucibus urna.
</ P>
</ Div>
<H3> sección 3 </ h3>
<Div>
<P>
Nam enim Risus, et molestie, ac porta, ac aliquam, Risus. Lobortis Quisque.
Phasellus pellentesque purus en Massa. Aenean en pede. Ac libero Phasellus
ac semper Tellus pellentesque. Sed ac felis. Sed commodo, magna quis
ornare Lacinia, quam ante aliquam nisi, eu iaculis purus leo venenatis dúos.
</ P>
<Ul>
<Li> objeto de lista de </ li>
<Li> Elemento de la lista dos </ li>
<Li> Elemento de lista de tres </ li>
</ Ul>
</ Div>
<H3> Parte 4 </ h3>
<Div>
<P>
Cras dictum. Pellentesque habitant morbi tristique senectus et Netus
et famas malesuada ac egestas turpis. Vestibulum ante ipsum primis en
faucibus Orci luctus et ultrices posuere cubilia Curae; lacinia Aenean
mauris vel est.
</ P>
<P>
Suspendisse eu nisl. Nullam ut líbero. Entero dignissim consequat lectus.
Clase Aptent taciti sociosqu anuncio Litora torquent por conubia nostra, por
inceptos himenaeos.
</ P>
</ Div>
</ Div>
</ Body>
</ Html>
Ordenar (Asc)
Arrastre el título al panel de reordenar.
<! DOCTYPE html>
<Html lang = "es">
<Head>
<Charset Meta = "UTF-8">
<Título> jQuery UI acordeón (acordeón) - clasificación (Asc) </ 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>
/ * En el pedido, no hay problemas de diseño de IE (véase # 5413) * /
.grupo {zoom: 1}
</ Style>
<Script>
$ (Function () {
$ ( "#accordion")
.accordion ({
Header "> div> h3"
})
.sortable ({
eje: "y",
manejar: "H3",
parada: function (event, ui) {
// Al ordenar, es decir, puede no ser la falta de definición registrado, por lo que el gatillo focusOut controlador para eliminar .ui por el estado de enfoque
ui.item.children ( "h3") .triggerHandler ( "focusOut");
}
});
});
</ Script>
</ Head>
<Cuerpo>
<Div id = "acordeón">
<Div class = "grupo">
<H3> Parte 1 </ h3>
<Div>
<P> Mauris mauris ante, blandit et, ultrices una, suscipit eget, quam. Entero ut ñeque. Vivamus nisi metus, vel molestie, gesta en, condimentum sit amet, nunc. Nam un nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum una velita de la UE ante scelerisque vulputate. </ p>
</ Div>
</ Div>
<Div class = "grupo">
<H3> Parte 2 </ h3>
<Div>
<P> Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor en laoreet aliquet, mauris turpis porttitor velita, faucibus interdum Tellus libero ac Justo. Vivamus no quam. En suscipit faucibus urna. < / p>
</ Div>
</ Div>
<Div class = "grupo">
<H3> sección 3 </ h3>
<Div>
<P> Nam enim Risus, molestie et, ac porta, ac aliquam, Risus. Lobortis Quisque. Phasellus pellentesque purus en Massa. Aenean en pede. Phasellus ac libero ac Tellus pellentesque sempre. Sed ac felis. Sed commodo, magna quis lacinia ornare , quam ante aliquam nisi, eu iaculis purus leo venenatis dúos. </ p>
<Ul>
<Li> objeto de lista de </ li>
<Li> Elemento de la lista dos </ li>
<Li> Elemento de lista de tres </ li>
</ Ul>
</ Div>
</ Div>
<Div class = "grupo">
<H3> Parte 4 </ h3>
<Div>
<P> Cras dictum Pellentesque habitant morbi tristique senectus et Netus et malesuada famas ac turpis egestas Vestibulum ante ipsum primis en faucibus Orci luctus et ultrices posuere cubilia Curae; .. Aenean lacinia mauris vel est </ p> <p> Suspendisse eu nisl. . Nullam ut líbero. Entero dignissim consequat lectus. Clase Aptent taciti sociosqu anuncio Litora torquent por conubia nostra, por inceptos himenaeos. </ p>
</ Div>
</ Div>
</ Div>
</ Body>
</ Html>