Por uma internet mais criativa e dinâmica

Faça Login ou Cadastre-se
Esqueci a senha

ASP.NET + .NET + Ajax + Visual Studio

Feeds Newsletter
Terça-feira, 03 de novembro de 2009 às 10h00

Trabalhando com Accordion

Faça o curso: jQuery na Prática

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

        <ContentTemplate>



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

                <ProgressTemplate>

                    <div id="imgProgress">

                        <img src="/images/updateprogress.gif" />

                    </div>

                </ProgressTemplate>

            </asp:UpdateProgress>

             </ContentTemplate>

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

            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>

                    <Content>

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

                            <br /><br />



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

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



                            <br /><br />

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

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

                            <br /><br />

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

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



                            <br /><br />

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

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

                            <br /><br />

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

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

                            <br /><br />

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

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

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

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

                            <br /><br />



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

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

                            <br /><br />

                    </Content>

                </cc1:AccordionPane>    



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

                    <Header>Vídeos</Header>

                    <Content>

                        <table width:100%;">

                            <tr>

                                <td>

                                    <a href="/images/livros/cd.png" rel="zoom:">

                                        <img src="/images/livros/cd.png" width="200" border="0" />

                                    </a>

                                </td>

                                <td>

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

                                    <br /><br />

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

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

                                    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"><b>Clique e veja gratuitamente</b></a>

                                </td>

                            </tr>

                            <tr><td colspan="2"><hr size="1" /></td></tr>

                            <tr>

                                <td valign="top">

                                    <a href="/images/livros/vss.jpg" rel="zoom:">

                                        <img src="/images/livros/vss.jpg" width="200" border="0" />

                                    </a>

                                </td>

                                <td>

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

                                    <br /><br />

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

                                    <br /><br />

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

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

                                    Então assista esse vídeo aula, aprenda passo a passo, GRATUITAMENTE. <br /><br />

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

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

                                </td>

                            </tr>

                        </table>

                    </Content>

                </cc1:AccordionPane>



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

                    <Header>Livros Publicados</Header>

                    <Content>

                        <img src="images/livros/8573935251.jpg" />

                        <img src="images/livros/9788573935714.jpg" />

                        <img src="images/livros/aplicativosmoveis.gif" />

                        <img src="images/livros/image001.jpg" width="120" height="171" />

                        <img src="images/livros/desenvolvendowebservice.gif" />

                        <img src="images/livros/programandoemc.gif" /><br /><br />

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

                        Obrigado por acessar o site.

                    </Content>

                </cc1:AccordionPane>

            </Panes>            

            <HeaderTemplate>...</HeaderTemplate>

            <ContentTemplate>...</ContentTemplate>

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

                    <Content>

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

                            <br /><br />



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

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



                            <br /><br />

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

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

                            <br /><br />

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

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



                            <br /><br />

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

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

                            <br /><br />

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

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

                            <br /><br />

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

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

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

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

                            <br /><br />



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

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

                            <br /><br />

                    </Content>

                </cc1:AccordionPane>

Code 1.5

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

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

   <Header>Sobre o Autor</Header>

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

                    <Header>Vídeos</Header>

                    <Content>

                        <table width:100%;">

                            <tr>

                                <td>

                                    <a href="/images/livros/cd.png" rel="zoom:">

                                        <img src="/images/livros/cd.png" width="200" border="0" />

                                    </a>

                                </td>

                                <td>

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

                                    <br /><br />

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

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

                                    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"><b>Clique e veja gratuitamente</b></a>

                                </td>

                            </tr>

                            <tr><td colspan="2"><hr size="1" /></td></tr>

                            <tr>

                                <td valign="top">

                                    <a href="/images/livros/vss.jpg" rel="zoom:">

                                        <img src="/images/livros/vss.jpg" width="200" border="0" />

                                    </a>

                                </td>

                                <td>

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

                                    <br /><br />

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

                                    <br /><br />

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

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

                                    Então assista esse vídeo aula, aprenda passo a passo, GRATUITAMENTE. <br /><br />

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

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

                                </td>

                            </tr>

                        </table>

                    </Content>

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

                    <Header>Livros Publicados</Header>

                    <Content>

                        <img src="images/livros/8573935251.jpg" />

                        <img src="images/livros/9788573935714.jpg" />

                        <img src="images/livros/aplicativosmoveis.gif" />

                        <img src="images/livros/image001.jpg" width="120" height="171" />

                        <img src="images/livros/desenvolvendowebservice.gif" />

                        <img src="images/livros/programandoemc.gif" /><br /><br />

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

                        Obrigado por acessar o site.

                    </Content>

                </cc1:AccordionPane>

            </Panes>           

            <HeaderTemplate>...</HeaderTemplate>

            <ContentTemplate>...</ContentTemplate>

        </cc1:Accordion>

Code 1.8

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

 </Panes>           

<HeaderTemplate>...</HeaderTemplate>

            <ContentTemplate>...</ContentTemplate>

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

/******************************/
/**Styling information specific to individual content pages**/

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

Nenhum comentário até agora

Cancelar resposta

Qual a sua opinião?

Faça login abaixo ou cadastre-se rapidamente.


Sobre o Autor
Mauricio Junior formado pela Faculdade Anhanguera, Especialista pela FGV (Fundação Getúlio Vargas), Pós-Graduação em Docência Superior e mestrando na UNB, linha de pesquisa Desenvolvimento de Aplicativos para TV Digital. Com 26 anos, possui cinco livros publicados pela editora Ciência Moderna no ano de 2007. É certificado Microsoft MCP e MCAD. Trabalho como Consultor de TI na Brasil Telecom. Blog: blog.mauriciojunior.org, site pessoal www.mauriciojunior.org
Indique para um amigo
iMasters Shop
Professional ASP.NET Ajax R$ 64,90
ASP.NET Utilizando C# - De Programador para Programador R$ 89,00
ASP.NET AJAX em Ação R$ 109,65
CD-ROM Curso Completo - Dreamweaver MX 2004 R$ 44,90
Superdownloads
Visual J# 2005 Express Edition - Implementação própria do Java que só roda em .Net mas que vem com todos os quitutes das grandes linguagens de...
.Net Chart Control 3.5.1 - Com cerca de 40 gráficos 2D e 3D, este é o programa gráfico mais avançado para aplicações .NET 3,0 WPF
ASP.NET Maker 7.1.0 - Gere páginas em ASP.NET a partir de seu banco de dados do Access, SQL Server, Oracle e qualquer outro compatível com ADO ou ADBC
Blueshell Active Tables for .NET 3.00.0009 - Programa para conectar aplicações criadas com tecnologia .NET a vários bancos de dados, incluindo Oracle,...
DotNetResourcesExtract 1.00 - Extraia recursos como imagens, cursores, ícones e mais de arquivos executáveis do Windows como EXE e DLL de aplicativos...

2001 - iMasters FFPA Informática Ltda - Todos os direitos reservados.