MooTools-タブ付きコンテンツ

タブ付きコンテンツとは、タブ付き領域に存在し、そのコンテンツがリストアイテムに関連するコンテンツを意味します。 hover や click などのアクションをリスト項目に適用するたびに、即時の反応によりタブ付きコンテンツに効果が生じます。

タブについて詳しく説明しましょう。

シンプルなタブの作成

シンプルなメニュータブを作成すると、リストアイテムにカーソルを合わせたときに追加情報を調べることができます。まず、アイテムを含む順序付けられていないリストを作成し、次に、それぞれが1つのリストアイテムに対応する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>

出力

リストアイテムの上にマウスポインターを置くと、それぞれのアイテムの追加情報が表示されます。

マーフコンテンツタブ

コードを拡張することで、非表示のコンテンツが表示されたときにモーフィング機能を追加できます。これを実現するには、スタイリングの代わりに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>

出力

リスト内のいずれかの項目をクリックすると、タブに関する追加情報が表示されます。

Mootools-tabbed-content

目次

MooTools-タブ付きコンテンツ

シンプルなタブの作成

スクリプト

サンプルスニペット

例

出力

マーフコンテンツタブ

例

出力