Mootools 1.2 Tutorial Slide effect (Slide) _mootools

Source: Internet
Author: User
Tags wrapper mootools
Basic usage
Like all the classes we've seen before, the first thing we do when we apply this class to an element is to initialize a new Fx.slide instance.
First, let's create an HTML file for the sliding element.
Reference code:
Copy Code code as follows:

<div id= "slide_element" class= "Slide" > here is the content to slide the display. </div>

Our CSS does not require any modification.
Reference code:
Copy Code code as follows:

. Slide {
margin:20px 0;
padding:10px;
width:200px;
Background-color: #DAF7B4;
}

Finally, we initialize a new fx.slide and pass our element variables to it.
Reference code:
Copy Code code as follows:

var slideelement = $ (' slide_element ');
var slidevar = new Fx.slide (slideelement, {
Fx.slide Options
Mode: ' Vertical ',//default is ' vertical ' (vertical)
FX Options
Transition: ' Sine:in ',
DURATION:300,
FX Events
Onstart:function () {
$ (' Start '). Highlight ("#EBCC22");
}
});

Since Fx.slide is an extension of FX, you can use any of the options and events for FX, but Fx.slide also has some options of its own.
Fx.slide Options
Fx.slide has only two options-"mode" and "wrapper". Frankly, I've never found myself using "wrapper" (I've never met this requirement), but "mode" determines whether you want to slide horizontally or vertically.
Mode (pattern)
The pattern gives you two choices-"vertical" or "horizontal". The vertical is the display from the top to the bottom, and the horizontal is the display from the left to the right. There are no options from the bottom to the top or from the right to the left. But I know it's relatively straightforward to modify the class itself to implement these functions. In my opinion, I still hope that this will become a standard option, if someone has modified this class and allow these options, please leave us a message.
Wrapper (wrapper)
By default, Fx.slide adds a wrapper to the outside of your sliding element and specifies that the value of its "overflow" property is "hidden". Wrapper allows you to set other elements as wrappers for that element. As I said above, I don't know where it's going to be used, and I'm interested in hearing any thoughts about this thing. (Thanks to Mooforum.net's horseweapon let me know this.) )
The method of Fx.slide
Fx.slide also provides a number of ways to display 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 is likely to show or hide elements, and the result depends entirely on the current state of the element. is useful for clicking events.
. Hide ()
This hides the element, but does not use a sliding effect.
. Show ()
This displays the element, but does not use a sliding effect.
To reset the mode options by means of
Each of the above methods can accept an optional mode parameter, allowing you to overwrite the previously set options.
Reference code:
Copy Code code as follows:

Slidevar.slidein (' horizontal ');

Fx.slide shortcuts
The Fx.slide class also provides some handy shortcuts for adding sliding effects to elements.
. Set (' Slide ');
You can create a new slide instance by adding a slide object to the element using the Set method instead of initializing a new class.
Reference code:
Copy Code code as follows:

Slideelement.set (' slide ');

Setting options
You can even set options by using shortcuts:
Reference code:
Copy Code code as follows:

Slideelement.set (' Slide ', {duration:1250});

. Slide ()
Once you set the slide with the. Set () method, you can initialize it with the. Slide () method.
Reference code:
Copy Code code as follows:

Slideelement.slide (' in ');

The. Slide method can accept the following parameters:
' In '
' Out '
' Toggle '
' Show '
' Hide '
Each parameter corresponds to the above square method.
code example
These basically cover all the basic uses. The following example will use most of the knowledge we have learned to display a few different sliding elements and provide some div as an indicator so that you can see these events clearly.
First, create an HTML file.
Reference code:
Copy Code code as follows:

<div id= "Start" class= "IND" >Start</div>
<div id= "Cancel" class= "IND" >Cancel</div>
<div id= "complete" class= "IND" >Complete</div>
<br/><br/>
<button id= "Opena" >open a</button>
<button id= "Closea" >close a</button>
<div id= "Slidea" class= "slide" >here is some. content-a Notice the delay before. This is due to the transition effect, the oncomplete would not fire until the slide element stops "elasticing." Also, notice that if you click back and forth, it'll "cancel" the previous call and give the new one PRIORITY.&LT;/DIV&G T
<button id= "Openb" >open b</button>
<button id= "Closeb" >close b</button>
<div id= "Slideb" class= "slide" >here is some content-b. Notice How if you click me multiple times quickly I "chain" The events. This slide was set up with the option link: ' Chain ' </div>
<button id= "Openc" >toggle c</button>
<div id= "Slidec" class= "slide" >here is some content-c</div>
<button id= "Opend" >toggle d</button>
<div id= "slided" class= "slide" >here is some content-d. Notice I am not hooked to any events. This is done with the. Slide shortcut.</div>
<button id= "Opene" >toggle e</button>
<div id= "Slide_wrap" >
<div id= "Slidee" class= "slide" >here is some content-e</div>
</div>

Next is the CSS file. Let's keep it as simple as possible.
Reference code:
Copy Code code 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, it's our MooTools JavaScript code:
Reference code:
Copy Code code as follows:

Window.addevent (' Domready ', function () {
Example A
var slideelement = $ (' Slidea ');
var slidevar = new Fx.slide (slideelement, {
Fx.slide Options
Mode: ' horizontal ',//default is ' vertical '
Wrapper:this.element,//default is This.element
FX Options
Link: ' Cancel ',
Transition: ' Elastic:out ',
Duration: ' Long ',
FX Events
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 () {
Slidevar.slidein ();
});
$ (' Closea '). Addevent (' click ', function () {
Slidevar.slideout ();
});
Example B
var slideelementb = $ (' slideb ');
var slidevarb = new Fx.slide (SLIDEELEMENTB, {
Fx.slide Options
Mode: ' Vertical ',//default is ' vertical '
FX Options
Note: The chain effect allows you to click multiple times,
When the mouse leaves,
Each click of the animation can be triggered in turn
Link: ' Chain ',
FX Events
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 Options
Mode: ' Vertical ',//default is ' vertical '
Wrapper:this.element,//default is This.element
FX Options
Link: ' Cancel ',
Transition: ' Sine:in ',
DURATION:300,
FX Events
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 Options
Mode: ' Vertical ',//default is ' vertical '
Wrapper:slidewrap//default is This.element
}). hide ();
$ (' Opene '). Addevent (' click ', function () {
Slidevare.toggle ();
});
});

Learn more ...

Fx.slide is a versatile, very useful plugin. To learn more, view fx.slide documents ,fx.morph , and Fx documents .

Also, be sure to read our tutorials on Fx.morph and FX options and Events .

Download the zip compressed file for the last sample code

Contains all the things you need to get started.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.