MooTools - Fx.Slide

Fx.Slides to opcja, która pozwala wyświetlać zawartość przez przesuwanie do widoku. Jest to bardzo proste, ale poprawia wygląd interfejsu użytkownika.

Porozmawiajmy o tworzeniu i inicjowaniu Fx.Slide, jego opcjach i metodach.

Najpierw zainicjujemy klasę Fx.Slide za pomocą instancji zdefiniowanej przez użytkownika. W tym celu musimy stworzyć i wybrać element HTML. Następnie zastosujemy CSS do tych elementów. Na koniec zainicjujemy nową instancję Fx.Slide z naszą zmienną element.

Opcje Fx.Slide

Istnieją tylko dwie opcje Fx.Slide - tryb i opakowanie.

Tryb

Tryb zapewnia dwie możliwości: „pionową” lub „poziomą”. Pionowe odsłania od góry do dołu i poziome odsłania od lewej do prawej. Nie ma opcji przejścia od dołu do góry ani od prawej do lewej, ale rozumiem, że hakowanie samej klasy w celu osiągnięcia tego jest stosunkowo proste. Moim zdaniem jest to opcja, którą chciałbym zobaczyć standard i jeśli ktoś włamał się do klasy, aby zezwolić na tę opcję, napisz do nas.

Obwoluta

Domyślnie Fx.Slide otacza element slajdu otoką, nadając mu „przepełnienie”: „ukryty”. Wrapper umożliwia ustawienie innego elementu jako opakowania. Tak jak powiedziałem powyżej, nie jestem pewien, gdzie to się przydaje, i byłbym zainteresowany usłyszeniem jakichkolwiek myśli (dzięki koniu z mooforum.net za pomoc w wyjaśnieniu tego).

Metody Fx.Slide

Fx.Slide oferuje również wiele metod pokazywania i ukrywania twojego elementu.

slideIn ()

Jak sama nazwa wskazuje, ta metoda uruchomi zdarzenie początkowe i ujawni twój element.

wysuń()

Wsuwa element z powrotem do stanu ukrytego.

przełącznik()

Spowoduje to wsunięcie lub wysunięcie elementu, w zależności od jego aktualnego stanu. Bardzo przydatna metoda dodawania do zdarzeń kliknięcia.

ukryć()

Spowoduje to ukrycie elementu bez efektu ślizgania.

pokazać()

Spowoduje to wyświetlenie elementu bez efektu slajdu.

Fx.Slide Shortcuts

Klasa Fx.Slide udostępnia również przydatne skróty do dodawania efektów do elementu.

zestaw ('slajd')

Zamiast inicjować nową klasę, możesz utworzyć nową instancję, jeśli „ustawisz” slajd na elemencie.

Syntax

slideElement.set('slide');

opcje ustawień

Możesz nawet ustawić opcje za pomocą skrótu -

Syntax

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

ślizgać się()

Gdy slajd to .set (), możesz go zainicjować metodą .slide ().

Syntax

slideElement.slide('in');

.slide zaakceptuje -

‘in’
‘out’
‘toggle’
’show’
‘hide’

… Każdy odpowiada powyższym metodom.

Example

Weźmy przykład wyjaśniający Fx.Slide. Spójrz na poniższy kod.

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

Output

Kliknij przyciski - openA, closeA, openB i closeB. Obserwuj zmiany, efekty i powiadomienia o zdarzeniach na wskaźnikach.