🔥 Apps, books, system as a service, podcast and more
🎓 ecode10.com

Curso de HTML na prática


Trabalhando com o componente Accordion

ASP.NET
Saturday, January 1, 2011
Columnist: Mauricio Junior
Views: 7504

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

        <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

         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>

                    <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='' 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>


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>


         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


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



Sign up to our newsletter

Receive our latest updates about programming languages, software, database, books, ebooks, classes, jobs and more.

Related articles

Top