Учебники

MooTools — Fx.Element

Сентябрь 8, 2018

Fx.Element позволяет добавлять функциональность Fx к нескольким элементам dom на одной странице. На самом деле Fx.Element является расширением плагина Fx.Morph. Единственная разница между Fx.Element и Fx.Morph заключается в синтаксисе. В этом синтаксисе метод start ({}) используется для создания эффекта, а метод .set ({}) — для установки некоторых стилей.

Взгляните на следующий синтаксис для Fx.Element.

Синтаксис 

var fxElementsArray = $$('.myElementClass');
var fxElementsObject = new Fx.Elements(fxElementsArray, {
   //Fx Options
   link: 'chain',
   duration: 1000,
   transition: 'sine:in:out',
   
   //Fx Events
   onStart: function(){
      startInd.highlight('#C3E608');
   }
});

начать ({}) и установить ({})

Начать и установить ключевые структуры используются для запуска и установки стилей. Но в этой структуре вы обращаетесь к элементу через индекс — первый элемент равен 0, второй — 1 и т. Д. Взгляните на следующий синтаксис для структур Start и Set.

Синтаксис 

//you can set your styles with .set({...})
fxElementsObject .set({
   '0': {
      'height': 10,
      'width': 10,
      'background-color': '#333'
   },
   '1': {
      'width': 10,
      'border': '1px dashed #333'
   }
});

//or create a transition effect with .start({...})
fxElementsObject .start({
   '0': {
      'height': [50, 200],
      'width': 50,
      'background-color': '#87AEE1'
   },
   '1': {
      'width': [100, 200],
      'border': '5px dashed #333'
   }
});

пример

Давайте возьмем пример, который объясняет элемент Fx.Element. Посмотрите на следующий код. 

<!DOCTYPE html>
<html>

   <head>
      <style>
         .ind {
            width: 200px;
            padding: 10px;
            background-color: #87AEE1;
            font-weight: bold;
            border-bottom: 1px solid white;
         }
         .myElementClass {
            height: 50px;
            width: 100px;
            background-color: #FFFFCC;
            border: 1px solid #FFFFCC;
            padding: 20px;
         }
         #buttons {
            margin: 20px 0;
            display: block;
         }
      </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">
         var startFXElement = function(){
            this.start({
               '0': {
                  'height': [50, 100],
                  'width': 50,
                  'background-color': '#87AEE1'
               },
               
               '1': {
                  'width': [100, 200],
                  'border': '5px dashed #333'
               }
            });
         }
         
         var startFXElementB = function(){
            this.start({
               '0': {
                  'width': 300,
                  'background-color': '#333'
               },
               
               '1': {
                  'width': 300,
                  'border': '10px solid #DC1E6D'
               }
            });
         }
         
         var setFXElement = function(){
            this.set({
               '0': {
                  'height': 50,
                  'background-color': '#FFFFCC',
                  'width': 100
               },
               
               '1': {
                  'height': 50,
                  'width': 100,
                  'border': 'none'
               }
            });
         }
         
         window.addEvent('domready', function() {
            var fxElementsArray = $$('.myElementClass');
            var startInd = $('start_ind');
            var cancelInd = $('cancel_ind');
            var completeInd = $('complete_ind');
            var chainCompleteInd = $('chain_complete_ind');
            
            var fxElementsObject = new Fx.Elements(fxElementsArray, {
               //Fx Options
               link: 'chain',
               duration: 1000,
               transition: 'sine:in:out',
               
               //Fx Events
               onStart: function(){
                  startInd.highlight('#C3E608');
               },
               
               onCancel: function(){
                  cancelInd.highlight('#C3E608');
               },
               
               onComplete: function(){
                  completeInd.highlight('#C3E608');
               },
               
               onChainComplete: function(){
                  chainCompleteInd.highlight('#C3E608');
               }
            });
            
            $('fxstart').addEvent('click', startFXElement.bind(fxElementsObject));
            $('fxstartB').addEvent('click', startFXElementB.bind(fxElementsObject));
            $('fxset').addEvent('click', setFXElement.bind(fxElementsObject));
            $('fxpause').addEvent('click', function(){
               fxElementsObject.pause();
            });
            $('fxresume').addEvent('click', function(){
               fxElementsObject.resume();
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "start_ind" class = "ind">onStart</div>
      <div id = "cancel_ind" class = "ind">onCancel</div>
      <div id = "complete_ind" class = "ind">onComplete</div>
      <div id = "chain_complete_ind" class = "ind">onChainComplete</div>
      
      <span id = 'buttons'>
         <button id = "fxstart">Start A</button>
         <button id = "fxstartB">Start B</button>
         <button id = "fxset">Reset</button>
         <button id = "fxpause">Pause</button>
         <button id = "fxresume">Resume</button>
      </span>
      
      <div class = "myElementClass">Element 0</div>
      <div class = "myElementClass">Element 1</div>
   </body>
   
</html>

Вы получите следующий вывод —

43
Share: