Showing posts with label jQuery UI Accordion. Show all posts
Showing posts with label jQuery UI Accordion. Show all posts
Monday, August 6, 2012
Tuesday, July 17, 2012
Asp.Net jQuery UI Accordion Event handlers
In this post Asp.Net jQuery UI
Accordion
Event Handlers we shall see on how to handle the events raised by the
accordion control/
Add a DIV tag eventAccordion to the page, and add the below jQuery script. Change the references of the jQuery
library files to map to your local path.
Click on any of the panel headers, notice that the click event is tracked and the selected panel index and the selected header id are displayed in message boxes.
<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">
$(document).ready(function() {
//
//
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>
</script>
</head>
<body>
<form id="frmAccordion" runat="server">
<table>
<tr valign="top">
<td>Accordion
- Event: </td>
<td>
<div id="eventAccordion">
<h1><a href="#" id="A4">Header
1</a></h1>
<div>This is
the content of Section - 1</div>
<h1><a href="#" id="A5">Header 2</a></h1>
<div>This is
the content of Section - 2</div>
<h1><a href="#" id="A6">Header 3</a></h1>
<div>This is
the content of Section - 3</div>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
For a full example covering all possible scenarios in using a
jQuery UI Autocomplete control refer to the post Asp.net jQuery UI Accordion Tutorial
Related Posts
Asp.Net jQuery UI Accordion Animate
In this post Asp.Net jQuery UI
Accordion
Animate we shall see on how to add animation effects which will
plan when the panels of the accordion expands/contracts.
Add a DIV tag animateAccordion to the page, and add the below jQuery script. Change the references of the jQuery
library files to map to your local path.
Notice that the accordion panels expand/collapse with animation effects. The other possible animation effects are as follows.
easeInQuad
easeInCubic
easeInQuart
easeInQuint
easeInSine
easeInExpo
easeInCirc
easeInElastic
easeInBack
easeInBounce
<html xmlns="http://www.w3.org/1999/xhtml">
<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">
$(document).ready(function() {
//
//
Accordian - Animate
$("#animateAccordion").accordion(
{
collapsible: true,
active: false,
animated: "easeInElastic"
});
});
</script>
</script>
</head>
<body>
<form id="frmAccordion" runat="server">
<table>
<tr valign="top">
<td>Accordion
- Animate: </td>
<td>
<div id="animateAccordion">
<h1><a href="#" id="A4">Header
1</a></h1>
<div>This is
the content of Section - 1</div>
<h1><a href="#" id="A5">Header 2</a></h1>
<div>This is
the content of Section - 2</div>
<h1><a href="#" id="A6">Header 3</a></h1>
<div>This is
the content of Section - 3</div>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
For a full example covering all possible scenarios in using a jQuery UI Autocomplete control refer to the post Asp.net jQuery UI Accordion Tutorial
Related Posts
Asp.Net jQuery UI Accordion Icons
In this post Asp.Net jQuery UI
Accordion
Icons we shall see on how to change the icons displayed in the
header of the Accordion panels.
Add a DIV tag iconAccordion to the page, and add the below jQuery script. Change the references of the jQuery
library files to map to your local path.
Notice that the accordion gets displayed with icons as specified in the icons property while creating the icons. Refer to the .css file jquery-ui-1.8.21.custom.css, to get a list of other icons which can be used.
Notice that the accordion gets displayed with icons as specified in the icons property while creating the icons. Refer to the .css file jquery-ui-1.8.21.custom.css, to get a list of other icons which can be used.
<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">
$(document).ready(function() {
//
//
Accordian - Icon
$("#iconAccordion").accordion(
{
collapsible: true,
active:
false,
icons:
{
"header": "ui-icon-locked",
"headerSelected": "ui-icon-key"
}
});
});
</script>
</script>
</head>
<body>
<form id="frmAccordion" runat="server">
<table>
<tr valign="top">
<td>Accordion
- Icon: </td>
<td>
<div id="iconAccordion">
<h1><a href="#" id="A4">Header
1</a></h1>
<div>This is
the content of Section - 1</div>
<h1><a href="#" id="A5">Header 2</a></h1>
<div>This is
the content of Section - 2</div>
<h1><a href="#" id="A6">Header 3</a></h1>
<div>This is
the content of Section - 3</div>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
For a full example covering all possible scenarios in using a jQuery UI Autocomplete control refer to the post Asp.net jQuery UI Accordion Tutorial
Related Posts
Subscribe to:
Posts (Atom)
