MooTools-탭 콘텐츠

탭 컨텐츠는 탭 영역에있는 컨텐츠를 의미하며 해당 컨텐츠는 목록 항목과 관련됩니다. 다음과 같은 조치를 적용 할 때마다hover 또는 click 목록 항목에 대한 즉각적인 반응은 탭 콘텐츠에 영향을줍니다.

탭에 대해 자세히 알아 보겠습니다.

간단한 탭 만들기

간단한 메뉴 탭을 만들면 목록 항목 위로 마우스를 가져갈 때 추가 정보를 탐색하는 데 도움이됩니다. 먼저 항목으로 정렬되지 않은 목록을 만든 다음 각각 하나의 목록 항목에 해당하는 div를 만듭니다. 다음 HTML 코드를 살펴 보겠습니다.

스크립트

<!-- here 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>

<!-- and here are our content divs -->
<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>

데이터를 숨기는 데 도움이되는 CSS를 사용하여 위의 HTML 코드에 대한 몇 가지 기본 지원을 제공하겠습니다. 다음 코드를 살펴보십시오.

.hidden {
   display: none;
}

이제 탭 기능을 보여주는 MooTools 코드를 작성해 보겠습니다. 다음 코드를 살펴보십시오.

스 니펫 예

//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)
   });
});

위의 코드를 결합하면 적절한 기능을 얻을 수 있습니다.

<!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">
         <li id = "one">One</li>
         <li id = "two">Two</li>
         <li id = "three">Three</li>
         <li id = "four">Four</li>
      </ul>
      
      <!-- and here are our content divs -->
      <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>
   </body>
   
</html>

산출

목록 항목에 마우스 포인터를 놓으면 해당 항목에 대한 추가 정보를 얻을 수 있습니다.

Marph 콘텐츠 탭

코드를 확장하면 숨겨진 콘텐츠가 표시 될 때 모프 기능을 추가 할 수 있습니다. 스타일링 대신 Fx.Morph 효과를 사용하여이를 달성 할 수 있습니다.

다음 코드를 살펴보십시오.

<!DOCTYPE html>
<html>

   <head>
      <style>
         .hiddenM {
            display: none;
         }
      </style>
      
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      
      <script type = "text/javascript">
         var showFunction = function() {
            //resets all the styles before it morphs the current one
            
            $$('.hiddenM').setStyles({
               'display': 'none',
               'opacity': 0,
               'background-color': '#fff',
               'font-size': '16px'
            });
            
            //here we start the morph and set the styles to morph to
            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');
            //creat morph 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));
         });
      </script>
   </head>
   
   <body>
      <!-- here is our menu -->
      <ul id = "tabs">
         <li id = "oneM">One</li>
         <li id = "twoM">Two</li>
         <li id = "threeM">Three</li>
         <li id = "fourM">Four</li>
      </ul>
      
      <!-- and here are our content divs -->
      <div id = "contentoneM" class = "hiddenM">content for one</div>
      <div id = "contenttwoM" class = "hiddenM">content for two</div>
      <div id = "contentthreeM" class = "hiddenM">content for three</div>
      <div id = "contentfourM" class = "hiddenM">content for four</div>
   </body>
   
</html>

산출

목록에서 하나의 항목을 클릭하면 탭에 대한 추가 정보를 얻을 수 있습니다.