Mootools1.2 tutorial tab effect (Tabs) _ Mootools

Today, we will not only be constrained by this library and some basic programming knowledge, but also make a simple small project. You can use several methods to create a tab that displays the corresponding content when you move the cursor up or click it. Simple "Additional Information" TAB)
Move the mouse over the TAB to display the content
In the first project, we will create a simple menu, and the corresponding content will be displayed when you move the mouse over these menus. First, let's complete the HTML code-we can use ul containing four list items, and then create four p (each p corresponds to one list item ):
Reference code:

The Code is as follows:

// Here is our menu

• One


• Two


• Three


• Four

// Here is our content p

Content for one

Content for two

Content for three

Content for four

Now, we don't need to worry about how to make them beautiful. In CSS, all we need to do is to hide the content block:
Reference code: [] [Save Code]
. Hidden {
Display: none;
}
Now, write the MooTools code. If we need to show the content when the user moves the mouse and hide the content when the mouse leaves, we need to complete these two functions:
Reference code:

The Code is as follows:

Var showFunction = function (){
This. setStyle ('display', 'block ');
}
Var hideFunction = function (){
This. setStyle ('display', 'None ');
}

There are also some events:
Reference code:

The Code is as follows:

Window. addEvent ('domainready', function (){
// Here we can assign a container element to a variable
Var elOne = $ ('contentone ');
$ ('One'). addEvents ({
// When the mouse enters, we call showFunction
// Bind this element to elOne
// Therefore, we need to use it as a function parameter.
'Mouseenter': showFunction. bind (elOne ),
'Mouseleave ': hideFunction. bind (elOne)
});
});
Now, we only need to repeat this mode for each tab and specify the corresponding content block. The complete code is as follows:
Reference code: [] [Save Code]
// Here is the function used to change the style
Var showFunction = function (){
This. setStyle ('display', 'block ');
}
Var hideFunction = function (){
This. setStyle ('display', 'None ');
}
Window. addEvent ('domainready', function (){
// Here, we assign the content block to different variables.
Var elOne = $ ('contentone ');
Var elTwo = $ ('contenttwo ');
Var elThree = $ ('contentthree ');
Var elFour = $ ('contentfour ');
// Bind an event to the tab
$ ('One'). addEvents ({
// Set the Event Type
// Bind the corresponding variable to the Event Control Function
'Mouseenter': showFunction. bind (elOne ),
'Mouseleave ': hideFunction. bind (elOne)
});
$ ('Two'). addEvents ({
'Mouseenter': showFunction. bind (elTwo ),
'Mouseleave ': hideFunction. bind (elTwo)
});
$ ('Three '). addEvents ({
'Mouseenter': showFunction. bind (elThree ),
'Mouseleave ': hideFunction. bind (elThree)
});
$ ('Four '). addEvents ({
'Mouseenter': showFunction. bind (elFour ),
'Mouseleave ': hideFunction. bind (elFour)
});
});

As you can see, it all seems very familiar. To do this, you don't need anything we haven't learned so far.
One
Two
Three
Four
Content for one
Content for two
Content for three
Content for four
Click the TAB of the displayed content
Using the above idea, we can easily adjust it to the content displayed on click. We use the above HTML, and then modify the MooTools code to complete the click event.
First, we need to adjust our functions. Because we cannot hide the content when the mouse leaves, we need to switch the p in another way. The easiest choice is to first hide all of them when you click, and then only display the current content referred to by this (the object passed through the click event.
Reference code:

The Code is as follows:

Var showFunction = function (){
$ ('. Hiddenb'). setStyle ('display', 'None ');
This. setStyle ('display', 'block ');
}

Now, when we bind an element to a function to pass this variable, it hides other blocks and displays the current block.
Next, we need to adjust our events. First, we only need one event, so we use the. addEvent (); method, and then we need to change the event type to "click ".
Reference code:

The Code is as follows:

Window. addEvent ('domainready', function (){
Var elOneB = $ ('contentoneb ');
Var elTwoB = $ ('contenttwob ');
Var elThreeB = $ ('contentthreeb ');
Var elFourB = $ ('contentfourb ');
$ ('Oneb'). addEvent ('click', showFunction. bind (elOneB ));
$ ('Twob'). addEvent ('click', showFunction. bind (elTwoB ));
$ ('Threeb '). addEvent ('click', showFunction. bind (elThreeB ));
$ ('Fourb'). addEvent ('click', showFunction. bind (elFourB ));
});

One
Two
Three
Four
Content for one
Content for two
Content for three
Content for four
Add deformation to the content block of the Tab
By extending the code above, we can add some deformation effects to display our hidden content blocks. First, we can create a Fx. Morph effect as before, but we need to set different styles here. Of course, we also need to create our deformation object:
Reference code:

The Code is as follows:

Var showFunction = function (){
// Initialize all styles before deformation
$ ('. Hiddenm'). setStyles ({
'Display': 'none ',
'Opacity ': 0,
'Background-color': '# fff ',
'Font-size': '16px'
});
// Start deformation here and specify the deformation Style
This. start ({
'Display': 'block ',
'Opacity ': 1,
'Background-color': '# d3715c ',
'Font-size': '31px'
});
}
Window. addEvent ('domainready', function (){
Var elOneM = $ ('contentonem ');
Var elTwoM = $ ('contenttwom ');
Var elThreeM = $ ('contentthreem ');
Var elFourM = $ ('contentfourm ');
// Create a deformation object
ElOneM = new Fx. Morph (elOneM ,{
Link: 'cancel'
});
ElTwoM = new Fx. Morph (elTwoM ,{
Link: 'cancel'
});
ElThreeM = new Fx. Morph (elThreeM ,{
Link: 'cancel'
});
ElFourM = new Fx. Morph (elFourM ,{
Link: 'cancel'
});
$ ('Onem '). addEvent ('click', showFunction. bind (elOneM ));
$ ('Twom '). addEvent ('click', showFunction. bind (elTwoM ));
$ ('Threem '). addEvent ('click', showFunction. bind (elThreeM ));
$ ('Fourm'). addEvent ('click', showFunction. bind (elFourM ));
});

If we use the same HTML code as above, we will get a similar effect:
One
Two
Three
Four
Content for one
Content for two
Content for three
Content for four
Note: If you click the example above, you will see multiple Content blocks at the same time. Basically, if showFunction is called before the last deformation is completed, it will not hide other block content. To solve this problem, we need to break this rule and make full use of Fx. Elements.
Sample Code
The example below is similar to the example above. However, when you click two tabs quickly, no content p appears at the same time.
Reference code:

The Code is as follows:

// Create a function to hide all elements
// You can pass the element as a parameter.
Var hideAll = function (fxElementObject ){
FxElementObject. set ({
'0 ':{
'Display': 'none'
},
'1 ':{
'Display': 'none'
},
'2 ':{
'Display': 'none'
},
'3 ':{
'Display': 'none'
}
});
}
// Here we create a function for each content Block
Var showFunctionOne = function (){
// First, call the hideAll function.
// The reference "this" of the Fx. element Object is passed as a parameter.
HideAll (this );
// Start the Fx. element deformation animation of the corresponding element
This. start ({
'0 ':{
'Display': ['none', 'block'],
'Background-color': ['# fff',' #999 '],
'Font-size': ['16px ', '25px']
}
});
}
Var showFunctionTwo = function (){
HideAll (this );
This. start ({
'1 ':{
'Display': ['none', 'block'],
'Background-color': ['# fff',' #999 '],
'Font-size': ['16px ', '25px']
}
});
}
Var showFunctionThree = function (){
HideAll (this );
This. start ({
'2 ':{
'Display': ['none', 'block'],
'Background-color': ['# fff',' #999 '],
'Font-size': ['16px ', '25px']
}
});
}
Var showFunctionFour = function (){
HideAll (this );
This. start ({
'3 ':{
'Display': ['none', 'block'],
'Background-color': ['# fff',' #999 '],
'Font-size': ['16px ', '25px']
}
});
}
Window. addEvent ('domainready', function (){
// Create an array to save Fx. elements
Var morphElements =$ $ ('. hiddenMel ');
// Create a new Fx. Element Object
Var elementEffects = new Fx. Elements (morphElements ,{
// Set the value of the "link" option to cancel.
Link: 'cancel'
});
$ ('Onemel'). addEvent ('click', showFunctionOne. bind (elementEffects ));
$ ('Twomel'). addEvent ('click', showFunctionTwo. bind (elementEffects ));
$ ('Threemel'). addEvent ('click', showFunctionThree. bind (elementEffects ));
$ ('Fourmel'). addEvent ('click', showFunctionFour. bind (elementEffects ));
});

Learn more
This tutorial is more about reviewing and applying what we learned in previous tutorials. Therefore, if you are still prepared, we recommend that you fully read the relevant documents. This is more interesting than it sounds. If you are new to this library, but have been learning this series of tutorials, you may be very surprised to know the degree of understanding. (Fdream note: this means that the content covered in this series of tutorials is not comprehensive enough. Therefore, we strongly recommend that you carefully read all the documents .)

Download the code of the last example

It also contains everything you need to start practicing.