scriptaculous 응용한 accordion 메뉴...

아웃룩 메뉴 처럼 만들려고 하다가 혹시나 해서 구글 검색 해봤더니

벌써 만들어 놓으신 분이 계시군요.

출처 : http://www.lucasvd.nl/portfolio.php?id=24

Accordion for Script.aculo.us

Technieken: Javascript This is a pretty advanced Accordion feature for Scriptaculous. It tries to be as much as the same as the Accordion feature from Mootools, but the original mootools version has still some more features, which I may add in the future. How to use Save the code below to accordion.js and put the file in your Scriptaculous directory. Include the file in your webpage Code: <script type="text/javascript" src="js/accordion.js"></script> Add the HTML for your accordion, for example: Code: <div id="accordion">     <h3>Titlte 1</h3>     <p>Text 1</p>         <h3>Title 2</h3>     <p>Text 2</p>         <h3>Title 3</h3>     <p>Text 3</p>     </div> And put just before the tag the Javascript: Code: <script type="text/javascript"> new Accordion("div#accordion h3", "div#accordion p"); </script> Parameter explanation Parameter 1 A CSS Selector which selects all titles Parameter 2 A CSS Selector which selects all bodies[/b] Parameter 3 Optional A list of options, see below Options duration - Sets how long the effect should take Example: Code: <script type="text/javascript"> new Accordion("div#accordion h3", "div#accordion p", {duration: 0.6}); </script> _____________________________________________ default_open - The index, started at zero, of the body which should be open by default. Example: Code: <script type="text/javascript"> new Accordion("div#accordion h3", "div#accordion p", {default_open: 2}); // Now the third body is open by default </script> ______________________________________________________ event_trigger - On which event should the body be shown Example: Code: <script type="text/javascript"> new Accordion("div#accordion h3", "div#accordion p", {event_trigger: 'over'}); </script> Events OnStart - called before a body is shown OnFinish - called after a body is shown

Code

<?php // Just for highlighting, don't copy
/**
* Accordion Effect for Script.aculo.us
* Created by Lucas van Dijk
* http://www.lucasvd.nl
*
* Copyright 2007 by Lucas van Dijk
*
* Permission is hereby granted, free of charge, to any person obtaining
* a copy of this software and associated documentation files (the
* "Software"), to deal in the Software without restriction, including
* without limitation the rights to use, copy, modify, merge, publish,
* distribute, sublicense, and/or sell copies of the Software, and to
* permit persons to whom the Software is furnished to do so, subject to
* the following conditions:
*
* The above copyright notice and this permission notice shall be
* included in all copies or substantial portions of the Software.
*/

var Accordion = Class.create();

Accordion.prototype =
{
    initialize: function(handles, bodys, options)
    {
        this.options = this._set_options(options);        
        this.headers = $$(handles);
        this.bodys = $$(bodys);
        
        if(this.bodys.length != this.headers.length)
        {
            throw Error('Number of headers/bodys does not match!');
        }
        
        for(var i = 0; i < this.headers.length; i++)
        {        
            Event.observe(this.headers[i], this.options.event_trigger, this.show.bind(this, i));
            
            this.bodys[i].style.display = "none";
        }
        
        this.bodys[this.options.default_open].id = "visible";
        
        this.show(this.options.default_open, true);
    },

    show: function(index, force)
    {        
        if ((index >= this.length) || (index < 0))
        {
            throw Error('Index out of range');
        }
        
        if (this.bodys[index].id == 'visible')
        {                                 
            if (typeof force == "boolean")
            {                        
                this.options.OnStart(index, this.bodys[index]);
                                
                // Force display the visible object                
                for(var i = 0; i < this.bodys.length; i++)
                {
                    if(this.bodys[i].style.display != 'none' && i != index)
                    {
                        new Effect.SlideUp(this.bodys[i]);
                    }
                }
                
                new Effect.SlideDown(this.bodys[index]);
            }
        }
        else
        {        
            this.options.OnStart(index, this.bodys[index]);
                        
            // Normal change
            new Effect.Parallel(
                [
                    new Effect.Fade($('visible')),                
                    new Effect.BlindUp($('visible')),
                    new Effect.BlindDown(this.bodys[index]),
                    new Effect.Appear(this.bodys[index])
                ], {
                    duration: this.options.duration
                }
            );
    
            $('visible').id = "";
            this.bodys[index].id = "visible";
        }
        
        this.options.OnFinish(index, this.bodys[index]);
    },
    
    _default_options:
    {
        duration: 0.3,        
        default_open: 0,
        event_trigger: 'click',
        OnStart: function() { },
        OnFinish: function() { }
    },
    
    _set_options: function(options)
    {
        if(typeof options != "undefined")
        {        
            var result = [];
            for(option in this._default_options)
            {
                if(typeof options[option] == "undefined")
                {
                    result[option] = this._default_options[option];
                }
                else
                {
                    result[option] = options[option];
                }
            }
        
            return result;
        }
        else
        {
            return this._default_options;
        }
    }        
};

Effect.Accordion = Accordion;