Dev (Back & Front)ARTIGO
Trabalhando com Accordion
Mauricio JuniorAutor
03 de novembro de 2009 às 10:00
7 min de leitura
Olá, pessoal,
gostaria de mostrar um pouco com este artigo como trabalhar com
o accordion de forma dinâmica. Veja o resultado final na imagem de referência 1.1.
Imagem 1.1
Ao clicar no item minimizado,
automaticamente ele é maximizado e mostra o conteúdo dentro de cada aba, isto é, como
se fosse aba. Note também que em cada aba tem uma
cor escura quando está minimizada e, quando a abrimos, a cor fica mais clara. Fiz
isso com o CSS style e no decorrer do texto mostrarei isso.
Requisitos:
- Tecnologia:
ASP.NET - Ferramenta:
Visual Studio .NET 2008 - Componentes:
Ajax
Primeiro passo
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"<br /> TagPrefix="cc1"<br /> %>Code 1.1
O code 1.1 mostra apenas que tenho que
ter no início da página o registro do ajaxControlToolkit. Esse componente é do
ASP.NET Ajax Control Toolkit, veja aqui. Existem vídeos explicando
como trabalhar com alguns componentes, porém tudo em inglês. Veja também o
site www.asp.net.
Segundo passo
<asp:UpdatePanel ID="UpdatePanel1" runat="server"><br /><br /> <ContentTemplate><br /><br /><br /><br /> <asp:UpdateProgress ID="updateProgressGrid" runat="server"><br /><br /> <ProgressTemplate><br /><br /> <div id="imgProgress"><br /><br /> <img src="/images/updateprogress.gif" /><br /><br /> </div><br /><br /> </ProgressTemplate><br /><br /> </asp:UpdateProgress><br /><br /> </ContentTemplate><br /><br /></asp:UpdatePanel>Code 1.2
No code 1.2 eu mostro apenas que
adicionei o <asp:UpdatePanel>, <ContentTemplate> e o
<asp:UpdateProgress>. Esse componente <cc1:Accordion> fica dentro do
controle ContentTemplate. Logo após o
</asp:UpdateProgress> eu coloquei o comando <cc1:Accordion>.
Veja o Code 1.3.
<cc1:Accordion<br /><br /> ID="MyAccordion"<br /><br /> runat="Server"<br /><br /> SelectedIndex="2"<br /><br /> HeaderCssClass="accordionHeader"<br /><br /> HeaderSelectedCssClass="accordionHeaderSelected"<br /><br /> ContentCssClass="accordionContent"<br /><br /> AutoSize="None"<br /><br /> FadeTransitions="true"<br /><br /> TransitionDuration="250"<br /><br /> FramesPerSecond="40"<br /><br /> RequireOpenedPane="false"<br /><br /> SuppressHeaderPostbacks="true"><br /><br /> <Panes><br /><br /> <cc1:AccordionPane ID="SobreAutor" runat="server"><br /><br /> <Header>Sobre o Autor</Header><br /><br /> <Content><br /><br /> <asp:Label ID="lblSejaBemVindo" runat="server"></asp:Label><br /><br /> <br /><br /><br /><br /><br /><br /> <b><asp:Label ID="lblObjetivo" runat="server"></asp:Label></b><br /><br /><br /> <asp:Label ID="lblDescObjetivo" runat="server"></asp:Label> <br /><br /><br /><br /><br /> <br /><br /><br /><br /> <b><asp:Label ID="lblFormacao" runat="server"></asp:Label></b><br /><br /><br /> <asp:Label ID="lblDescFormacao" runat="server"></asp:Label><br /><br /> <br /><br /><br /><br /> <b><asp:Label ID="lblAutor" runat="server"></asp:Label></b><br /><br /><br /> <asp:Label ID="lblDescAutor" runat="server"></asp:Label><br /><br /><br /><br /> <br /><br /><br /><br /> <b><asp:Label ID="lblProfessor" runat="server"></asp:Label></b><br /><br /> <br /> <asp:Label ID="lblDescProfessor" runat="server"></asp:Label><br /><br /> <br /><br /><br /><br /> <b><asp:Label ID="lblSitesPublicados" runat="server"></asp:Label></b><br /><br /><br /> <asp:Label ID="lblDescSitesPublicados" runat="server"></asp:Label><br /><br /> <br /><br /><br /><br /> - <a href='http://www.aspneti.com' target=_blank>www.aspneti.com</a> <br /><br /><br /> - <a href='http://www.juliobattisti.com.br/tutoriais/mauricioborges' target=_blank title="www.juliobattisti.com.br"> www.juliobattisti.com.br </a><br /><br /><br /> - <a href='http://www.linhadecodigo.com.br' target="_blank" title="www.linhadecodigo.com.br">www.linhadecodigo.com.br</a><br /><br /><br /> - <a href='http://weblogs.pontonetpt.com/mauriciojunior' target="_blank" title="weblogs.pontonetpt.com/mauriciojunior">weblogs.pontonetpt.com/mauriciojunior</a><br /><br /> <br /><br /><br /><br /><br /><br /> <asp:Label ID="lblDuvida" runat="server"></asp:Label><br /><br /> <a href='<%=System.Configuration.ConfigurationManager.AppSettings["mauriciojunior.org"] %>/Contato.aspx'>contato</a><br /><br /> <br /><br /><br /><br /> </Content><br /><br /> </cc1:AccordionPane> <br /><br /><br /><br /> <cc1:AccordionPane ID="videos" runat="server"><br /><br /> <Header>Vídeos</Header><br /><br /> <Content><br /><br /> <table width:100%;"><br /><br /> <tr><br /><br /> <td><br /><br /> <a href="/images/livros/cd.png" rel="zoom:"><br /><br /> <img src="/images/livros/cd.png" width="200" border="0" /><br /><br /> </a><br /><br /> </td><br /><br /> <td><br /><br /> Criando um Sistema para Celular com Banco de Dados (passo a passo)<br /><br /> <br /><br /><br /><br /> Você quer aprender a criar um sistema que funcione em celular com banco de dados?<br /><br /> <br /><br /><br /><br /> Com a popularização dos celulares nos dias de hoje, desenvolver sistema móvel para empresas e pessoas é uma forma de inovar; você quer inovar no mercado de software?<br /><br /> <br /><br /><br /><br /> Então assista esse vídeo aula, aprenda passo a passo.<br /><br /> <a href="/video-aula/1/Criando+Sistema+Para+Celular+Com+Banco+De+Dados.aspx"><b>Clique e veja gratuitamente</b></a><br /><br /> </td><br /><br /> </tr><br /><br /> <tr><td colspan="2"><hr size="1" /></td></tr><br /><br /> <tr><br /><br /> <td valign="top"><br /><br /> <a href="/images/livros/vss.jpg" rel="zoom:"><br /><br /> <img src="/images/livros/vss.jpg" width="200" border="0" /><br /><br /> </a><br /><br /> </td><br /><br /> <td><br /><br /> Série de vídeos mostrando como trabalhar com Visual Source Safe (grátis)<br /><br /> <br /><br /><br /><br /> Quer aprender a trabalhar com versionador de código, arquivo, programa ou qualquer outra coisa?<br /><br /> <br /><br /><br /><br /> Quer aprender como colocar versões de arquivos e gravar com segurança?<br /><br /> <br /><br /><br /><br /> Você é desenvolvedor de software e precisa colocar uma equipe trabalhando em um mesmo projeto sem perder que o que está sendo feito?<br /><br /> <br /><br /><br /><br /> Então assista esse vídeo aula, aprenda passo a passo, GRATUITAMENTE. <br /><br /><br /><br /> Então assista esse vídeo aula, aprenda passo a passo.<br /><br /> <a href="/video-aula/2/Visual+Source+Safe.aspx"><b>Clique e veja gratuitamente</b></a><br /><br /> </td><br /><br /> </tr><br /><br /> </table><br /><br /> </Content><br /><br /> </cc1:AccordionPane><br /><br /><br /><br /> <cc1:AccordionPane ID="LivrosPublicados" runat="server"><br /><br /> <Header>Livros Publicados</Header><br /><br /> <Content><br /><br /> <img src="images/livros/8573935251.jpg" /><br /><br /> <img src="images/livros/9788573935714.jpg" /><br /><br /> <img src="images/livros/aplicativosmoveis.gif" /><br /><br /> <img src="images/livros/image001.jpg" width="120" height="171" /><br /><br /> <img src="images/livros/desenvolvendowebservice.gif" /><br /><br /> <img src="images/livros/programandoemc.gif" /><br /><br /><br /><br /> Livros publicados utilizando a tecnologia .NET, livro falando de asp.net<br /><br /> versão 1.0, 1.1 e 2.0. Exemplos reais colocados passo a passo a você leitor.<br /><br /> Livro específico na tecnologia Mobile e WebService. Tendo mais dúvidas, favor<br /><br /> entrar em contato ou ver no menu ao lado cada livro específico. <br /><br /><br /><br /> Obrigado por acessar o site.<br /><br /> </Content><br /><br /> </cc1:AccordionPane><br /><br /> </Panes> <br /><br /> <HeaderTemplate>...</HeaderTemplate><br /><br /> <ContentTemplate>...</ContentTemplate><br /><br /> </cc1:Accordion> Code 1.3
Dentro do Accordion existem vários
<panes>. Neste exemplo, coloquei três painéis, cada um diferente do outro.
Dentro de cada painel eu posso utilizar outros objetos asp.net sem qualquer
problema.
Precisei primeiro colocar as
propriedades do objeto antes das abas (Referência Code 1.4).
<cc1:Accordion<br /><br /> ID="MyAccordion"<br /><br /> runat="Server"<br /><br /> SelectedIndex="2"<br /><br /> HeaderCssClass="accordionHeader"<br /><br /> HeaderSelectedCssClass="accordionHeaderSelected"<br /><br /> ContentCssClass="accordionContent"<br /><br /> AutoSize="None"<br /><br /> FadeTransitions="true"<br /><br /> TransitionDuration="250"<br /><br /> FramesPerSecond="40"<br /><br /> RequireOpenedPane="false"<br /><br /> SuppressHeaderPostbacks="true">Code 1.4
Note que a propriedade SelectedIndex=2, quer dizer que a minha
terceira aba inicializará aberta, isso porque o índex começa com 0 e não com 1.
Depois coloquei as propriedades do CSSClass, HeaderCssClass para o cabeçalho, HeaderSelectedCssClass para o cabeçalho selecionado e o ContentCssClass para o conteúdo de cada
aba.
Depois adicionei a propriedade frame por
segundo (FramesPerSecond = 40), significa que o tempo é de 40 milissegundos
para abrir.
O passo seguinte foi criar o primeiro
painel (Code 1.5).
<br /><br /><Panes><br /><br /> <cc1:AccordionPane ID="SobreAutor" runat="server"><br /><br /> <Header>Sobre o Autor</Header><br /><br /> <Content><br /><br /> <asp:Label ID="lblSejaBemVindo" runat="server"></asp:Label><br /><br /> <br /><br /><br /><br /><br /><br /> <b><asp:Label ID="lblObjetivo" runat="server"></asp:Label></b><br /><br /><br /> <asp:Label ID="lblDescObjetivo" runat="server"></asp:Label> <br /><br /><br /><br /><br /> <br /><br /><br /><br /> <b><asp:Label ID="lblFormacao" runat="server"></asp:Label></b><br /><br /><br /> <asp:Label ID="lblDescFormacao" runat="server"></asp:Label><br /><br /> <br /><br /><br /><br /> <b><asp:Label ID="lblAutor" runat="server"></asp:Label></b><br /><br /><br /> <asp:Label ID="lblDescAutor" runat="server"></asp:Label><br /><br /><br /><br /> <br /><br /><br /><br /> <b><asp:Label ID="lblProfessor" runat="server"></asp:Label></b><br /><br /> <br /> <asp:Label ID="lblDescProfessor" runat="server"></asp:Label><br /><br /> <br /><br /><br /><br /> <b><asp:Label ID="lblSitesPublicados" runat="server"></asp:Label></b><br /><br /><br /> <asp:Label ID="lblDescSitesPublicados" runat="server"></asp:Label><br /><br /> <br /><br /><br /><br /> - <a href='http://www.aspneti.com' target=_blank>www.aspneti.com</a> <br /><br /><br /> - <a href='http://www.juliobattisti.com.br/tutoriais/mauricioborges' target=_blank title="www.juliobattisti.com.br"> www.juliobattisti.com.br </a><br /><br /><br /> - <a href='http://www.linhadecodigo.com.br' target="_blank" title="www.linhadecodigo.com.br">www.linhadecodigo.com.br</a><br /><br /><br /> - <a href='http://weblogs.pontonetpt.com/mauriciojunior' target="_blank" title="weblogs.pontonetpt.com/mauriciojunior">weblogs.pontonetpt.com/mauriciojunior</a><br /><br /> <br /><br /><br /><br /><br /><br /> <asp:Label ID="lblDuvida" runat="server"></asp:Label><br /><br /> <a href='<%=System.Configuration.ConfigurationManager.AppSettings["mauriciojunior.org"] %>/Contato.aspx'>contato</a><br /><br /> <br /><br /><br /><br /> </Content><br /><br /> </cc1:AccordionPane> Code 1.5
Note que coloquei tags do asp.net
normal como o <asp:Label>.
<cc1:AccordionPane ID="SobreAutor" runat="server"><br /><br /> <Header>Sobre o Autor</Header><br /><br /> <Content>Code 1.6
No Code 1.6 coloquei um id, um
<header> cabeçalho e um conteúdo <Content>, onde coloco todas as
tags normais da página. Antes de fechar o <Panel>, acrescentei mais uma
tag (Code 1.7)
<cc1:AccordionPane ID="videos" runat="server"><br /><br /> <Header>Vídeos</Header><br /><br /> <Content><br /><br /> <table width:100%;"><br /><br /> <tr><br /><br /> <td><br /><br /> <a href="/images/livros/cd.png" rel="zoom:"><br /><br /> <img src="/images/livros/cd.png" width="200" border="0" /><br /><br /> </a><br /><br /> </td><br /><br /> <td><br /><br /> Criando um Sistema para Celular com Banco de Dados (passo a passo)<br /><br /> <br /><br /><br /><br /> Você quer aprender a criar um sistema que funcione em celular com banco de dados?<br /><br /> <br /><br /><br /><br /> Com a popularização dos celulares nos dias de hoje, desenvolver sistema móvel para empresas e pessoas é uma forma de inovar; você quer inovar no mercado de software?<br /><br /> <br /><br /><br /><br /> Então assista esse vídeo aula, aprenda passo a passo.<br /><br /> <a href="/video-aula/1/Criando+Sistema+Para+Celular+Com+Banco+De+Dados.aspx"><b>Clique e veja gratuitamente</b></a><br /><br /> </td><br /><br /> </tr><br /><br /> <tr><td colspan="2"><hr size="1" /></td></tr><br /><br /> <tr><br /><br /> <td valign="top"><br /><br /> <a href="/images/livros/vss.jpg" rel="zoom:"><br /><br /> <img src="/images/livros/vss.jpg" width="200" border="0" /><br /><br /> </a><br /><br /> </td><br /><br /> <td><br /><br /> Série de vídeos mostrando como trabalhar com Visual Source Safe (grátis)<br /><br /> <br /><br /><br /><br /> Quer aprender a trabalhar com versionador de código, arquivo, programa ou qualquer outra coisa?<br /><br /> <br /><br /><br /><br /> Quer aprender como colocar versões de arquivos e gravar com segurança?<br /><br /> <br /><br /><br /><br /> Você é desenvolvedor de software e precisa colocar uma equipe trabalhando em um mesmo projeto sem perder que o que está sendo feito?<br /><br /> <br /><br /><br /><br /> Então assista esse vídeo aula, aprenda passo a passo, GRATUITAMENTE. <br /><br /><br /><br /> Então assista esse vídeo aula, aprenda passo a passo.<br /><br /> <a href="/video-aula/2/Visual+Source+Safe.aspx"><b>Clique e veja gratuitamente</b></a><br /><br /> </td><br /><br /> </tr><br /><br /> </table><br /><br /> </Content><br /><br /> </cc1:AccordionPane>Code 1.7
Utilizei da mesma forma, lembre-se que
só fechei o </cc1:AccordionPane>. Para o final, adicionei mais uma aba
fechando assim todo o componente accordion (Code 1.8).
<cc1:AccordionPane ID="LivrosPublicados" runat="server"><br /><br /> <Header>Livros Publicados</Header><br /><br /> <Content><br /><br /> <img src="images/livros/8573935251.jpg" /><br /><br /> <img src="images/livros/9788573935714.jpg" /><br /><br /> <img src="images/livros/aplicativosmoveis.gif" /><br /><br /> <img src="images/livros/image001.jpg" width="120" height="171" /><br /><br /> <img src="images/livros/desenvolvendowebservice.gif" /><br /><br /> <img src="images/livros/programandoemc.gif" /><br /><br /><br /><br /> Livros publicados utilizando a tecnologia .NET, livro falando de asp.net<br /><br /> versão 1.0, 1.1 e 2.0. Exemplos reais colocados passo a passo a você leitor.<br /><br /> Livro específico na tecnologia Mobile e WebService. Tendo mais dúvidas, favor<br /><br /> entrar em contato ou ver no menu ao lado cada livro específico. <br /><br /><br /><br /> Obrigado por acessar o site.<br /><br /> </Content><br /><br /> </cc1:AccordionPane><br /><br /> </Panes> <br /><br /> <HeaderTemplate>...</HeaderTemplate><br /><br /> <ContentTemplate>...</ContentTemplate><br /><br /> </cc1:Accordion> Code 1.8
No final fechei o </Panes> e os
outros objetos (Code 1.9).
</Panes> <br /><br /><HeaderTemplate>...</HeaderTemplate><br /><br /> <ContentTemplate>...</ContentTemplate><br /><br /> </cc1:Accordion> Code 1.9
Para ficar bonitinho, segue o css que
usei que pega automaticamente as cores de um accordion. Veja o Code 1.10.
/******************************/<br />/**Styling information specific to individual content pages**/<br /><br />/* Accordion */<br />.accordionHeader<br />{<br /> border: 1px solid #2F4F4F;<br /> color: white;<br /> background-color: #2E4d7B;<br /> font-family: Arial, Sans-Serif;<br /> font-size: 12px;<br /> font-weight: bold;<br /> padding: 5px;<br /> margin-top: 5px;<br /> cursor: pointer;<br />}<br /><br />#master_content .accordionHeader a<br />{<br /> color: #FFFFFF;<br /> background: none;<br /> text-decoration: none;<br />}<br /><br />#master_content .accordionHeader a:hover<br />{<br /> background: none;<br /> text-decoration: underline;<br />}<br /><br />.accordionHeaderSelected<br />{<br /> border: 1px solid #2F4F4F;<br /> color: white;<br /> background-color: #5078B3;<br /> font-family: Arial, Sans-Serif;<br /> font-size: 12px;<br /> font-weight: bold;<br /> padding: 5px;<br /> margin-top: 5px;<br /> cursor: pointer;<br />}<br /><br />#master_content .accordionHeaderSelected a<br />{<br /> color: #FFFFFF;<br /> background: none;<br /> text-decoration: none;<br />}<br /><br />#master_content .accordionHeaderSelected a:hover<br />{<br /> background: none;<br /> text-decoration: underline;<br />}<br /><br />.accordionContent<br />{<br /> background-color: #FFF;<br /> border: 1px dashed #2F4F4F;<br /> border-top: none;<br /> padding: 5px;<br /> padding-top: 10px;<br />}Code 1.10
Eu fico por aqui e espero ter ajudado.
Qualquer dúvida pode entrar em contato.
Mauricio JuniorAutor
Com mais de 20 anos trabalhando no mercado de tecnologia. Mestre em Engenharia Elétrica voltada para o mundo mobile, com mais de 20 livros publicados e cerca de 700 artigos publicados com intuito de ajudar àqueles que querem aprender a programar (site, software, desktop, serviços, api e mobile). Site pessoal: https://www.mauriciojunior.net - MVP, MCAD, MCP Microsoft
