The jQuery UI library provides
a useful Accordion control which can be plugged
in into out forms, the jQuery UI Accordion can
be used with a group of div tags to display the information in scrolling
panels.
In the following example I have tried to cover all the possible scenarios which we come across while using an jQuery UI Accordion control.
In the following example I have tried to cover all the possible scenarios which we come across while using an jQuery UI Accordion control.
To run the sample at your desk, create a
new Asp.net page; edit the .aspx page, copy the code below into the .aspx page,
change reference of the jQuery & jQuery UI files to point to your local
directory. Build and run the application, see the behavior of each of the Accordion controls.
Code
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery
UI Accordion</title>
<link type="text/css"
href="css/smoothness/jquery-ui-1.8.21.custom.css"
rel="Stylesheet" />
<script
type="text/javascript"
src="JavaScript/jquery-1.7.2.js"></script>
<script
type="text/javascript"
src="JavaScript/jquery-ui-1.8.21.custom.min.js"></script>
<link
type="text/css"
href="Stylesheet.css" // Add your own .css file (Optional)
rel="Stylesheet" />
<script type="text/javascript">
// Simple
Accordion
$(document).ready(function() {
$("#SimpleAccordion").accordion(
{
collapsible: true,
active: false
});
//
//
Accordion - Set Active Panel
$('#btnSetActivePanel').click(function(event) {
event.preventDefault();
$("#SimpleAccordion").accordion('activate', 1);
});
//
//
Accordion - Get Active Panel
$('#btnGetActivePanel').click(function(event) {
event.preventDefault();
alert($("#SimpleAccordion").accordion("option", "active"));
});
//
//
Accordion - Collapse All
$('#btnCollapse').click(function(event) {
event.preventDefault();
$("#SimpleAccordion").accordion('activate', false);
});
//
//
Accordian - Icon
$("#iconAccordion").accordion(
{
collapsible: true,
active: false,
icons:
{
"header": "ui-icon-locked",
"headerSelected": "ui-icon-key"
}
});
//
//
Accordian - Animate
$("#animateAccordion").accordion(
{
collapsible: true,
active: false,
animated: "easeInElastic"
});
//
//
Accordian - Event
$("#eventAccordion").accordion(
{
collapsible: true,
active: false,
change: function(event, ui) {
alert('Selected Panel Index: ' + $(this).accordion("option",
"active"));
alert('Selected Panel HeaderId: ' + ui.newHeader.find("a").attr("id"));
}
});
});
</script>
</head>
<body>
<form id="frmAccordion" runat="server">
<table>
<tr valign="top">
<td>Simple
Accordion: </td>
<td>
<div id="SimpleAccordion">
<h1><a href="#" id="A1">
Header 1</a></h1>
<div>
This is the
content of Section - 1</div>
<h1><a href="#" id="A2">
Header 2</a></h1>
<div>
This is the content of Section - 2</div>
<h1><a href="#" id="A3">
Header 3</a></h1>
<div>
This is the content of Section - 3</div>
</div>
</td>
</tr>
<tr valign="top">
<td>Accordion
- Set Active Panel </td>
<td>
<asp:Button
ID="btnSetActivePanel"
runat="server"
Text="Set Active Panel" />
</td>
</tr>
<tr valign="top">
<td>Accordion
- Get Active Panel </td>
<td>
<asp:Button
ID="btnGetActivePanel"
runat="server"
Text="Get Active Panel" />
</td>
</tr>
<tr valign="top">
<td>Accordion
- Collapse </td>
<td>
<asp:Button
ID="btnCollapse"
runat="server"
Text="Collapse" />
</td>
</tr>
<tr valign="top">
<td>Accordion
- Icons</td>
<td>
<div id="iconAccordion">
<h1><a href="#" id="A1">
Header 1</a></h1>
<div>
This is the
content of Section - 1</div>
<h1><a href="#" id="A2">
Header 2</a></h1>
<div>
This is the content of Section - 2</div>
<h1><a href="#" id="A3">
Header 3</a></h1>
<div>
This is the content of Section - 3</div>
</div>
</td>
</tr>
<tr valign="top">
<td>Accordion
- Animate</td>
<td>
<div id="animateAccordion">
<h1><a href="#" id="A1">
Header 1</a></h1>
<div>
This is the
content of Section - 1</div>
<h1><a href="#" id="A2">
Header 2</a></h1>
<div>
This is the content of Section - 2</div>
<h1><a href="#" id="A3">
Header 3</a></h1>
<div>
This is the content of Section - 3</div>
</div>
</td>
</tr>
<tr valign="top">
<td>Accordion
- Event</td>
<td>
<div id="eventAccordion">
<h1><a href="#" id="A1">
Header 1</a></h1>
<div>
This is the
content of Section - 1</div>
<h1><a href="#" id="A2">
Header 2</a></h1>
<div>
This is the content of Section - 2</div>
<h1><a href="#" id="A3">
Header 3</a></h1>
<div>
This is the content of Section - 3</div>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
Related Posts
Related Posts
No comments:
Post a Comment