MooTools-Fx.Slide

Fx.Slidesは、ビューにスライドしてコンテンツを表示できるオプションです。これは非常にシンプルですが、UIの外観を向上させます。

Fx.Slide、そのオプション、およびメソッドの作成と初期化について議論しましょう。

最初に、ユーザー定義のインスタンスでFx.Slideクラスを初期化します。そのためには、HTML要素を作成して選択する必要があります。その後、これらの要素にCSSを適用します。最後に、要素変数を使用してFx.Slideの新しいインスタンスを開始します。

Fx.Slideオプション

Fx.Slideオプションは2つだけです-モードとラッパー。

Mode

モードには、「垂直」または「水平」の2つの選択肢があります。垂直方向は上から下、水平方向は左から右に表示されます。下から上へ、または右から左へ進むオプションはありません。これを達成するためにクラス自体をハッキングするのは比較的簡単だと理解しています。私の意見では、これは私が標準を見たいオプションです。このオプションを許可するためにクラスをハッキングした人がいれば、私たちにメモを残してください。

ラッパー

デフォルトでは、Fx.Slideはスライド要素にラッパーをスローし、「オーバーフロー」：「非表示」を与えます。ラッパーを使用すると、別の要素をラッパーとして設定できます。上で言ったように、これがどこで役に立つかわからず、考えを聞くことに興味があるでしょう（mooforum.netのhorseweaponにこれを解決してくれてありがとう）。

Fx.Slideメソッド

Fx.Slideは、要素を表示および非表示にするための多くのメソッドも備えています。

slideIn（）

名前が示すように、このメソッドは開始イベントを起動し、要素を公開します。

slideOut（）

要素を非表示の状態に戻します。

トグル（）

これは、現在の状態に応じて、要素を内側または外側にスライドさせます。クリックイベントに追加する非常に便利な方法。

隠す（）

これにより、スライド効果なしで要素が非表示になります。

show（）

これにより、スライド効果のない要素が表示されます。

Fx.Slideのショートカット

Fx.Slideクラスは、要素に効果を追加するための便利なショートカットも提供します。

セット（「スライド」）

新しいクラスを開始する代わりに、要素にスライドを設定すると、新しいインスタンスを作成できます。

構文

slideElement.set('slide');

設定オプション

あなたもショートカットでオプションを設定することができます-

構文

slideElement.set('slide', {duration: 1250});

滑り台（）

スライドが.set（）になったら、.slide（）メソッドで開始できます。

構文

slideElement.slide('in');

*.slide* は受け入れます-

‘in’
'でる'
'トグル'
「ショー」
'隠す'

…それぞれ上記の方法に対応しています。

例

Fx.Slideについて説明する例を見てみましょう。次のコードを見てください。

<!DOCTYPE html>
<html>

   <head>
      <style>
         .ind {
            width: 200px;
            padding: 10px;
            background-color: #87AEE1;
            font-weight: bold;
            border-bottom: 1px solid white;
         }
         .slide {
            margin: 20px 0;
            padding: 10px;
            width: 200px;
            background-color: #F9E79F;
         }
         #slide_wrap {
            padding: 30px;
            background-color: #D47000;
         }
      </style>

      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>

      <script type = "text/javascript">
         window.addEvent('domready', function() {
            var slideElement = $('slideA');

            var slideVar = new Fx.Slide(slideElement, {
              //Fx.Slide Options
               mode: 'horizontal',//default is 'vertical'

              //wrapper: this.element,//default is this.element
              //Fx Options
               link: 'cancel',
               transition: 'elastic:out',
               duration: 'long',

              //Fx Events
               onStart: function(){
                  $('start').highlight("#EBCC22");
               },

               onCancel: function(){
                  $('cancel').highlight("#EBCC22");
               },

               onComplete: function(){
                  $('complete').highlight("#EBCC22");
               }
            }).hide().show().hide();//note, .hide and .show do not fire events

            $('openA').addEvent('click', function(){
               slideVar.slideIn();
            });

            $('closeA').addEvent('click', function(){
               slideVar.slideOut();
            });

           //EXAMPLE B
            var slideElementB = $('slideB');
            var slideVarB = new Fx.Slide(slideElementB, {

              //Fx.Slide Options
               mode: 'vertical',//default is 'vertical'
               link: 'chain',

              //Fx Events
               onStart: function(){
                  $('start').highlight("#EBCC22");
               },

               onCancel: function(){
                  $('cancel').highlight("#EBCC22");
               },

               onComplete: function(){
                  $('complete').highlight("#EBCC22");
               }
            });

            $('openB').addEvent('click', function(){
               slideVarB.slideIn();
            });

            $('closeB').addEvent('click', function(){
               slideVarB.slideOut();
            });
         });
      </script>
   </head>

   <body>
      <div id = "start" class = "ind">Start</div>
      <div id = "cancel" class = "ind">Cancel</div>
      <div id = "complete" class = "ind">Complete</div>

      <button id = "openA">open A</button>
      <button id = "closeA">close A</button>

      <div id = "slideA" class = "slide">Here is some content - A. Notice the delay
         before onComplete fires.  This is due to the transition effect, the onComplete
         will not fire until the slide element stops "elasticing." Also, notice that
         if you click back and forth, it will "cancel" the previous call and give the
         new one priority.</div>

      <button id = "openB">open B</button>
      <button id = "closeB">close B</button>

      <div id = "slideB" class = "slide">Here is some content - B. Notice how
         if you click me multiple times quickly I "chain" the events.  This slide is
         set up with the option "link: 'chain'"</div>

   </body>
</html>

出力

ボタン-openA、closeA、openB、closeBをクリックします。インジケーターの変更、効果、イベント通知を確認します。

Mootools-fxslide

目次