Simple "Extra Information" tag (TAB)
Move the mouse up to display the content TAB
In this first project, we want to create a simple menu that displays the corresponding content when the mouse moves to these menus. First, let's complete the HTML code - we will use the ul containing four list items, and then create four divs (each div corresponds to a list item):
Reference code:
// Here is our menu
<ul >
<li >One</li>
<li >Two</li>
<li >Three</li>
<li >Four</li>
</ul>
// Here is our content div
<div class="hidden">content for one</div>
<div class="hidden">content for two</div>
<div class="hidden">content for three</div>
<div class="hidden">content for four</div>
Now, we don't need to care about how to make them beautiful. In CSS, all we have to do is hide the content blocks:
Reference code: [Copy code] [Save code]
.hidden {
display: none;
}
OK, now start writing MooTools code. If we need to display the content when the user moves the mouse up and hide the content when the mouse leaves, we need to complete two functions like this:
Reference code:
var showFunction = function() {
('display', 'block');
}
var hideFunction = function() {
('display', 'none');
}
There are also some events:
Reference code:
('domready', function() {
// Here we can assign container elements to a variable
var elOne = $('contentone');
$('one').addEvents({
// When the mouse enters, we call showFunction
// and bind this element elOne
// So we need to use it as a function parameter
'mouseenter': (elOne),
'mouseleave': (elOne)
});
});
Now, we just need to repeat this pattern for each tab and specify the corresponding content block. Here is the complete code:
Reference code: [Copy code] [Save code]
// Here is a function to change the style
var showFunction = function() {
('display', 'block');
}
var hideFunction = function() {
('display', 'none');
}
('domready', function() {
// Here we assign our content blocks to different variables
var elOne = $('contentone');
var elTwo = $('contenttwo');
var elThree = $('contentthree');
var elFour = $('contentfour');
// Bind event to tab
$('one').addEvents({
// Set event type
// and bind the corresponding variable to the event control function
'mouseenter': (elOne),
'mouseleave': (elOne)
});
$('two').addEvents({
'mouseenter': (elTwo),
'mouseleave': (elTwo)
});
$('three').addEvents({
'mouseenter': (elThree),
'mouseleave': (elThree)
});
$('four').addEvents({
'mouseenter': (elFour),
'mouseleave': (elFour)
});
});
As you can see, it all looks very familiar, and completing this doesn't require anything we haven't learned so far.
One
Two
Three
Four
content for one
content for two
content for three
content for four
The TAB of the content displayed when clicked
Drawing on the above ideas, we can easily adjust it to the content displayed when clicked. Let's use the HTML above and 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 switch these divs in a different way. Probably the easiest option is to hide them all when clicking, and then display only the current content referred to by this (the object passed in through the click event).
Reference code:
var showFunction = function() {
$$('.hiddenB').setStyle('display', 'none');
('display', 'block');
}
Now, when we pass this variable by binding the element to a function, it will hide other blocks and display 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 also need to change the type of the event to "click".
Reference code:
('domready', function() {
var elOneB = $('contentoneB');
var elTwoB = $('contenttwoB');
var elThreeB = $('contentthreeB');
var elFourB = $('contentfourB');
$('oneB').addEvent('click', (elOneB));
$('twoB').addEvent('click', (elTwoB));
$('threeB').addEvent('click', (elThreeB));
$('fourB').addEvent('click', (elFourB));
});
One
Two
Three
Four
content for one
content for two
content for three
content for four
Add deformation to the content block of Tab
By extending our code above, we can add some deformation effects to show our hidden content blocks. First, we can create an effect like before, but we need to set different styles here. Of course, we also need to create our Morph object:
Reference code:
var showFunction = function() {
// Initialize all styles before deformation
$$('.hiddenM').setStyles({
'display': 'none',
'opacity': 0,
'background-color': '#fff',
'font-size': '16px'
});
// Start the deformation here and specify the style after deformation
({
'display': 'block',
'opacity': 1,
'background-color': '#d3715c',
'font-size': '31px'
});
}
('domready', function() {
var elOneM = $('contentoneM');
var elTwoM = $('contenttwoM');
var elThreeM = $('contentthreeM');
var elFourM = $('contentfourM');
// Create a deformation object
elOneM = new (elOneM, {
link: 'cancel'
});
elTwoM = new (elTwoM, {
link: 'cancel'
});
elThreeM = new (elThreeM, {
link: 'cancel'
});
elFourM = new (elFourM, {
link: 'cancel'
});
$('oneM').addEvent('click', (elOneM));
$('twoM').addEvent('click', (elTwoM));
$('threeM').addEvent('click', (elThreeM));
$('fourM').addEvent('click', (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 on the example above quickly, you will see multiple content blocks appear at the same time. Fundamentally, if the showFunction is called before the previous deformation is completed, it will not hide other block content. To solve this problem, we need to break this rule and make the most of it.
Code Example
The following example is similar to the above example, but when you quickly click on two tabs, multiple content divs will not appear at the same time.
Reference code:
// Create a function that hides all elements
// You can pass elements as parameters
var hideAll = function(fxElementObject){
({
'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 object's reference "this" is passed in as a parameter
hideAll(this);
// Start the deformation animation of the corresponding element
({
'0': {
'display': ['none', 'block'],
'background-color': ['#fff', '#999'],
'font-size': ['16px', '25px']
}
});
}
var showFunctionTwo = function() {
hideAll(this);
({
'1': {
'display': ['none', 'block'],
'background-color': ['#fff', '#999'],
'font-size': ['16px', '25px']
}
});
}
var showFunctionThree = function() {
hideAll(this);
({
'2': {
'display': ['none', 'block'],
'background-color': ['#fff', '#999'],
'font-size': ['16px', '25px']
}
});
}
var showFunctionFour = function() {
hideAll(this);
({
'3': {
'display': ['none', 'block'],
'background-color': ['#fff', '#999'],
'font-size': ['16px', '25px']
}
});
}
('domready', function() {
// Create an array to save
var morphElements = $$('.hiddenMel');
// Create a new object
var elementEffects = new (morphElements, {
// Set the value of the "link" option to cancel
link: 'cancel'
});
$('oneMel').addEvent('click', (elementEffects));
$('twoMel').addEvent('click', (elementEffects));
$('threeMel').addEvent('click', (elementEffects));
$('fourMel').addEvent('click', (elementEffects));
});
More learning
This tutorial is more about reviewing and applying what we learned from previous tutorials. Therefore, if you are still ready, we recommend that you read the corresponding documents comprehensively. This would be 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 at how well you know it. (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 the documents carefully.)
Move the mouse up to display the content TAB
In this first project, we want to create a simple menu that displays the corresponding content when the mouse moves to these menus. First, let's complete the HTML code - we will use the ul containing four list items, and then create four divs (each div corresponds to a list item):
Reference code:
Copy the codeThe code is as follows:
// Here is our menu
<ul >
<li >One</li>
<li >Two</li>
<li >Three</li>
<li >Four</li>
</ul>
// Here is our content div
<div class="hidden">content for one</div>
<div class="hidden">content for two</div>
<div class="hidden">content for three</div>
<div class="hidden">content for four</div>
Now, we don't need to care about how to make them beautiful. In CSS, all we have to do is hide the content blocks:
Reference code: [Copy code] [Save code]
.hidden {
display: none;
}
OK, now start writing MooTools code. If we need to display the content when the user moves the mouse up and hide the content when the mouse leaves, we need to complete two functions like this:
Reference code:
Copy the codeThe code is as follows:
var showFunction = function() {
('display', 'block');
}
var hideFunction = function() {
('display', 'none');
}
There are also some events:
Reference code:
Copy the codeThe code is as follows:
('domready', function() {
// Here we can assign container elements to a variable
var elOne = $('contentone');
$('one').addEvents({
// When the mouse enters, we call showFunction
// and bind this element elOne
// So we need to use it as a function parameter
'mouseenter': (elOne),
'mouseleave': (elOne)
});
});
Now, we just need to repeat this pattern for each tab and specify the corresponding content block. Here is the complete code:
Reference code: [Copy code] [Save code]
// Here is a function to change the style
var showFunction = function() {
('display', 'block');
}
var hideFunction = function() {
('display', 'none');
}
('domready', function() {
// Here we assign our content blocks to different variables
var elOne = $('contentone');
var elTwo = $('contenttwo');
var elThree = $('contentthree');
var elFour = $('contentfour');
// Bind event to tab
$('one').addEvents({
// Set event type
// and bind the corresponding variable to the event control function
'mouseenter': (elOne),
'mouseleave': (elOne)
});
$('two').addEvents({
'mouseenter': (elTwo),
'mouseleave': (elTwo)
});
$('three').addEvents({
'mouseenter': (elThree),
'mouseleave': (elThree)
});
$('four').addEvents({
'mouseenter': (elFour),
'mouseleave': (elFour)
});
});
As you can see, it all looks very familiar, and completing this doesn't require anything we haven't learned so far.
One
Two
Three
Four
content for one
content for two
content for three
content for four
The TAB of the content displayed when clicked
Drawing on the above ideas, we can easily adjust it to the content displayed when clicked. Let's use the HTML above and 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 switch these divs in a different way. Probably the easiest option is to hide them all when clicking, and then display only the current content referred to by this (the object passed in through the click event).
Reference code:
Copy the codeThe code is as follows:
var showFunction = function() {
$$('.hiddenB').setStyle('display', 'none');
('display', 'block');
}
Now, when we pass this variable by binding the element to a function, it will hide other blocks and display 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 also need to change the type of the event to "click".
Reference code:
Copy the codeThe code is as follows:
('domready', function() {
var elOneB = $('contentoneB');
var elTwoB = $('contenttwoB');
var elThreeB = $('contentthreeB');
var elFourB = $('contentfourB');
$('oneB').addEvent('click', (elOneB));
$('twoB').addEvent('click', (elTwoB));
$('threeB').addEvent('click', (elThreeB));
$('fourB').addEvent('click', (elFourB));
});
One
Two
Three
Four
content for one
content for two
content for three
content for four
Add deformation to the content block of Tab
By extending our code above, we can add some deformation effects to show our hidden content blocks. First, we can create an effect like before, but we need to set different styles here. Of course, we also need to create our Morph object:
Reference code:
Copy the codeThe 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 the deformation here and specify the style after deformation
({
'display': 'block',
'opacity': 1,
'background-color': '#d3715c',
'font-size': '31px'
});
}
('domready', function() {
var elOneM = $('contentoneM');
var elTwoM = $('contenttwoM');
var elThreeM = $('contentthreeM');
var elFourM = $('contentfourM');
// Create a deformation object
elOneM = new (elOneM, {
link: 'cancel'
});
elTwoM = new (elTwoM, {
link: 'cancel'
});
elThreeM = new (elThreeM, {
link: 'cancel'
});
elFourM = new (elFourM, {
link: 'cancel'
});
$('oneM').addEvent('click', (elOneM));
$('twoM').addEvent('click', (elTwoM));
$('threeM').addEvent('click', (elThreeM));
$('fourM').addEvent('click', (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 on the example above quickly, you will see multiple content blocks appear at the same time. Fundamentally, if the showFunction is called before the previous deformation is completed, it will not hide other block content. To solve this problem, we need to break this rule and make the most of it.
Code Example
The following example is similar to the above example, but when you quickly click on two tabs, multiple content divs will not appear at the same time.
Reference code:
Copy the codeThe code is as follows:
// Create a function that hides all elements
// You can pass elements as parameters
var hideAll = function(fxElementObject){
({
'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 object's reference "this" is passed in as a parameter
hideAll(this);
// Start the deformation animation of the corresponding element
({
'0': {
'display': ['none', 'block'],
'background-color': ['#fff', '#999'],
'font-size': ['16px', '25px']
}
});
}
var showFunctionTwo = function() {
hideAll(this);
({
'1': {
'display': ['none', 'block'],
'background-color': ['#fff', '#999'],
'font-size': ['16px', '25px']
}
});
}
var showFunctionThree = function() {
hideAll(this);
({
'2': {
'display': ['none', 'block'],
'background-color': ['#fff', '#999'],
'font-size': ['16px', '25px']
}
});
}
var showFunctionFour = function() {
hideAll(this);
({
'3': {
'display': ['none', 'block'],
'background-color': ['#fff', '#999'],
'font-size': ['16px', '25px']
}
});
}
('domready', function() {
// Create an array to save
var morphElements = $$('.hiddenMel');
// Create a new object
var elementEffects = new (morphElements, {
// Set the value of the "link" option to cancel
link: 'cancel'
});
$('oneMel').addEvent('click', (elementEffects));
$('twoMel').addEvent('click', (elementEffects));
$('threeMel').addEvent('click', (elementEffects));
$('fourMel').addEvent('click', (elementEffects));
});
More learning
This tutorial is more about reviewing and applying what we learned from previous tutorials. Therefore, if you are still ready, we recommend that you read the corresponding documents comprehensively. This would be 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 at how well you know it. (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 the documents carefully.)
Download the code for the last example
It also contains everything you need to start practicing.