Simple "Extra Info" tab (TAB)
Move the mouse tab to display content
In this first project, we want to create a simple menu that displays the contents when the mouse is moved to the menu. First, we'll complete the HTML code--we'll use the UL with four listings, and then create four div (each div corresponds to a list item):
Reference code:
Copy Code code as follows:
This is our menu.
<ul id= "Tabs" >
<li id= "One" >One</li>
<li id= "Two" >Two</li>
<li id= "three" >Three</li>
<li id= "Four" >Four</li>
</ul>
Here is our content div
<div id= "Contentone" class= "hidden" >content for one</div>
<div id= "Contenttwo" class= "hidden" >content for two</div>
<div id= "Contentthree" class= "hidden" >content for three</div>
<div id= "Contentfour" class= "hidden" >content for four</div>
Now, we don't need to care how to make them beautiful. In CSS, all we have to do is hide chunks of content:
Reference code: [Copy Code] [Save code]
. Hidden {
Display:none;
}
OK, now start writing MooTools code. If we need to display content when the user moves the mouse over, and when the mouse is left to hide the content, we need to complete two functions:
Reference code:
Copy Code code 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 code 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, we call the Showfunction
and bind this element elone
So we need to take 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 chunks of content. Here's the complete code:
Reference code: [Copy Code] [Save code]
Here's the function 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 ');
To the tab binding event
$ (' one '). Addevents ({
Setting Event Types
and 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 so familiar that it doesn't take 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
Drawing on the above idea, we can easily adjust it to display content when clicked. We use the HTML above 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 while the mouse is away, we need to switch the div in a different way. Perhaps the easiest option is to hide all of them first when clicked, and then only display the current contents of this (the object passed in by the Click event).
Reference code:
Copy Code code 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 hides the other blocks and displays the current block.
Next, we need to adjust our events. First, we need only one event, so we use the. Addevent () method, and then we also need to change the type of event to "click".
Reference code:
Copy Code code 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 Tab's content block
By extending our code above, we can add some deformation effects to show our hidden chunks of content. First, we can create a fx.morph effect like we did before, but here we have to set a different style. Of course, we also need to create our deformation (Morph) objects:
Reference code:
Copy Code code as follows:
var showfunction = function () {
Initialize all styles before deformation
$$ ('. Hiddenm '). Setstyles ({
' Display ': ' None ',
' Opacity ': 0,
' Background-color ': ' #fff ',
' Font-size ': ' 16px '
});
Here we begin to deform 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 Deformed 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'll get an effect like this:
One
Two
Three
Four
Content for one
Content for two
Content for three
Content for four
Note: If you click the above example quickly, you will see multiple content blocks at the same time. Fundamentally, if Showfunction is called before the last deformation is complete, it will not hide other chunk content. 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 div will not appear at the same time.
Reference code:
Copy Code code as follows:
Create a function that hides all elements
You can pass the elements in as parameters.
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
The Fx.element object's reference "This" is then passed in 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 (' Domready ', function () {
Create an array to save the 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 have learned in previous tutorials. Therefore, if you are ready, we recommend that you read the relevant documentation in full. It's 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 the extent of your understanding. (Fdream Note: This means that in this series of tutorials, the coverage 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 all the things you need to start practicing.
