[jQuery] Improved Event system & new Accordion
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 11 (filtered medium)">
<!--[if !mso]>
<style>
v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style>
<![endif]-->
<style>
<!--
/* Font Definitions */
@font-face
{font-family:Tahoma;
panose-1:2 11 6 4 3 5 4 4 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman";}
a:link, span.MsoHyperlink
{color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{color:purple;
text-decoration:underline;}
span.EmailStyle17
{mso-style-type:personal-reply;
font-family:Arial;
color:navy;}
@page Section1
{size:8.5in 11.0in;
margin:1.0in 1.25in 1.0in 1.25in;}
div.Section1
{page:Section1;}
-->
</style>
</head>
<body lang=EN-US link=blue vlink=purple>
<div class=Section1>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'>Can you supply an example on how you would
implement this?<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 color=navy face=Arial><span style='font-size:
10.0pt;font-family:Arial;color:navy'><o:p> </o:p></span></font>
<div>
<div class=MsoNormal align=center style='text-align:center'><font size=3
face="Times New Roman"><span style='font-size:12.0pt'>
<hr size=2 width="100%" align=center tabindex=-1>
</span></font></div>
<p class=MsoNormal><b><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma;font-weight:bold'>From:</span></font></b><font size=2
face=Tahoma><span style='font-size:10.0pt;font-family:Tahoma'> discuss-bounces@jquery.com
[mailto:discuss-bounces@jquery.com] <b><span style='font-weight:bold'>On Behalf
Of </span></b>Wil Stuckey
<b><span style='font-weight:bold'>Sent:</span></b> Thursday, October 26, 2006
5:56 PM
<b><span style='font-weight:bold'>To:</span></b> jQuery Discussion.
<b><span style='font-weight:bold'>Subject:</span></b> Re: [jQuery] Improved
Event system & new Accordion</span></font><o:p></o:p>
</div>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'>I wrote an accordion plugin as well... I also wanted something that was
structurally flexible.
I recently re-factored what i had, so this is not that well tested or
optimized. Here it is anyway:
/**
* Utility function to swap className on a jQuery object.
*
* @example $('p.foo').swapClass('foo', 'bar');
*
* @param {Object} c1 class name one.
* @param {Object} c2 class name two.
*/
jQuery.fn.swapClass = function(c1, c2){
return this.each (function(){
var t = jQuery(this);
(!t.is('.'+c1)) ?
t.addClass(c1).removeClass(c2) : t.addClass(c2).removeClass(c1);
});
}
/**
* jQuery plugin to add an accordian effect to any jQuery obj
* and selectable content within the same parent.
* requires a swapClass Plugin
*
* @param {Expression} content:
Required. Element to be paired with. Takes a jquery expression/object/dom
element.
* @param {Object} options: Optional option object.
* {Integer}
startIndex: Index of the initial pair to be shown.
* {String|Integer} speed: When
given a speed the accordian animates in and out.
* {Function}
callBack: CallBack function at the end of each toggle.
*/
jQuery.fn.accordian = function(content, options) {
if (!this[0]) return;
var options = jQuery.extend({
startIndex: 0,
speed: 0,
collapsible: false,
callBack: null
}, options || {});
var $parent = this.parent().addClass('accordian'),
$content = jQuery(content,
$parent).hide(),
$self =
this.end();
if(options.startIndex >= 0)
jQuery($content[options.startIndex]).show();
return this.each(function(i){
jQuery(this).click(function(){
if
(!jQuery(this).is('.open') && !options.collapsible){
$self.filter('.open').swapClass('open', 'close').end();
jQuery(this).swapClass('open', 'close');
var $closeObj = jQuery($content).filter(':visible'),
$openObj = jQuery($content).eq(i);
//$content.end();
if (options.speed) {
$closeObj.animate({'height': 'hide'}, options.speed, function(){
$openObj.animate({'height': 'show'}, options.speed, options.callBack);
});
} else {
$closeObj.hide(options.speed);
$openObj.show(options.speed, options.callBack);
}
}
});
});
}<o:p></o:p></span></font>
</div>
</body>
</html>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/