jQuery UI exemplo - painel de dobramento (acordeão)
Dentro de uma exibição espaço limitado para a apresentação de conteúdo de informação painel flexível.
Para mais detalhes sobre a parte acordeão, consulte a documentação da API membro do painel de dobragem (um acordeão do Widget) .
A função padrão
Clique na cabeça para expandir / conteúdo colapso é dividido em várias partes da lógica, como abas (tabs) da mesma. Opcionalmente, você pode configurar quando o mouse passa se mudar para abrir as várias partes do estado on / off.
tags HTML básicas são uma série de título (H3 tags) e div de conteúdo, de modo que o conteúdo pode ser usado sem passar pelo JavaScript.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> acordeão jQuery UI (Acordeão) - A função padrão </ 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 = "acordeão">
<H3> Parte 1 </ h3>
<Div>
<P>
Mauris mauris ante, blandit et, ultrices um, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gesta em, condimentum sentar
amet, nunc. Nam um nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum um 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 em laoreet aliquet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus não quam. Em
suscipit faucibus urna.
</ P>
</ Div>
<H3> seção 3 </ h3>
<Div>
<P>
Nam enim risus, molestie et, ac porta, ac aliquam, risus. Quisque lobortis.
Phasellus pellentesque Purus em massa. Aenean em Pede. Phasellus libero ac
ac sempre tellus pellentesque. Sed ac felis. Sed commodo, magna Quis
lacinia Ornare, quam ante aliquam nisi, eu iaculis Purus leo venenatis dui.
</ P>
<Ul>
<Li> item de lista de um </ li>
<Li> item de lista de dois </ li>
<Li> item de lista de três </ li>
</ Ul>
</ Div>
<H3> Parte 4 </ h3>
<Div>
<P>
Cras dictum. Pellentesque habitante morbi tristique senectus et netus
et fames malesuada ac egestas turpis. Vestibulum ante ipsum primis no
faucibus Orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est.
</ P>
<P>
Suspendisse eu NISL. Nullam ut libero. Integer dignissim consequat lectus.
Classe aptent taciti sociosqu ad litora torquent per conubia nostra, por
inceptos himenaeos.
</ P>
</ Div>
</ Div>
</ Body>
</ Html>
conteúdo Folding
Por padrão, contrair painéis sempre uma parte é aberta. Para dar todas as peças são dobradas, pode ser definido collapsible opção de verdade. Clique na seção atualmente aberto para recolher o seu painel de conteúdo.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI acordeão (acordeão) - Teor Folding </ 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 ({
dobrável: true
});
});
</ Script>
</ Head>
<Body>
<Div id = "acordeão">
<H3> Parte 1 </ h3>
<Div>
<P> Mauris mauris ante, blandit et, ultrices um, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gesta em, condimentum sit amet, nunc. Nam um nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum um 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 em laoreet aliquet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus não quam. Em suscipit faucibus urna. < / p>
</ Div>
<H3> seção 3 </ h3>
<Div>
<P> Nam enim risus, molestie et, ac porta, ac aliquam, risus. Quisque lobortis. Phasellus pellentesque Purus em massa. Aenean em 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 dui. </ p>
<Ul>
<Li> item de lista de um </ li>
<Li> item de lista de dois </ li>
<Li> item de lista de três </ li>
</ Ul>
</ Div>
<H3> Parte 4 </ h3>
<Div>
<P> Cras dictum Pellentesque habitante morbi tristique senectus et netus et malesuada fames ac turpis egestas Vestibulum ante ipsum primis no faucibus Orci luctus et ultrices posuere cubilia Curae; .. Aenean lacinia mauris vel est </ p> <p> Suspendisse eu NISL. . Nullam ut libero. Integer dignissim consequat lectus. Classe aptent taciti sociosqu ad litora torquent per conubia nostra, por inceptos himenaeos. </ p>
</ Div>
</ Div>
</ Body>
</ Html>
ícones personalizados
Através icons opções para personalizar o ícone do título, icons opção de aceitar o título padrão e ativar (aberto) classe Estado. Use o quadro UI CSS de qualquer classe, ou criar uma classe personalizada para usar uma imagem de fundo.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI acordeão (acordeão) - ícone 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 () {
var = {ícones
Cabeçalho: "ui-icon-círculo-seta-e",
activeHeader: "ui-icon-círculo-seta-s"
};
$ ( "#accordion") .accordion ({
Ícones: Ícones
});
$ ( "#toggle") .button (). Click (function () {
if ($ ( "#accordion") .accordion ( "Opção", "ícones")) {
$ ( "#accordion") .accordion ( "Opção", "ícones", null);
} Else {
$ ( "#accordion") .accordion ( "Opção", "ícones", ícones);
}
});
});
</ Script>
</ Head>
<Body>
<Div id = "acordeão">
<H3> Parte 1 </ h3>
<Div>
<P> Mauris mauris ante, blandit et, ultrices um, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gesta em, condimentum sit amet, nunc. Nam um nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum um 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 em laoreet aliquet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus não quam. Em suscipit faucibus urna. < / p>
</ Div>
<H3> seção 3 </ h3>
<Div>
<P> Nam enim risus, molestie et, ac porta, ac aliquam, risus. Quisque lobortis. Phasellus pellentesque Purus em massa. Aenean em 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 dui. </ p>
<Ul>
<Li> item de lista de um </ li>
<Li> item de lista de dois </ li>
<Li> item de lista de três </ li>
</ Ul>
</ Div>
<H3> Parte 4 </ h3>
<Div>
<P> Cras dictum Pellentesque habitante morbi tristique senectus et netus et malesuada fames ac turpis egestas Vestibulum ante ipsum primis no faucibus Orci luctus et ultrices posuere cubilia Curae; .. Aenean lacinia mauris vel est </ p> <p> Suspendisse eu NISL. . Nullam ut libero. Integer dignissim consequat lectus. Classe aptent taciti sociosqu ad litora torquent per conubia nostra, por inceptos himenaeos. </ p>
</ Div>
</ Div>
<Button id = "toggle"> ícone de alternância </ button>
</ Body>
</ Html>
espaço de enchimento
Uma vez que o painel de dobramento é composto por elementos de bloco e, por padrão sua largura preenche o espaço horizontal disponível. Para preencher o espaço vertical alocado pelo contêiner, definido heightStyle opção "fill" , o script irá definir automaticamente a altura do tamanho do painel de dobramento do recipiente pai.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> acordeão jQuery UI (Acordeão) - preencher o espaço </ 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ão-resizer {
padding: 10px;
width: 350px;
height: 220px;
}
</ Style>
<Script>
$ (Function () {
$ ( "#accordion") .accordion ({
heightStyle: "encher"
});
});
$ (Function () {
$ ( "# Acordeão-resizer") .resizable ({
minHeight: 140,
minWidth: 200,
redimensionar: function () {
$ ( "#accordion") .accordion ( "Atualizar");
}
});
});
</ Script>
</ Head>
<Body>
<H3 class = "docs"> reajustar o recipiente externo: </ h3>
<Div id = "acordeão-resizer" class = "ui-widget-content">
<Div id = "acordeão">
<H3> Parte 1 </ h3>
<Div>
<P> Mauris mauris ante, blandit et, ultrices um, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gesta em, condimentum sit amet, nunc. Nam um nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum um 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 em laoreet aliquet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus não quam. Em suscipit faucibus urna. < / p>
</ Div>
<H3> seção 3 </ h3>
<Div>
<P> Nam enim risus, molestie et, ac porta, ac aliquam, risus. Quisque lobortis. Phasellus pellentesque Purus em massa. Aenean em 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 dui. </ p>
<Ul>
<Li> item de lista de um </ li>
<Li> item de lista de dois </ li>
<Li> item de lista de três </ li>
</ Ul>
</ Div>
<H3> Parte 4 </ h3>
<Div>
<P> Cras dictum Pellentesque habitante morbi tristique senectus et netus et malesuada fames ac turpis egestas Vestibulum ante ipsum primis no faucibus Orci luctus et ultrices posuere cubilia Curae; .. Aenean lacinia mauris vel est </ p> <p> Suspendisse eu NISL. . Nullam ut libero. Integer dignissim consequat lectus. Classe aptent taciti sociosqu ad litora torquent per conubia nostra, por inceptos himenaeos. </ p>
</ Div>
</ Div>
</ Div>
</ Body>
</ Html>
altura não automático
Definindo heightStyle: "content" , de modo que os painéis dobrados conservam a sua altura original.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI acordeão (acordeão) - altura não 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: "conteúdo"
});
});
</ Script>
</ Head>
<Body>
<Div id = "acordeão">
<H3> Parte 1 </ h3>
<Div>
<P> Mauris mauris ante, blandit et, ultrices, um susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum um 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 em laoreet aliquet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus não quam. Em suscipit faucibus urna. < / p>
</ Div>
<H3> seção 3 </ h3>
<Div>
<P> Nam enim risus, molestie et, ac porta, ac aliquam, risus. Quisque lobortis. Phasellus pellentesque Purus em massa. Aenean em 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 dui. </ p>
<Ul>
<Li> item da lista </ li>
<Li> item da lista </ li>
<Li> item da lista </ li>
<Li> item da lista </ li>
<Li> item da lista </ li>
<Li> item da lista </ li>
<Li> item da lista </ li>
</ Ul>
</ Div>
</ Div>
</ Body>
</ Html>
Quando pairar aberta
Clique na cabeça para expandir / conteúdo colapso é dividido em várias partes da lógica, como abas (tabs) da mesma. Opcionalmente, você pode configurar quando o mouse passa se mudar para abrir as várias partes do estado on / off.
tags HTML básicas são uma série de título (H3 tags) e div de conteúdo, de modo que o conteúdo pode ser usado sem passar pelo JavaScript.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI acordeão (acordeão) - Quando pairando aberta </ 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: "clique hoverIntent"
});
});
/ *
* HoverIntent | Copyright 2011 Brian Cherne
* Http://cherne.net/brian/resources/jquery.hoverIntent.html
* Modificado pela equipe jQuery UI
* /
$ .event.special.hoverintent = {
setup: function () {
$ (Este) .bind ( "mouseover", jQuery.event.special.hoverintent.handler);
},
desmontagem: function () {
$ (Este) .unbind ( "mouseover", jQuery.event.special.hoverintent.handler);
},
handler: function (event) {
var CurrentX, currenty, tempo limite,
args = argumentos,
target = $ (event.target),
previousX = event.pageX,
previousY = event.pageY;
trilha function (event) {
CurrentX = event.pageX;
currenty = event.pageY;
};
função clear () {
alvo
.unbind ( "mouseMove", faixa)
.unbind ( "mouseout", claro);
clearTimeout (timeout);
}
handler function () {
var prop,
orig = evento;
if ((Math.abs (previousX - CurrentX) +
Math.abs (previousY - currenty)) <7) {
clear ();
event = $ .Event ( "hoverIntent");
para (prop no orig) {
if (! (prop no evento)) {
evento [prop] = orig [prop];
}
}
// Impedir o acesso ao evento original, porque o novo evento será acionado de forma assíncrona, o evento velho não está mais disponível (# 6028)
eliminar event.originalEvent;
target.trigger (evento);
} Else {
previousX = CurrentX;
previousY = currenty;
timeout = setTimeout (manipulador, 100);
}
}
timeout = setTimeout (manipulador, 100);
target.bind ({
mousemove: trilha,
mouseout: clara
});
}
};
</ Script>
</ Head>
<Body>
<Div id = "acordeão">
<H3> Parte 1 </ h3>
<Div>
<P>
Mauris mauris ante, blandit et, ultrices um, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gesta em, condimentum sentar
amet, nunc. Nam um nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum um 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 em laoreet aliquet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus não quam. Em
suscipit faucibus urna.
</ P>
</ Div>
<H3> seção 3 </ h3>
<Div>
<P>
Nam enim risus, molestie et, ac porta, ac aliquam, risus. Quisque lobortis.
Phasellus pellentesque Purus em massa. Aenean em Pede. Phasellus libero ac
ac sempre tellus pellentesque. Sed ac felis. Sed commodo, magna Quis
lacinia Ornare, quam ante aliquam nisi, eu iaculis Purus leo venenatis dui.
</ P>
<Ul>
<Li> item de lista de um </ li>
<Li> item de lista de dois </ li>
<Li> item de lista de três </ li>
</ Ul>
</ Div>
<H3> Parte 4 </ h3>
<Div>
<P>
Cras dictum. Pellentesque habitante morbi tristique senectus et netus
et fames malesuada ac egestas turpis. Vestibulum ante ipsum primis no
faucibus Orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est.
</ P>
<P>
Suspendisse eu NISL. Nullam ut libero. Integer dignissim consequat lectus.
Classe aptent taciti sociosqu ad litora torquent per conubia nostra, por
inceptos himenaeos.
</ P>
</ Div>
</ Div>
</ Body>
</ Html>
Sort (Ordenável)
Arraste o título para o painel para reorganizar.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI acordeão (acordeão) - classificação (Ordenável) </ 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>
/ * Ao fazer o pedido, não há problemas de layout do IE (ver # 5413) * /
.group {zoom: 1}
</ Style>
<Script>
$ (Function () {
$ ( "#accordion")
.accordion ({
Cabeçalho: "> div> h3"
})
.sortable ({
eixo "y",
punho: "h3",
parar: function (evento, ui) {
// Quando você tipo, o IE não pode ser registrado borrão, assim que o gatilho focusOut manipulador para remover-estado-foco .ui
ui.item.children ( "H3") .triggerHandler ( "focusOut");
}
});
});
</ Script>
</ Head>
<Body>
<Div id = "acordeão">
<Div class = "grupo">
<H3> Parte 1 </ h3>
<Div>
<P> Mauris mauris ante, blandit et, ultrices um, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gesta em, condimentum sit amet, nunc. Nam um nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum um velit eu 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 em laoreet aliquet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus não quam. Em suscipit faucibus urna. < / p>
</ Div>
</ Div>
<Div class = "grupo">
<H3> seção 3 </ h3>
<Div>
<P> Nam enim risus, molestie et, ac porta, ac aliquam, risus. Quisque lobortis. Phasellus pellentesque Purus em massa. Aenean em 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 dui. </ p>
<Ul>
<Li> item de lista de um </ li>
<Li> item de lista de dois </ li>
<Li> item de lista de três </ li>
</ Ul>
</ Div>
</ Div>
<Div class = "grupo">
<H3> Parte 4 </ h3>
<Div>
<P> Cras dictum Pellentesque habitante morbi tristique senectus et netus et malesuada fames ac turpis egestas Vestibulum ante ipsum primis no faucibus Orci luctus et ultrices posuere cubilia Curae; .. Aenean lacinia mauris vel est </ p> <p> Suspendisse eu NISL. . Nullam ut libero. Integer dignissim consequat lectus. Classe aptent taciti sociosqu ad litora torquent per conubia nostra, por inceptos himenaeos. </ p>
</ Div>
</ Div>
</ Div>
</ Body>
</ Html>