Mootools1.2 tutorial Slide _ Mootools

Today, we will continue with the 23rd course of our Mootools1.2 tutorial. Let's talk about Fx. Slide in the Fx plug-in today. This plug-in allows you to display the content in slide mode. It is very simple to use and is a good tool in your UI toolbox. Basic usage
Just like all the classes we have seen before, when we apply this class to an element, the first thing we need to do is to initialize a new Fx. Slide instance.
First, let's create an HTML file for the sliding element.
Reference code:

The Code is as follows:

Here is the content to slide.

Our CSS does not require any modification.
Reference code:

The Code is as follows:

. Slide {
Margin: 20px 0;
Padding: 10px;
Width: 200px;
Background-color: # DAF7B4;
}

Finally, we initialize a new Fx. Slide and pass it our element variable.
Reference code:

The Code is as follows:

Var slideElement = $ ('slide _ element ');
Var slideVar = new Fx. Slide (slideElement ,{
// Fx. Slide Option
Mode: 'signature', // The default value is 'version' (vertical)
// Fx Options
Transition: 'sine: in ',
Duration: 300,
// Fx event
OnStart: function (){
$ ('Start'). highlight ("# EBCC22 ");
}
});

As Fx. Slide is an extension of Fx, you can use any options and events of Fx, but Fx. Slide also has some options.
Fx. Slide Option
Fx. Slide has only two options: "mode" and "wrapper ". Frankly speaking, I have never found myself using "wrapper" (I have never encountered such a requirement), but "mode" determines whether you want horizontal or vertical sliding.
Mode)
The Mode gives you two options-vertical or horizontal ". Vertical is the display from the top to the bottom, and horizontal is the display from the left to the right. There is no option from bottom to top or from right to left. However, I know that modifying the class itself to implement these functions is relatively simple. In my opinion, I still hope this will become a standard option. If someone has modified this class and allowed these options, please leave us a message.
Wrapper)
By default, Fx. Slide adds a wrapper to the outside of your sliding element and specifies the value of its "overflow" attribute as "hidden ". Wrapper allows you to set other elements as the package for this element. As I said above, I don't know where it will be used, and I am also interested in hearing any thoughts about it. (Thanks to the horseweapon of mooforum.net for letting me understand this .)
Fx. Slide Method
Fx. Slide also provides many methods to show or hide elements.
. SlideIn ()
As the name tells you, This method triggers the start time and displays your elements.
. SlideOut ()
Slide the element to the hidden state.
. Toggle ()
This method may display or hide an element. The result depends entirely on the current state of the element. It is useful when you click an event.
. Hide ()
This hides the element, but does not use the slide effect.
. Show ()
This will show the elements, but will not use the slide effect.
Reset mode options by using methods
Each method above can accept an optional mode parameter, allowing you to overwrite the previously set options.
Reference code:

The Code is as follows:

SlideVar. slideIn ('horizontal ');

Fx. Slide shortcut
The Fx. Slide class also provides convenient shortcuts for adding sliding effects to elements.
. Set ('slide ');
Instead of initializing a new class, you can use the set method to add a slide object to the element to create a new slide instance.
Reference code:

The Code is as follows:

SlideElement. set ('slide ');

Set options
You can even set options through shortcuts:
Reference code:

The Code is as follows:

SlideElement. set ('slide', {duration: 1250 });

. Slide ()
Once slide is set using the. set () method, you can use the. slide () method to initialize it.
Reference code:

The Code is as follows:

SlideElement. slide ('in ');

The. slide method can take the following parameters:
'In'
'Out'
'Toggle'
'Show'
'Hide'
Each parameter corresponds to the preceding method.
Sample Code
The above mentioned basic covers all basic usage. The following example uses most of the knowledge we have learned to show some different sliding elements and provides some p as the indicator so that you can clearly see these events.
First, create an HTML file.
Reference code:

The Code is as follows:

Start

Cancel

Complete

Open
Close

Here is some content-. notice the delay before onComplete fires. this is due to the transition effect, the onComplete will not fire until the slide element stops "elasticing. "Also, notice that if you click back and forth, it will" cancel "the previous call and give the new one priority.

Open B
Close B

Here is some content-B. Notice how if you click me multiple times quickly I "chain" the events. This slide is set up with the option "link: 'chain '"

Toggle C

Here is some content-C

Toggle D

Here is some content-D. Notice how I am not hooked into any events. This was done with the. slide shortcut.

Toggle E

Here is some content-E

Next is the CSS file. Let's keep it as simple as possible.
Reference code:

The Code is as follows:

. Ind {
Width: 200px;
Padding: 10px;
Background-color: #87AEE1;
Font-weight: bold;
Border-bottom: 1px solid white;
}
. Slide {
Margin: 20px 0;
Padding: 10px;
Width: 200px;
Background-color: # DAF7B4;
}
# Slide_wrap {
Padding: 30px;
Background-color: # D47000;
}

Finally, our Mootools JavaScript code:
Reference code:

The Code is as follows:

Window. addEvent ('domainready', function (){
// Example
Var slideElement = $ ('slidea ');
Var slideVar = new Fx. Slide (slideElement ,{
// Fx. Slide Option
Mode: 'horizontal ', // The default value is 'version'
// Wrapper: this. element, // The default value is this. element.
// Fx Options
Link: 'cancel ',
Transition: 'elastic: out ',
Duration: 'long ',
// Fx event
OnStart: function (){
$ ('Start'). highlight ("# EBCC22 ");
},
OnCancel: function (){
$ ('Cancel'). highlight ("# EBCC22 ");
},
OnComplete: function (){
$ ('Complete'). highlight ("# EBCC22 ");
}
}). Hide (). show (). hide (); // note that. hide and. show methods do not trigger events.
$ ('Opena'). addEvent ('click', function (){
SlideVar. slideIn ();
});
$ ('Closea'). addEvent ('click', function (){
SlideVar. slideOut ();
});
// Example B
Var slideElementB = $ ('slideb ');
Var slideVarB = new Fx. Slide (slideElementB ,{
// Fx. Slide Option
Mode: 'version', // The default value is 'version'
// Fx Options
// Note: The chain effect allows you to click multiple times,
// When the mouse leaves,
// The animation that you click can be triggered in sequence.
Link: 'chain ',
// Fx event
OnStart: function (){
$ ('Start'). highlight ("# EBCC22 ");
},
OnCancel: function (){
$ ('Cancel'). highlight ("# EBCC22 ");
},
OnComplete: function (){
$ ('Complete'). highlight ("# EBCC22 ");
}
});
$ ('Openb'). addEvent ('click', function (){
SlideVarB. slideIn ();
});
$ ('Closeb'). addEvent ('click', function (){
SlideVarB. slideOut ();
});
// Example C
Var slideElementC = $ ('slidec ');
Var slideVarC = new Fx. Slide (slideElementC ,{
// Fx. Slide Option
Mode: 'version', // The default value is 'version'
// Wrapper: this. element, // The default value is this. element.
// Fx Options
// Link: 'cancel ',
Transition: 'sine: in ',
Duration: 300,
// Fx event
OnStart: function (){
$ ('Start'). highlight ("# EBCC22 ");
},
OnCancel: function (){
$ ('Cancel'). highlight ("# EBCC22 ");
},
OnComplete: function (){
$ ('Complete'). highlight ("# EBCC22 ");
}
}). Hide ();
$ ('Openc'). addEvent ('click', function (){
SlideVarC. toggle ();
});
$ ('Slided'). slide ('hide ');
$ ('Opend'). addEvent ('click', function (){
$ ('Slided'). slide ('toggle ');
});
// Example C
Var slideElementE = $ ('slidee ');
Var slideWrap = $ ('slide _ wrap ');
Var slideVarE = new Fx. Slide (slideElementE ,{
// Fx. Slide Option
// Mode: 'signature', // The default value is 'version'
Wrapper: slideWrap // The default value is this. element.
}). Hide ();
$ ('Opene'). addEvent ('click', function (){
SlideVarE. toggle ();
});
});

Learn more ......

Fx. Slide is a versatile and useful plug-in. To learn more, see Fx. Slide documentation, Fx. Morph and Fx documentation.

Also, read our tutorials on Fx. Morph and Fx Options and events.

Download the zip compressed file of the final sample code

Contains everything you need.