Série: Ajax Control Toolkit – Tutoriais – Accordion

Galera, sejam bem vindos! Hoje vamos começar pra valer nossa série do Ajax Control Toolkit e abordaremos o uso do Accordion.

Primeiro vou iniciar descrevendo as propriedades do accordion pane.

  • SelectedIndex – O AccordionPane que iniciará com as informações visíveis ou p´re-selecionado.
  • HeaderCssClass – Nome da classe CSS para usar nos cabeçalhos. Este pode ser aplicado ao Accordion como um padrão para todos os AccordionPanes, ou um AccordionPane individual.
  • HeaderSelectedCssClass – Nome da classe CSS para usar para o Accordion selecionado. Também pode ser aplicado para um ou para todos os AccordionPanes.
  • ContentCssClass – Nome da classe CSS para usar no body do acordion/conteúdo. Pode ser aplicado a todos.
  • FadeTransitions – ‘True’para  habilitar o efeito de transição Fade/Suave, ou  ‘False’ para transições padrão(sem efeitos de fade).
  • TransitionDuration – Número de milissegundos para animar as transições de um panel para o outro.
  • FramesPerSecond – Número de quadros por segundo usados nas animações de transição, se vai ser um fade lento ou rápido.

  • AutoSize – Restringir o crescimento do Acordeão. Os valores da enumeração AutoSize são descritos acima.
  • None: Ele abre o conteúdo/body do accordion de acordo com o tamanho do texto, e não cria barra de rolagem.
  • Limit: Seta um propriedade do tipo Height: valor/px, permitindo uma barra de rolagem caso o conteúdo ultrapasse o limite em tamanho Height/Vertical.
  • Fill: Mantém um tamanho fixo definido pela propriedade Heigth: valor/px, e caso o texto ultrapasse esse valor pré-definido ai sim, será habilitado a barra de rolagem.
  • RequireOpenedPane – Se o valor = true, a propriedade impede de ao momento do click no próprio cabeçalho, que o painel aberto seja fechado. E permitindo seu fechamento somente se o usuário clicar em outro painel. Se for  ‘False’ pode abrir e fechar o painel clicando em seu próprio cabeçalho. Também é requerido que na inicialização da página tenha um painel aberto. Por padrão o valor é: True
  • SuppressHeaderPostbacks – Evitar que PostBack fechem o accordion aberto/clicado. É muito usado quando é inserido HiperLinks dentro do conteúdo, permitindo que a cada postback o accordion permaneça do mesmo jeito.
  • Painéis – Coleção de controles AccordionPane
  • HeaderTemplate – Um template para o cabeçalho/Header do accordion, pode ser dinâmico (dataBind)
  • ContentTemplate – O modelo de conteúdo contém a marcação que deve ser usado ao conteúdo do painel, pode ser usado dinamicamente com dataBind.
  • DataSource – A fonte de dados  usada com DataBind () para incluir conteúdo dinâmico.
  • DataSourceID – A identificação ID=”CSharpBrasil_DataSource” da fonte de dados usada.
  • DataMember – Ligar um membro para usar o DataSource ID.

Bom vamos lá, dedos no teclado e mãos no mouse!

Primeiro iniciamos o visual studio, e após o nosso tutorial introdutório ensinando como adicionar as DLL’s do visual studio.

Com o visual studio aberto, vamos criar um novo website. Então, selecione um ASP.NET Empty Web Application, defina um nome para a Name, Location(C:\Users\…) e click em OK.

Após isso adicione um novo Item, no menu -> Add new Item -> e Selecione WebForm.aspx

Após isto clique em ADD.. pronto.. vamos trabalhar no Form..

Click para abri o form para edição…

Agora os procedimentos para criar nosso accordion..

– Adicionamos o assembly, para que possamos fazer uso dos controles do ajax, dentro da <div> adicionamos o controle do próprio ajax toolkit, o ajax script manager,  mas podemos adicionar o controle <asp:ScriptManager… padrão que vem com o VS2010. Então, adicionaremos as tags.

<ajaxToolkit:Accordion juntamente com usas propriedades ID, runat=”server”,SelectedIndex=”0”,HeaderSelectedCssClass=”accordionHeader”(Classe css padrão do ajax), ContentCssClass=”accordionContent”, FadeTransitions=”false”, FramesPerSecond=”40” (milesegundos), TransitionDuration=”250”(milesegundos), AutoSize=”None”, RequiredOpenedPane=”false”(Propriedade que não obriga que um painel comece aberto), SupressedHeaderPostbacks=”true”(Define que a cada Postback o painel(todos) vai iniciar fechado).

Definimos também, a criação do accordion. <Panes> inicializamos a área onde conterá os painéis. Após, as tags:<ajaxtoolkit:AccordionPane, <header>,<Content>.

Definimos, agora os Titulos dos cabeçalhos e o corpo do accordion.

Para que nosso accordion fique elegante. Definimos um CSS para ele. Defini Inline mesmo. Para que possam saber os recuros Css para o uso das classes.

Vejamos agora em pleno funcionamento no browser…

Fiz um accordion Responsivo para que o mesmo possa se adaptar ao tamanho da tela, ou do navegador.

Muito Obrigado, finalizo aqui o primeiro componente da serie.

Já estou com uma ideia que me surgiu agora após acabar a séries vamos fazer um web site completo e totalmente dinâmico usando os componente(todos)no site e combinando os mesmos.

Abraço a todos.

Duvidas?

Meus contatos no meu perfil.

Rodrigo Galhardo

@galhardoro