Trabalhando com o componente Accordion

por Mauricio Junior em 1/1/2011 0

Olá pessoal, gostaria de mostrar um pouco com este artigo; como trabalhar passo a passo com o accordion de forma dinâmica e simples. Veja o resultado final na imagem de referência 1.1.

Requisitos:

- Tecnologia: ASP.NET

- Ferramenta: Visual Studio .NET 2008

- Componentes: Ajax

Imagem 1.1

Ao clicar no item minimizado, automaticamente maximiza 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 abre, a cor fica mais clara. Fiz isso com o CSS style e no decorrer do texto, mostrarei como foi feito.

Primeiro passo

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

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 localizado no endereço (http://www.asp.net/ajax/ajaxcontroltoolkit/samples/). 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">

<asp:UpdateProgress ID="updateProgressGrid" runat="server">

</div>

</ProgressTemplate>

</asp:UpdateProgress>

</ContentTemplate>

</asp:UpdatePanel>

Code 1.2

O 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>. Referência Code 1.3.

<cc1:Accordion

ID="MyAccordion"

runat="Server"

SelectedIndex="2"

HeaderCssClass="accordionHeader"

HeaderSelectedCssClass="accordionHeaderSelected"

ContentCssClass="accordionContent"

AutoSize="None"

FadeTransitions="true"

TransitionDuration="250"

FramesPerSecond="40"

RequireOpenedPane="false"

SuppressHeaderPostbacks="true">

<Panes>

<cc1:AccordionPane ID="SobreAutor" runat="server">

<Header>Sobre o Autor</Header>

<asp:Label ID="lblSejaBemVindo" runat="server"></asp:Label>

<asp:Label ID="lblObjetivo" runat="server"></asp:Label>

<asp:Label ID="lblDescObjetivo" runat="server"></asp:Label>

<asp:Label ID="lblFormacao" runat="server"></asp:Label>

<asp:Label ID="lblDescFormacao" runat="server"></asp:Label>

<asp:Label ID="lblAutor" runat="server">

</asp:Label>

<asp:Label ID="lblDescAutor" runat="server"></asp:Label>

<asp:Label ID="lblProfessor" runat="server"></asp:Label>

<asp:Label ID="lblDescProfessor" runat="server"></asp:Label>

<asp:Label ID="lblSitesPublicados" runat="server"></asp:Label>

<asp:Label ID="lblDescSitesPublicados" runat="server"></asp:Label>

- <a href='http://www.aspneti.com' target=_blank>www.aspneti.com</a>

- <a href='http://www.juliobattisti.com.br/tutoriais/mauricioborges' target=_blank title="www.juliobattisti.com.br"> www.juliobattisti.com.br </a>

- <a href='http://www.linhadecodigo.com.br' target="_blank" title="www.linhadecodigo.com.br">www.linhadecodigo.com.br</a>

- <a href='' target="_blank" title="weblogs.pontonetpt.com/mauriciojunior">weblogs.pontonetpt.com/mauriciojunior</a>

<asp:Label ID="lblDuvida" runat="server"></asp:Label>

<a href='<%=System.Configuration.ConfigurationManager.AppSettings["mauriciojunior.org"] %>/Contato.aspx'>contato</a>

</Content>

</cc1:AccordionPane>

<cc1:AccordionPane ID="videos" runat="server">

<Header>Vídeos</Header>

<tr>

<td>

</a>

</td>

<td>

Criando um Sistema para Celular com Banco de Dados (passo a passo)

Você quer aprender a criar um sistema que funcione em celular com banco de dados?

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?

Então assista esse vídeo aula, aprenda passo a passo.

<a href="/video-aula/1/Criando+Sistema+Para+Celular+Com+Banco+De+Dados.aspx">Clique e veja gratuitamente</a>

</td>

</tr>

<tr>

</a>

</td>

<td>

Série de vídeos mostrando como trabalhar com Visual Source Safe (grátis)

Quer aprender a trabalhar com versionador de código, arquivo, programa ou qualquer outra coisa?

Quer aprender como colocar versões de arquivos e gravar com segurança?

Você é desenvolvedor de software e precisa colocar uma equipe trabalhando em um mesmo projeto sem perder que o que está sendo feito?

Então assista esse vídeo aula, aprenda passo a passo, GRATUITAMENTE.

Então assista esse vídeo aula, aprenda passo a passo.

<a href="/video-aula/2/Visual+Source+Safe.aspx">Clique e veja gratuitamente</a>

</td>

</tr>

</table>

</Content>

</cc1:AccordionPane>

<cc1:AccordionPane ID="LivrosPublicados" runat="server">

<Header>Livros Publicados</Header>

Livros publicados utilizando a tecnologia .NET, livro falando de asp.net

versão 1.0, 1.1 e 2.0. Exemplos reais colocados passo a passo a você leitor.

Livro específico na tecnologia Mobile e WebService. Tendo mais dúvidas, favor

entrar em contato ou ver no menu ao lado cada livro específico.

Obrigado por acessar o site.

</Content>

</cc1:AccordionPane>

</Panes>

</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

ID="MyAccordion"

runat="Server"

SelectedIndex="2"

HeaderCssClass="accordionHeader"

HeaderSelectedCssClass="accordionHeaderSelected"

ContentCssClass="accordionContent"

AutoSize="None"

FadeTransitions="true"

TransitionDuration="250"

FramesPerSecond="40"

RequireOpenedPane="false"

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)

<Panes>

<cc1:AccordionPane ID="SobreAutor" runat="server">

<Header>Sobre o Autor</Header>

<asp:Label ID="lblSejaBemVindo" runat="server"></asp:Label>

<asp:Label ID="lblObjetivo" runat="server"></asp:Label>

<asp:Label ID="lblDescObjetivo" runat="server"></asp:Label>

<asp:Label ID="lblFormacao" runat="server"></asp:Label>

<asp:Label ID="lblDescFormacao" runat="server"></asp:Label>

<asp:Label ID="lblAutor" runat="server"></asp:Label>

<asp:Label ID="lblDescAutor" runat="server"></asp:Label>

<asp:Label ID="lblProfessor" runat="server"></asp:Label>

<asp:Label ID="lblDescProfessor" runat="server"></asp:Label>

<asp:Label ID="lblSitesPublicados" runat="server"></asp:Label>

<asp:Label ID="lblDescSitesPublicados" runat="server"></asp:Label>

- <a href='http://www.aspneti.com' target=_blank>www.aspneti.com</a>

- <a href='http://www.juliobattisti.com.br/tutoriais/mauricioborges' target=_blank title="www.juliobattisti.com.br"> www.juliobattisti.com.br </a>

- <a href='http://www.linhadecodigo.com.br' target="_blank" title="www.linhadecodigo.com.br">www.linhadecodigo.com.br</a>

- <a href='http://weblogs.pontonetpt.com/mauriciojunior' target="_blank" title="weblogs.pontonetpt.com/mauriciojunior">weblogs.pontonetpt.com/mauriciojunior</a>

<asp:Label ID="lblDuvida" runat="server"></asp:Label>

<a href='<%=System.Configuration.ConfigurationManager.AppSettings["mauriciojunior.org"] %>/Contato.aspx'>contato</a>

</Content>

</cc1:AccordionPane>

Note que, coloquei tags do asp.net normal como o <asp:Label>.

<cc1:AccordionPane ID="SobreAutor" runat="server">

<Header>Sobre o Autor</Header>

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">

<Header>Vídeos</Header>

<tr>

<td>

</a>

</td>

<td>

Criando um Sistema para Celular com Banco de Dados (passo a passo)

Você quer aprender a criar um sistema que funcione em celular com banco de dados?

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?

Então assista esse vídeo aula, aprenda passo a passo.

<a href="/video-aula/1/Criando+Sistema+Para+Celular+Com+Banco+De+Dados.aspx">Clique e veja gratuitamente</a>

</td>

</tr>

<tr>

</a>

</td>

<td>

Série de vídeos mostrando como trabalhar com Visual Source Safe (grátis)

Quer aprender a trabalhar com versionador de código, arquivo, programa ou qualquer outra coisa?

Quer aprender como colocar versões de arquivos e gravar com segurança?

Você é desenvolvedor de software e precisa colocar uma equipe trabalhando em um mesmo projeto sem perder que o que está sendo feito?

Então assista esse vídeo aula, aprenda passo a passo, GRATUITAMENTE.

Então assista esse vídeo aula, aprenda passo a passo.

<a href="/video-aula/2/Visual+Source+Safe.aspx">Clique e veja gratuitamente</a>

</td>

</tr>

</table>

</Content>

</cc1:AccordionPane>

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">

<Header>Livros Publicados</Header>

Livros publicados utilizando a tecnologia .NET, livro falando de asp.net

versão 1.0, 1.1 e 2.0. Exemplos reais colocados passo a passo a você leitor.

Livro específico na tecnologia Mobile e WebService. Tendo mais dúvidas, favor

entrar em contato ou ver no menu ao lado cada livro específico.

Obrigado por acessar o site.

</Content>

</cc1:AccordionPane>

</Panes>

</cc1:Accordion>

Code 1.8

No final fechei o </Panes> e os outros objetos. (Code 1.9)

</Panes>

</cc1:Accordion>

Code 1.9

/* Accordion */

.accordionHeader

    border: 1px solid #2F4F4F;

    color: white;

    background-color: #2E4d7B;

        font-family: Arial, Sans-Serif;

        font-size: 12px;

        font-weight: bold;

    padding: 5px;

    margin-top: 5px;

    cursor: pointer;

#master_content .accordionHeader a

        color: #FFFFFF;

        background: none;

        text-decoration: none;

#master_content .accordionHeader a:hover

        background: none;

        text-decoration: underline;

.accordionHeaderSelected

    border: 1px solid #2F4F4F;

    color: white;

    background-color: #5078B3;

        font-family: Arial, Sans-Serif;

        font-size: 12px;

        font-weight: bold;

    padding: 5px;

    margin-top: 5px;

    cursor: pointer;

#master_content .accordionHeaderSelected a

        color: #FFFFFF;

        background: none;

        text-decoration: none;

#master_content .accordionHeaderSelected a:hover

        background: none;

        text-decoration: underline;

.accordionContent

    background-color: #FFF;

    border: 1px dashed #2F4F4F;

    border-top: none;

    padding: 5px;

    padding-top: 10px;

Code 1.10

Eu fico por aqui e espero ter ajudado. Qualquer dúvida pode entrar em contato pelo site.

voltar comente subir

Download Copy

Mauricio Junior Formado pela Faculdade Anhanguera, Especialista pela FGV (Fundação Getúlio Vargas), Pós-Graduação em Docência Superior e cursando Mestrado na UNB Engenharia Elétrica; .
Tenho 29 anos e possuo sete livros publicados pela editora Ciência Moderna. Sou Certificado Microsoft MCP, MCAD e MVP, faço parte da comunidade ASPNETI.COM, ECODE10.COM, onde publico artigos, vídeos, ebooks e livros Publico artigos, vídeos e podcast em outras comunidades. Trabalho como Analista de Sistemas / Desenvolvedor na empresa ATP S/A. Blog: blog.mauriciojunior.org, Site pessoal www.mauriciojunior.org