Basic usage
Like all the classes we've seen before, the first thing we have to do when we apply this class to an element is to initialize a new instance.
First, let's create an HTML file for the sliding element.
Reference code:
<div class="slide">Here is the content to be displayed. </div>
Our CSS does not require any modification.
Reference code:
.slide {
margin: 20px 0;
padding: 10px;
width: 200px;
background-color: #DAF7B4;
}
Finally, we will initialize a new one and pass it our element variable.
Reference code:
var slideElement = $('slide_element');
var slideVar = new (slideElement, {
// Options
mode: 'vertical', // The default is 'vertical' (vertical)
// Fx option
transition: 'sine:in',
duration: 300,
// Fx event
onStart: function(){
$('start').highlight("#EBCC22");
}
});
Since it is an extension of Fx, you can use any options and events of Fx, but there are some of your own.
Options
There are only two options - "mode" and "wrapper". To be honest, I never found myself using "wrapper" (I've never encountered such a need), but "mode" determines whether you want to slide horizontally or vertically.
mode (mode)
The mode gives you two choices - "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 here from bottom to top or from right to left. But I know that it is relatively simple to modify the class itself to implement these functions. In my opinion, I still hope this becomes a standard option, if someone has modified this class and allowed these options, please leave us a message.
wrapper (wrapper)
By default, a wrapper is added outside your sliding element and the value of its "overflow" property is specified to be "hidden". wrapper allows you to set other elements as wrappers for that element. Like I said above, I'm not sure it will be used there, and I'm interested in hearing any ideas about this stuff. (Thanks to horseweapon for letting me understand this.)
Method
There are also many ways to show or hide elements.
.slideIn()
As the name tells you, this method talks about triggering the start time and displaying your element.
.slideOut()
Slide the element to a hidden state.
.toggle()
This method may display or hide elements, and the result depends entirely on the current state of the element. Very useful when clicking events.
.hide()
This will hide the elements, but does not use the sliding effect.
.show()
This will display the elements, but does not use the sliding effect.
Reset mode options by method
Each of the above methods can accept an optional mode parameter, allowing you to override the options set previously.
Reference code:
('horizontal');
Shortcuts
The class also provides some very convenient shortcuts to add sliding effects to elements.
.set('slide');
You can create a new slide instance by adding a slide object to the element instead of initializing a new class.
Reference code:
('slide');
Setting options
You can even set options via shortcuts:
Reference code:
('slide', {duration: 1250});
.slide()
Once you have set slide with the .set() method, you can use the .slide() method to initialize it.
Reference code:
('in');
The .slide method can accept the following parameters:
'in'
'out'
'toggle'
'show'
'hide'
Each parameter corresponds to the above method.
Code Example
The above basically covers all basic usages. The following example will use most of what we learned above, display some different sliding elements and provide some divs as indicators so that you can see these events clearly.
First, create the HTML file.
Reference code:
<div class="ind">Start</div>
<div class="ind">Cancel</div>
<div class="ind">Complete</div>
<br /><br />
<button >open A</button>
<button >close A</button>
<div class="slide">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 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.</div>
<button >open B</button>
<button >close B</button>
<div class="slide">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'"</div>
<button >toggle C</button>
<div class="slide">Here is some content - C</div>
<button >toggle D</button>
<div class="slide">Here is some content - D. Notice how I am not hooked into any events. This was done with the .slide shortcut.</div>
<button >toggle E</button>
<div >
<div class="slide">Here is some content - E</div>
</div>
Next is the CSS file. We keep it as simple as possible.
Reference code:
.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:
('domready', function() {
// Example A
var slideElement = $('slideA');
var slideVar = new (slideElement, {
// Options
mode: 'horizontal', // Default is 'vertical'
//wrapper: , // Default is
// Fx option
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 the .hide and .show methods do not trigger events
$('openA').addEvent('click', function(){
();
});
$('closeA').addEvent('click', function(){
();
});
// Example B
var slideElementB = $('slideB');
var slideVarB = new (slideElementB, {
// Options
mode: 'vertical', // The default is 'vertical'
// Fx option
// Note: The chain effect allows you to click multiple times.
// When the mouse leaves
// The animations for each click can be triggered in turn
link: 'chain',
// Fx event
onStart: function(){
$('start').highlight("#EBCC22");
},
onCancel: function(){
$('cancel').highlight("#EBCC22");
},
onComplete: function(){
$('complete').highlight("#EBCC22");
}
});
$('openB').addEvent('click', function(){
();
});
$('closeB').addEvent('click', function(){
();
});
// Example C
var slideElementC = $('slideC');
var slideVarC = new (slideElementC, {
// Options
mode: 'vertical', // The default is 'vertical'
//wrapper: , // Default is
// Fx option
//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(){
();
});
$('slideD').slide('hide');
$('openD').addEvent('click', function(){
$('slideD').slide('toggle');
});
// Example C
var slideElementE = $('slideE');
var slideWrap = $('slide_wrap');
var slideVarE = new (slideElementE, {
// Options
//mode: 'vertical', // The default is 'vertical'
wrapper: slideWrap // default is
}).hide();
$('openE').addEvent('click', function(){
();
});
});
Like all the classes we've seen before, the first thing we have to do when we apply this class to an element is to initialize a new instance.
First, let's create an HTML file for the sliding element.
Reference code:
Copy the codeThe code is as follows:
<div class="slide">Here is the content to be displayed. </div>
Our CSS does not require any modification.
Reference code:
Copy the codeThe code is as follows:
.slide {
margin: 20px 0;
padding: 10px;
width: 200px;
background-color: #DAF7B4;
}
Finally, we will initialize a new one and pass it our element variable.
Reference code:
Copy the codeThe code is as follows:
var slideElement = $('slide_element');
var slideVar = new (slideElement, {
// Options
mode: 'vertical', // The default is 'vertical' (vertical)
// Fx option
transition: 'sine:in',
duration: 300,
// Fx event
onStart: function(){
$('start').highlight("#EBCC22");
}
});
Since it is an extension of Fx, you can use any options and events of Fx, but there are some of your own.
Options
There are only two options - "mode" and "wrapper". To be honest, I never found myself using "wrapper" (I've never encountered such a need), but "mode" determines whether you want to slide horizontally or vertically.
mode (mode)
The mode gives you two choices - "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 here from bottom to top or from right to left. But I know that it is relatively simple to modify the class itself to implement these functions. In my opinion, I still hope this becomes a standard option, if someone has modified this class and allowed these options, please leave us a message.
wrapper (wrapper)
By default, a wrapper is added outside your sliding element and the value of its "overflow" property is specified to be "hidden". wrapper allows you to set other elements as wrappers for that element. Like I said above, I'm not sure it will be used there, and I'm interested in hearing any ideas about this stuff. (Thanks to horseweapon for letting me understand this.)
Method
There are also many ways to show or hide elements.
.slideIn()
As the name tells you, this method talks about triggering the start time and displaying your element.
.slideOut()
Slide the element to a hidden state.
.toggle()
This method may display or hide elements, and the result depends entirely on the current state of the element. Very useful when clicking events.
.hide()
This will hide the elements, but does not use the sliding effect.
.show()
This will display the elements, but does not use the sliding effect.
Reset mode options by method
Each of the above methods can accept an optional mode parameter, allowing you to override the options set previously.
Reference code:
Copy the codeThe code is as follows:
('horizontal');
Shortcuts
The class also provides some very convenient shortcuts to add sliding effects to elements.
.set('slide');
You can create a new slide instance by adding a slide object to the element instead of initializing a new class.
Reference code:
Copy the codeThe code is as follows:
('slide');
Setting options
You can even set options via shortcuts:
Reference code:
Copy the codeThe code is as follows:
('slide', {duration: 1250});
.slide()
Once you have set slide with the .set() method, you can use the .slide() method to initialize it.
Reference code:
Copy the codeThe code is as follows:
('in');
The .slide method can accept the following parameters:
'in'
'out'
'toggle'
'show'
'hide'
Each parameter corresponds to the above method.
Code Example
The above basically covers all basic usages. The following example will use most of what we learned above, display some different sliding elements and provide some divs as indicators so that you can see these events clearly.
First, create the HTML file.
Reference code:
Copy the codeThe code is as follows:
<div class="ind">Start</div>
<div class="ind">Cancel</div>
<div class="ind">Complete</div>
<br /><br />
<button >open A</button>
<button >close A</button>
<div class="slide">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 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.</div>
<button >open B</button>
<button >close B</button>
<div class="slide">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'"</div>
<button >toggle C</button>
<div class="slide">Here is some content - C</div>
<button >toggle D</button>
<div class="slide">Here is some content - D. Notice how I am not hooked into any events. This was done with the .slide shortcut.</div>
<button >toggle E</button>
<div >
<div class="slide">Here is some content - E</div>
</div>
Next is the CSS file. We keep it as simple as possible.
Reference code:
Copy the codeThe 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:
Copy the codeThe code is as follows:
('domready', function() {
// Example A
var slideElement = $('slideA');
var slideVar = new (slideElement, {
// Options
mode: 'horizontal', // Default is 'vertical'
//wrapper: , // Default is
// Fx option
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 the .hide and .show methods do not trigger events
$('openA').addEvent('click', function(){
();
});
$('closeA').addEvent('click', function(){
();
});
// Example B
var slideElementB = $('slideB');
var slideVarB = new (slideElementB, {
// Options
mode: 'vertical', // The default is 'vertical'
// Fx option
// Note: The chain effect allows you to click multiple times.
// When the mouse leaves
// The animations for each click can be triggered in turn
link: 'chain',
// Fx event
onStart: function(){
$('start').highlight("#EBCC22");
},
onCancel: function(){
$('cancel').highlight("#EBCC22");
},
onComplete: function(){
$('complete').highlight("#EBCC22");
}
});
$('openB').addEvent('click', function(){
();
});
$('closeB').addEvent('click', function(){
();
});
// Example C
var slideElementC = $('slideC');
var slideVarC = new (slideElementC, {
// Options
mode: 'vertical', // The default is 'vertical'
//wrapper: , // Default is
// Fx option
//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(){
();
});
$('slideD').slide('hide');
$('openD').addEvent('click', function(){
$('slideD').slide('toggle');
});
// Example C
var slideElementE = $('slideE');
var slideWrap = $('slide_wrap');
var slideVarE = new (slideElementE, {
// Options
//mode: 'vertical', // The default is 'vertical'
wrapper: slideWrap // default is
}).hide();
$('openE').addEvent('click', function(){
();
});
});
Learn more…
It is a multi-functional and very useful plugin. To learn more, seedocument，andFx Documentation。
Also, please read usTutorial on and Fx options and events。
Download the zip compressed file of the last sample code
Contains everything you need to start with.