Учебники

MooTools — вкладка содержимого

Сентябрь 8, 2018

Контент с вкладками означает контент, который присутствует в области вкладок, и этот контент связан с элементами списка. Всякий раз, когда мы применяем какие-либо действия, такие как наведение или нажатие на элемент списка, немедленная реакция будет влиять на содержимое с вкладками.

Давайте обсудим больше о вкладках.

Создание простых вкладок

Создание простых вкладок меню поможет вам изучить дополнительную информацию при наведении курсора на элемент списка. Сначала создайте неупорядоченный список с элементами, затем создайте элементы 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>

Давайте обеспечим некоторую базовую поддержку вышеупомянутого HTML-кода, используя CSS, который помогает скрывать данные. Посмотрите на следующий код. 

.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>

Выход

Нажмите на любой элемент в списке, после чего вы получите дополнительную информацию о вкладках.

37
Share: