달력

32024  이전 다음

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

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

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

출처 : 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;
Posted by tornado
|