I just had to see this in action so I put up an example of Robin's excellent work here:
http://turnstudio.com/accordian.html
It's butt-ugly but it at least shows the different elements in action. also, I made the h3 use a link cursor - that's not actually part of the accordian code.
http://turnstudio.com/accordian.html
It's butt-ugly but it at least shows the different elements in action. also, I made the h3 use a link cursor - that's not actually part of the accordian code.
- Danger
On 3/3/06, Robin Haswell <
[EMAIL PROTECTED]> wrote:
Sorry, it would be unprofessional of me to give my example (as I wrote
this for work), but it's intended to be identical to:
http://openrico.org/rico/demos.page?demo=ricoAccordion.html
..eventually. The only work left to be done is work out whether we wanna
expand the container (#accordion) to the maximum size of the content, or
use overflow:auto on the bodies.
-Rob
Nicolas Terray wrote:
> I love real live examples, do you have one ? :)
>
> On 3/3/06, Robin Haswell <[EMAIL PROTECTED]> wrote:
>> 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
>>> Rails-spinoffs@lists.rubyonrails.org
>>> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
>> _______________________________________________
>> Rails-spinoffs mailing list
>> Rails-spinoffs@lists.rubyonrails.org
>> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
>>
> _______________________________________________
> Rails-spinoffs mailing list
> Rails-spinoffs@lists.rubyonrails.org
> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs@lists.rubyonrails.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
_______________________________________________ Rails-spinoffs mailing list Rails-spinoffs@lists.rubyonrails.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
