Friday, 21 June 2013

Ajax Accordion Control Example

Ajax Accordion Control Example 

Introduction

In this article i am going to explain Ajax Accordion Control. which will help to create rich webpage.

Description

Ajax Accordion Panel helps to create or develop a rich web page which also allows to put control inside it. The Accordion is a web control that allows you to provide multiple panes and display them one at a time. It is like having several CollapsiblePanels where only one can be expanded at a time. The Accordion is implemented as a web control that contains AccordionPane web controls. Each AccordionPane control has a template for its Header and its Content. We keep track of the selected pane so it stays visible across postbacks. 

It also supports three AutoSize modes so it can fit in a variety of layouts. 
Propertydescription
NoneThe Accordion grows/shrinks without restriction. This can cause other elements on your page to move up and down with it.
LimitThe Accordion never grows larger than the value specified by its Height property. This will cause the content to scroll if it is too large to be displayed.
FillThe Accordion always stays the exact same size as its Height property. This will cause the content to be expanded or shrunk if it isn't the right size.

design style as below

view plaincopy to clipboardprint?
  1. .accordionContent {  
  2. background-color: #FFF7EA; /*#D3DEEF;*/  
  3. border-color: -moz-use-text-color #2F4F4F #2F4F4F;  
  4. border-right: 1px dashed #2F4F4F;  
  5. border-style: none dashed dashed;  
  6. border-width: medium 1px 1px;  
  7. padding: 10px 5px 5px;  
  8. width:20%;  
  9. }  
  10. .accordionHeaderSelected {  
  11. background-color:Orange; /*#5078B3;*/  
  12. border: 1px solid #2F4F4F;  
  13. color: white;  
  14. cursor: pointer;  
  15. font-family: Arial,Sans-Serif;  
  16. font-size: 12px;  
  17. font-weight: bold;  
  18. margin-top: 5px;  
  19. padding: 5px;  
  20. width:20%;  
  21. }  
  22. .accordionHeader {  
  23. background-color:#FD1C10; /*#2E4D7B;*/  
  24. border: 1px solid #2F4F4F;  
  25. color: white;  
  26. cursor: pointer;  
  27. font-family: Arial,Sans-Serif;  
  28. font-size: 12px;  
  29. font-weight: bold;  
  30. margin-top: 5px;  
  31. padding: 5px;  
  32. width:20%;  
  33. }  
  34. .href  
  35. {  
  36. color:White;    
  37. font-weight:bold;  
  38. text-decoration:none;  
  39. }  

design Accordion.aspx like below.

view plaincopy to clipboardprint?
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head id="Head1">  
  3. <title></title>  
  4. <style type="text/css">  
  5. </style>  
  6. </head>  
  7. <body>  
  8. <form name="form1" id="form1" runat="server">  
  9. <ajax:ToolkitScriptManager ID="Scriptmanager1" runat="server"/>  
  10. <div >  
  11. <ajax:Accordion ID="UserAccordion" runat="server" SelectedIndex="0"  
  12.  HeaderCssClass="accordionHeader"   
  13. HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent"   
  14. FadeTransitions="true" SuppressHeaderPostbacks="true" TransitionDuration="250"   
  15. FramesPerSecond="40" RequireOpenedPane="false" AutoSize="None" >  
  16. <Panes>  
  17. <ajax:AccordionPane ID="AccordionPane1" runat="server" >  
  18. <Header><a href="#" class="href">New User</a></Header>  
  19. <Content>  
  20. <asp:Panel ID="UserReg" runat="server">  
  21. <table align="center">  
  22. <tr>  
  23. <td></td>  
  24. <td align="right" >  
  25. </td>  
  26. <td align="center">  
  27. <b>Registration Form</b>  
  28. </td>  
  29. </tr>  
  30. <tr>  
  31. <td></td>  
  32. <td align="right" >  
  33. UserName:  
  34. </td>  
  35. <td>  
  36. <asp:TextBox ID="txtuser" runat="server"></asp:TextBox>  
  37. </td>  
  38. </tr>  
  39. <tr>  
  40. <td></td>  
  41. <td align="right" >  
  42. Password:  
  43. </td>  
  44. <td>  
  45. <asp:TextBox ID="txtpwd" runat="server"></asp:TextBox>  
  46. </td>  
  47. </tr>  
  48. <tr>  
  49. <td></td>  
  50. <td align="right">  
  51. FirstName:  
  52. </td>  
  53. <td>  
  54. <asp:TextBox ID="txtfname" runat="server"></asp:TextBox>  
  55. </td>  
  56. </tr>  
  57. <tr>  
  58. <td></td>  
  59. <td align="right">  
  60. LastName:  
  61. </td>  
  62. <td>  
  63. <asp:TextBox ID="txtlname" runat="server"></asp:TextBox>  
  64. </td>  
  65. </tr>  
  66. <tr>  
  67. <td></td>  
  68. <td align="right">  
  69. Email:  
  70. </td>  
  71. <td>  
  72. <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>  
  73. </td>  
  74. </tr>  
  75. <tr>  
  76. <td></td>  
  77. <td align="right" >  
  78. Phone No:  
  79. </td>  
  80. <td>  
  81. <asp:TextBox ID="txtphone" runat="server"></asp:TextBox>  
  82. </td>  
  83. </tr>  
  84. <tr>  
  85. <td></td>  
  86. <td align="right" >  
  87. Location:  
  88. </td>  
  89. <td align="left">  
  90. <asp:TextBox ID="txtlocation" runat="server"></asp:TextBox>  
  91. </td>  
  92. </tr>  
  93. <tr>  
  94. <td></td>  
  95. <td></td>  
  96. <td align="left" ><asp:Button ID="btnsubmit" runat="server" Text="Save"/>  
  97. <input type="reset" value="Reset" />  
  98. </td>  
  99. </tr>  
  100. </table>  
  101. </asp:Panel>  
  102. </Content>  
  103. </ajax:AccordionPane>  
  104. <ajax:AccordionPane ID="AccordionPane2" runat="server">  
  105. <Header><a href="#" class="href">User Detail</a></Header>  
  106. <Content>  
  107. <asp:Panel ID="Panel1" runat="server">  
  108. <table align="center">  
  109. <tr>  
  110. <td align="right" colspan="2">  
  111. FirstName:  
  112. </td>  
  113. <td>  
  114. <b>Vaghela</b>  
  115. </td>  
  116. </tr>  
  117. <tr>  
  118. <td align="right" colspan="2">  
  119. LastName:  
  120. </td>  
  121. <td>  
  122. <b>K</b>  
  123. </td>  
  124. </tr>  
  125.   
  126. <tr>  
  127. <td align="right" colspan="2" >  
  128. Location:  
  129. </td>  
  130. <td align="left">  
  131. <b>Gujarat</b>  
  132. </td>  
  133. </tr>  
  134. </table>  
  135. </asp:Panel>  
  136. </Content>  
  137. </ajax:AccordionPane>  
  138. <ajax:AccordionPane ID="AccordionPane3" runat="server">  
  139. <Header><a href="#" class="href">Job Details</a> </Header>  
  140. <Content>  
  141. <asp:Panel ID="Panel2" runat="server">  
  142. <table align="center">  
  143. <tr>  
  144. <td></td>  
  145. <td align="right">  
  146. Job Type:  
  147. </td>  
  148. <td>  
  149. <b>Software</b>  
  150. </td>  
  151. </tr>  
  152. <tr>  
  153. <td></td>  
  154. <td align="right">  
  155. Industry:  
  156. </td>  
  157. <td>  
  158. <b>IT</b>  
  159. </td>  
  160. </tr>  
  161. <tr>  
  162. <td></td>  
  163. <td align="right">  
  164. Designation:  
  165. </td>  
  166. <td>  
  167. <b>Software Engineer</b>  
  168. </td>  
  169. </tr>  
  170. <tr>  
  171. <td></td>  
  172. <td align="right">  
  173. Company:  
  174. </td>  
  175. <td>  
  176. <b>aspdotnet2u</b>  
  177. </td>  
  178. </tr>  
  179.   
  180. <tr>  
  181. <td></td>  
  182. <td align="right" >  
  183. Location:  
  184. </td>  
  185. <td align="left">  
  186. <b>Gujarat</b>  
  187. </td>  
  188. </tr>  
  189. </table>  
  190. </asp:Panel>  
  191. </Content>  
  192. </ajax:AccordionPane>  
  193. </Panes>  
  194. </ajax:Accordion>  
  195.   
  196. </div>  
  197. </form>  
  198. </body>  
  199. </html>  

Demo



Read more: http://aspdotnet2u.blogspot.com/2012/09/ajax-accordian-control-example-ajax.html#ixzz2WpsJEpcZ
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)