Oops, should provide an example:
<div id="accordion">
<div>
<h3>Heading></h3>
<div>
<p>Content geoes here</p>
<p>Etc..</p>
</div>
</div>
<div>
<h3>Another heading</h3>
<div>
<p>Yet more tatsy content</p>
<p>Rinse, repeat</p>
</div>
</div>
</div>
<script>
new Effect.Accordion("accordion");
</script>
-Rob
Robin Haswell wrote:
Hello boys and girls
In the ever-loving spirit of OSS, here's another feature for s.a.u.
In particular it's called Effect.Accordion, and is a scriptaculified
version of openrico's Accordion.
Work in progress, I'll submit further modifications as the come in, but
this is 90% of what needs to be done. I anticipate some bugs when I
start using it more.
Tested on FF1.5 and IE6/7.
Comments are welcome, and in fact solicited. I'd appreciate all bugfixes
sent either to this list or myself.
Yours,
-Rob
PS. This isn't a patch, it's just JS. However this server won't allow
attachments with a .js extension, which is, well, ridiculous.
------------------------------------------------------------------------
Effect.Accordion = Class.create();
Effect.Accordion.prototype = {
initialize: function(element, options) {
this.container = $(element);
this.options = Object.extend({
paneltag: "div", // The tag of the panel containers
headingtag: "h3", // The tag of the headings
bodytag: "div", // The body
initdisplay: 0 // Index of the panel to show first
}, options || {});
this.options.paneltag = this.options.paneltag.toUpperCase();
this.options.headingtag = this.options.headingtag.toUpperCase();
this.options.bodytag = this.options.bodytag.toUpperCase();
// We should probably sort out some event listeners
this.panels = Array();
panels = this.container.childNodes;
pl = panels.length;
n = 0;
for (i = 0; i < pl; i++) {
if (panels[i].nodeName != this.options.paneltag)
continue;
this.panels[n] = panels[i];
n++;
}
pl = this.panels.length;
this.clickHandler =
this.onClickHeading.bindAsEventListener(this);
for (i = 0; i < pl; i++) {
heading = this.getPanelHeading(this.panels[i]);
if (this.options.initdisplay != i) {
body = this.getPanelBody(this.panels[i]);
Element.hide(body);
} else {
this.curvisible = i;
}
Event.observe(heading, "click", this.clickHandler);
}
},
onClickHeading: function(ev) {
el = Event.element(ev);
panel = el.parentNode;
if (panel == this.panels[this.curvisible])
return;
newborn = this.getPanelBody(panel);
victim = this.getPanelBody(this.panels[this.curvisible]);
this.curvisible = this.getPanelNumber(panel);
new Effect.Parallel (
[
Effect.BlindUp(victim),
Effect.BlindDown(newborn)
], {
duration: 0.1
});
},
getPanelHeading: function(el) {
return el.getElementsByTagName(this.options.headingtag)[0];
},
getPanelBody: function(el) {
n = 0;
if (this.options.bodytag == this.options.headingtag)
n = 1;
return el.getElementsByTagName(this.options.bodytag)[n];
},
/*
getPanelBody: function(el) { // FIXME: Longer version to compensate for
the body tag appearing in the heading tag. This sliently halts execution
however. Fix if you need it.
n = 0;
if (this.options.bodytag == this.options.headingtag)
n = 1;
children = el.childNodes;
cl = children.length;
for (i = 0; i < cl; i++) {
if (children[i].nodeName == this.options.bodytag) {
if (n == 0)
return children[i];
else
n = n-1;
}
}
}
*/
getPanelNumber: function(el) {
pl = this.panels.length;
for (i = 0; i < pl; i++) {
if (this.panels[i] == el)
return i;
}
return "Not found";
}
};
------------------------------------------------------------------------
_______________________________________________
Rails-spinoffs mailing list
[email protected]
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
_______________________________________________
Rails-spinoffs mailing list
[email protected]
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
