Mootools 1.2 Tutorial Tab Effect (Tabs)_Mootools

Simple "extra information" tags (TAB)
TAB that displays content when the mouse is moved over it
In this first project, we are going to create a simple menu that displays the corresponding content when the mouse is moved over these menus content. First, let's complete the HTML code - let's use the ul containing four list items, and then create four divs (each div corresponds to a list item):
Reference code:

Copy code The code is as follows:

// Here is our menu

• One


• Two


• 
  
• Four

// Here is our content div

content for one

content for two

content for three

content for four

Now, we don’t need to worry about making them beautiful. In CSS, all we have to do is hide the content block:
Reference code: [Copy code] [Save code]
.hidden {
display: none;
}
Okay, now start writing MooTools code. If we need to display content when the user moves the mouse up and hide the content when the mouse leaves, we need to complete these two functions:
Reference code:

Copy 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 :

Copy code The code is as follows:

window.addEvent('domready', function() {
// Here we can assign the container element to a variable
var elOne = $('contentone');
$('one').addEvents({
// When the mouse enters When, we call showFunction
// and bind this element elOne
// Therefore we need to use it as a function parameter
'mouseenter': showFunction.bind(elOne),
'mouseleave' : hideFunction.bind(elOne)
});
});
Now, we just need to repeat this pattern for each tab and specify the corresponding content block. The following is the complete code:
Reference code: [Copy 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( 'domready', function() {
// Here we assign our content blocks to different variables
var elOne = $('contentone');
var elTwo = $('contenttwo') ;
var elThree = $('contentthree');
var elFour = $('contentfour');
// Bind events to tab
$('one').addEvents({
//Set the event type
// Bind the corresponding variables 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, this all looks very familiar, and it doesn’t require anything that we haven’t learned so far.
One
Two
Three
Four
content for one
content for two
content for three
content for four
TAB to display content when clicked
Borrowing the idea from above, we can easily adjust it to display content when clicked. We will use the above HTML, and then modify the MooTools code to complete the click event.
First, we need to adjust our function. Since we can't hide the content when the mouse leaves, we need to find another way to switch these divs. Probably the easiest option is to first hide them all when clicked, and then show only the current content pointed to by this (the object passed in through the click event).
Reference code:

Copy code The code is as follows:

var showFunction = function() {
$$('.hiddenB').setStyle('display', 'none');
this.setStyle('display', 'block');
}

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

Copy code The code is as follows:

window.addEvent('domready ', 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 our code above, we can add some deformation effects to show our hidden content block. First, we can create an Fx.Morph effect as before, but here we will style it differently. Of course, we also need to create our Morph object:
Reference code:

Copy 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'
});
// here Start deformation and specify the deformed style
this.start({
'display': 'block',
'opacity': 1,
'background-color': '#d3715c' ,
'font-size': '31px'
});
}
window.addEvent('domready', 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 something like this:
One
Two
Three
Four
content for one
content for two
content for three
content for four
Note: If you click quickly on the example above, you will see multiple pieces of content appearing at the same time block. Basically, if showFunction is called before the last transformation is completed, it will not hide other block contents. To solve this problem, we need to break this rule and make full use of Fx.Elements.
Code Example
The following example is similar to the above example, but when you click two tabs quickly, multiple content divs will not appear at the same time.
Reference code:

Copy code The code is as follows:

// Create a function that hides 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 function hideAll
// Then the reference "this" of the Fx.element object is used as Pass the parameters into
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('domready', function() {
// Create an array to save Fx. elements
var morphElements = $$('.hiddenMel');
// Create a new Fx.Element object
var elementEffects = new Fx.Elements(morphElements, {
// Set " link" option is 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));
});

More Learning
This tutorial is more about reviewing and applying what we have learned Something I learned from previous tutorials. Therefore, if you are not ready yet, we recommend that you read the corresponding documentation in full. This is more interesting than it sounds. If you are new to this library but have been following this series of tutorials, you may be surprised at how much you understand. (Fdream Note: This means that the content covered in this series of tutorials is not comprehensive enough, so it is strongly recommended that you read all documents carefully.)

Download the code for the last example

Also included is everything you need to get started.