Série: Ajax Control Toolkit - Tutoriais - Accordion - C# Brasil
Início »AJAX»Série: Ajax Control Toolkit – Tutoriais – Accordion
Série: Ajax Control Toolkit – Tutoriais – Accordion
Posted on 22 de outubro de 2012 Authorgalhardoro
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.
Meus contatos no meu perfil.
@galhardoro
Categorias: AJAX, Ajax Control Toolkit, ASP.NET, C#, CSS, Visual StudioTags: Accordion, Ajax Control Toolkit, ASP.NET, componente, Visual Studio 2010