Home arrow JavaScript arrow The Accordion Component in the AJAX Control Toolkit
JAVASCRIPT

The Accordion Component in the AJAX Control Toolkit


The Accordion component is one of the many components in the AJAX Control Toolkit (ACT). The ACT is a Microsoft Community project built upon ASP.NET 2.0 AJAX Extensions and will be a repository of web-client components.

Author Info:
By: Jayaram Krishnaswamy
Rating: 5 stars5 stars5 stars5 stars5 stars / 68
March 20, 2007
TABLE OF CONTENTS:
  1. · The Accordion Component in the AJAX Control Toolkit
  2. · The Accordion Component
  3. · Creating a web page displaying an Accordion
  4. · The design view of the Accordion
  5. · The page displayed on the browser

print this article
SEARCH DEVARTICLES

The Accordion Component in the AJAX Control Toolkit
(Page 1 of 5 )

The ASP.NET 2.0 AJAX extensions can be downloaded from the Microsoft site. If you installed ATLAS make sure you remove it before running the executable to install the ASP.NET 2.0 AJAX Extensions. The message when you try to install the extensions will only tell you to remove the earlier version; it does not say ATLAS explicitly.

The Accordion

The Accordion is a component the like of which you have seen in my earlier article. It is basically a container for a number of panes. The pane has a header and  content. When the accordion is displayed on the web page, only the content of one of the panes will be displayed, along with the headers of the others. You could go to any of the other panels by clicking on one of the headers. This brings up the content of that header while closing the existing content. An example of the accordion from my earlier article which used the DOJO Toolkit 0.4.0 version is displayed in the next picture.

About this tutorial

This tutorial describes some of the features of the ACT as well as the AJAX extensions. The installation of the toolkit is described, followed by the procedure for designing an Accordion from scratch. The tutorial duplicates the design used in the earlier article, which means at the finish of the design, the result of that article is reproduced. The tutorial uses Visual Studio Professional Edition installed on a machine running Windows XP Professional Media Center Edition. The tutorial is developed side-by-side with the example site of the ACT.

The AJAX Extensions and the ACT Components

After installing the extensions, the folder was placed on the desktop and the solution file in the folder was brought up in VS 2005. The Trust Level ="medium" set by Microsoft for the sample web site precluded using the folder as a virtual directory.

The ACT Components

The various components that are bundled with the download are shown in the next picture.

The Accordion consists of three components: the Accordion, AccordionControlPanel and the AccordionPane. For the purposes of this tutorial the Accordion and the AccordionPane will be used. These components can be dragged from their location and dropped onto a web page, like all other Microsoft controls.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials