MooTools - Tabbed Content-alljchome-开发者的教程家园

MooTools Tutorial

MooTools Useful Resources

Selected Reading

MooTools - Tabbed Content

Tabbed content means the content that is present in the tabbed area and that content is related to the pst items. Whenever we apply any actions pke hover or cpck to the pst item, the immediate reaction will create an effect on the tabbed content.

Let us discuss more about tabs.

Creating Simple Tabs

Creating simple menu tabs helps you to explore additional information when you hover over a pst item. First, create an unordered pst with items, then create spans, each one corresponding to the one pst item. Let us take a look at the following HTML code.

Script

<!-- here is our menu -->
<ul id = "tabs">
   <p id = "one">One</p>
   <p id = "two">Two</p>
   <p id = "three">Three</p>
   <p id = "four">Four</p>
</ul>

<!-- and here are our content spans -->
<span id = "contentone" class = "hidden">content for one</span>
<span id = "contenttwo" class = "hidden">content for two</span>
<span id = "contentthree" class = "hidden">content for three</span>
<span id = "contentfour" class = "hidden">content for four</span>

Let us provide some basic support to the above HTML code using CSS that helps in hiding the data. Take a look at the following code.

.hidden {
   display: none;
}

Let us now write a MooTools code that exhibits the tab functionapty. Take a look at the following code.

Example Snippet

//here are our functions to change the styles
var showFunction = function() {
   this.setStyle( display ,  block );
}
var hideFunction = function() {
   this.setStyle( display ,  none );
}
window.addEvent( domready , function() {
   //here we turn our content elements into vars
   var elOne = $( contentone );
   var elTwo = $( contenttwo );
   var elThree = $( contentthree );
   var elFour = $( contentfour );
   //add the events to the tabs
   
   $( one ).addEvents({
      //set up the events types
      //and bind the function with the variable to pass
       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)
   });
});

On combining the above codes, you will get the proper functionapty.

Example

<!DOCTYPE html>
<html>

   <head>
      <style>
         .hidden {
            display: none;
         }
      </style>
      
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      
      <script type = "text/javascript">
         //here are our functions to change the styles
         var showFunction = function() {
            this.setStyle( display ,  block );
         }
         
         var hideFunction = function() {
            this.setStyle( display ,  none );
         }
         
         window.addEvent( domready , function() {
            //here we turn our content elements into vars
            var elOne = $( contentone );
            var elTwo = $( contenttwo );
            var elThree = $( contentthree );
            var elFour = $( contentfour );
            //add the events to the tabs
            
            $( one ).addEvents({
               //set up the events types
               //and bind the function with the variable to pass
                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)
            });
         });
      </script>
   </head>
   
   <body>
      <!-- here is our menu -->
      <ul id = "tabs">
         <p id = "one">One</p>
         <p id = "two">Two</p>
         <p id = "three">Three</p>
         <p id = "four">Four</p>
      </ul>
      
      <!-- and here are our content spans -->
      <span id = "contentone" class = "hidden">content for one</span>
      <span id = "contenttwo" class = "hidden">content for two</span>
      <span id = "contentthree" class = "hidden">content for three</span>
      <span id = "contentfour" class = "hidden">content for four</span>
   </body>
   
</html>

Output

Place your mouse pointer on the pst item, then you will get additional info of the respective item.