Widget de layout jQuery EasyUI - Painel vezes acordeão
Por $ .fn.accordion.defaults substituir os padrões predefinidos.
painel (acordeão) dobrável permite-lhe fornecer uma pluralidade de painéis (painel), enquanto um ou mais painéis de exibição (painel). Cada painel (painel) se expandiu e suporte built-in em colapso. Clique no painel (painel) da cabeça para expandir ou contrair painéis corpo (painel). Painel de conteúdo (painel) pode ser carregado via ajax designado atributo 'href'. User-definíveis painel selecionado (painel). Se especificado, o padrão é selecionado o primeiro painel (painel).
depender
- painel
uso
Criar painel de dobragem (acordeão)
Criado por marcação painel de dobramento (acordeão), adicione 'easyui-sanfona' classe para a tag <div>.
<Div id = classe "aa" = "easyui-acordeão" style = "width: 300px; height: 200px;"> <Título Div = "title1"-opções de dados = "iconCls: 'icon-salvar" style = "overflow: auto; padding: 10px;"> <H3 style = "color: # 0099FF;"> Acordeão por jQuery </ h3> <P> Acordeão é uma parte do quadro easyui para jQuery. Ele permite que você defina o seu componente acordeão na página web com mais facilidade. </ P> </ Div> <title =-opções de dados Div "title2" = "iconCls: 'icon-reload', selecionados: true" style = "padding: 10px;"> content2 </ Div> <Title Div = "TITLE3"> conteúdo3 </ Div> </ Div>
Nós podemos mudar ou painéis de dobrar re-(acordeão), a modificação de algumas propriedades.
$ ( "# Aa '). Acordeão ({ animar: false });
Atualizar o painel de dobragem (Painel acordeão) conteúdo
Chamar o método 'getSelected' para obter o painel atual (painel), então podemos chamar o painel (painel) do método 'refresh' para carregar um novo conteúdo.
var pp = $ ( '# aa') acordeão ( 'getSelected') ;. // obter o painel selecionado (painel) if (pp) { pp.panel ( 'refresh', 'new_content.php'); // chamar método 'refresh' para carregar novos conteúdos}
Opções de contentores
名称 | 类型 | 描述 | 默认值 |
---|---|---|---|
width | number | 折叠面板(Accordion)容器的宽度。 | auto |
height | number | 折叠面板(Accordion)容器的高度。 | auto |
fit | boolean | 设置为 true,就使折叠面板(Accordion)容器的尺寸适应它的父容器。 | false |
border | boolean | 定义是否显示边框。 | true |
animate | boolean | 定义当展开或折叠面板(panel)时是否显示动画效果。 | true |
multiple | boolean | 设置为 true,则可同时展开多个面板(panel)。该属性自版本 1.3.5 起可用。 | false |
selected | number | 初始化选中的面板(panel)索引。该属性自版本 1.3.5 起可用。 | 0 |
Painel de opção (Panel)
painel de dobramento (Acordeão) opções (painel) do painel são herdadas do painel (painel), são os seguintes atributos adicionais:
名称 | 类型 | 描述 | 默认值 |
---|---|---|---|
selected | boolean | 设置为 true 就展开面板(panel)。 | false |
collapsible | boolean | 定义是否显示可折叠按钮。如果设置为 false,将不能通过点击来展开/折叠面板(panel)。 | true |
evento
名称 | 参数 | 描述 |
---|---|---|
onSelect | title,index | 当面板(panel)被选中时触发。 |
onUnselect | title,index | 当面板(panel)未被选中时触发。该事件自版本 1.3.5 起可用。 |
onAdd | title,index | 当添加一个新面板(panel)时触发。 |
onBeforeRemove | title,index | 当移除一个面板(panel)之前触发,返回 false 就取消移除动作。 |
onRemove | title,index | 当移除一个面板(panel)时触发。 |
caminho
名称 | 参数 | 描述 |
---|---|---|
options | none | 返回折叠面板(accordion)的选项。 |
panels | none | 获取全部的面板(panel)。 |
resize | none | 调整折叠面板(accordion)的尺寸。 |
getSelected | none | 获取第一个选中的面板(panel)。 |
getSelections | none | 过去所有选中的面板(panel)。该方法自版本 1.3.5 起可用。 |
getPanel | which | 获取指定的面板(panel)。'which' 参数可以是面板(panel)的标题(title)或索引(index)。 |
getPanelIndex | panel | 获取指定的面板(panel)索引。该方法自版本 1.3 起可用。 下面的实例显示如何获取选中的面板(panel)索引。 var p = $('#aa').accordion('getSelected'); if (p){ var index = $('#aa').accordion('getPanelIndex', p); alert(index); } |
select | which | 选择指定的面板(panel)。'which' 参数可以是面板(panel)的标题(title)或索引(index)。 |
unselect | which | 未选择指定的面板(panel)。'which' 参数可以是面板(panel)的标题(title)或索引(index)。该方法自版本 1.3.5 起可用。 |
add | options | 添加一个新的面板(panel)。默认情况下,新添加的面板(panel)会被选中。如需添加一个未被选中的新面板(panel),请传递 'selected' 属性,并将其设置为 false。 代码实例: $('#aa').accordion('add', { title: 'New Title', content: 'New Content', selected: false }); |
remove | which | 移除指定的面板(panel)。'which' 参数可以是面板(panel)的标题(title)或索引(index)。 |
jQuery EasyUI plug-in