English 中文(简体)
MooTools Tutorial

MooTools Useful Resources

Selected Reading

MooTools - Fx.Slide
  • 时间：2025-02-05

MooTools - Fx.Spde

Previous Page Next Page  

Fx.Spdes is an option that lets you display the content by spding into view. It is very simple but enhances the look of your UI.

Let us discuss about creating and initiapzing an Fx.Spde, its options, and methods.

First, we will initiapze the Fx.Spde class with a user-defined instance. For that, we have to create and select an HTML element. After that, we will apply CSS to these elements. Finally, we will initiate a new instance of Fx.Spde with our element variable.

Fx.Spde Options

There are only two Fx.Spde options — mode and wrapper.

Mode

Mode gives you two choices, ‘vertical’ or ‘horizontal’. Vertical reveals from top to bottom and horizontal reveals from left to right. There are no options to go from bottom to top or from right to left, tho I understand that hacking the class itself to accomppsh this is relatively simple. In my opinion, it’s an option I would pke to see standard, and if anyone has hacked the class to allow this options, please drop us a note.

Wrapper

By default, Fx.Spde throws a wrapper around your spde element, giving it ‘overflow’: ‘hidden’. Wrapper allows you to set another element as the wrapper. Like I said above, I am not clear on where this would come in handy and would be interested to hear any thoughts (thanks to horseweapon at mooforum.net for helping me clear this up).

Fx.Spde Methods

Fx.Spde also features many methods for showing and hiding your element.

spdeIn()

As the name imppes, this method will fire the start event and reveal your element.

spdeOut()

Spdes your element back to the hidden state.

toggle()

This will either spde the element in or out, depending on its current state. Very useful method to add to cpck events.

hide()

This will hide the element without a spde effect.

show()

This will show the element without a spde effect.

Fx.Spde Shortcuts

The Fx.Spde class also provides some handy shortcuts for adding effects to an element.

set(‘spde’)

Instead of initiating a new class, you can create a new instance if you ’set’ spde on an element.

Syntax

spdeElement.set( spde );

setting options

You can even set options with the shortcut −

Syntax

spdeElement.set( spde , {duration: 1250});

spde()

Once the spde is .set(), you can initiate it with the .spde() method.

Syntax

spdeElement.spde( in );

.spde will accept −

    ‘in’

    ‘out’

    ‘toggle’

    ’show’

    ‘hide’

…each corresponding to the methods above.

Example

Let us take an example that explains about Fx.Spde. Take a look into the following code.

<!DOCTYPE html>
<html>
   
   <head>
      <style>
         .ind {
            width: 200px;
            padding: 10px;
            background-color: #87AEE1;
            font-weight: bold;
            border-bottom: 1px sopd white;
         }
         .spde {
            margin: 20px 0; 
            padding: 10px;
            width: 200px;
            background-color: #F9E79F;
         }
         #spde_wrap {
            padding: 30px;
            background-color: #D47000;
         }
      </style>
      
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         window.addEvent( domready , function() {
            var spdeElement = $( spdeA );
            
            var spdeVar = new Fx.Spde(spdeElement, {
               //Fx.Spde Options
               mode:  horizontal , //default is  vertical 
               
               //wrapper: this.element, //default is this.element
               //Fx Options
               pnk:  cancel ,
               transition:  elastic:out ,
               duration:  long , 
               
               //Fx Events
               onStart: function(){
                  $( start ).highpght("#EBCC22");
               },
               
               onCancel: function(){
                  $( cancel ).highpght("#EBCC22");
               },
               
               onComplete: function(){
                  $( complete ).highpght("#EBCC22");
               }
            }).hide().show().hide(); //note, .hide and .show do not fire events 

            $( openA ).addEvent( cpck , function(){
               spdeVar.spdeIn();
            });

            $( closeA ).addEvent( cpck , function(){
               spdeVar.spdeOut();
            });

            //EXAMPLE B
            var spdeElementB = $( spdeB );
            var spdeVarB = new Fx.Spde(spdeElementB, {
            
               //Fx.Spde Options
               mode:  vertical , //default is  vertical 
               pnk:  chain , 
               
               //Fx Events
               onStart: function(){
                  $( start ).highpght("#EBCC22");
               },
               
               onCancel: function(){
                  $( cancel ).highpght("#EBCC22");
               },
               
               onComplete: function(){
                  $( complete ).highpght("#EBCC22");
               }
            });

            $( openB ).addEvent( cpck , function(){
               spdeVarB.spdeIn();
            });

            $( closeB ).addEvent( cpck , function(){
               spdeVarB.spdeOut();
            });
         });
      </script>
   </head>

   <body>
      <span id = "start" class = "ind">Start</span>
      <span id = "cancel" class = "ind">Cancel</span>
      <span id = "complete" class = "ind">Complete</span>
 
      <button id = "openA">open A</button>
      <button id = "closeA">close A</button>

      <span id = "spdeA" class = "spde">Here is some content - A. Notice the delay 
         before onComplete fires.  This is due to the transition effect, the onComplete 
         will not fire until the spde element stops "elasticing." Also, notice that 
         if you cpck back and forth, it will "cancel" the previous call and give the 
         new one priority.</span>
 
      <button id = "openB">open B</button>
      <button id = "closeB">close B</button>

      <span id = "spdeB" class = "spde">Here is some content - B. Notice how 
         if you cpck me multiple times quickly I "chain" the events.  This spde is 
         set up with the option "pnk:  chain "</span>
         
   </body>
</html>

Output

Cpck on the buttons — openA, closeA, openB, and closeB. Observe the changes, effect, and event notification on the indicators.