MooTools - Kaydırıcılar

Kaydırıcı, düğmeyi veya herhangi bir düğmeyi kaydırırken bir eylemi yansıtan bir işlevdir. Öğeleri, işleyiciyi, seçenekleri tanımlarken ve olayları geri çağırırken kendi kaydırıcınızı oluşturabilirsiniz. Kaydırıcı hakkında daha fazla tartışalım.

Yeni Bir Kaydırıcı Oluşturma

Öncelikle kaydırıcı için uygun HTML öğelerini seçmeliyiz. Temel fikir göz önüne alındığında, div öğeleri kaydırıcılar için en uygun olanıdır çünkü div'leri kullanarak alt öğeler oluşturabiliriz. Şimdi div yapısını mükemmel bir kaydırıcı yapmak için bu div'ler için CSS'yi ayarlamamız gerekiyor. Burada, üst div,slider ve çocuk div knob.

Öğeleri Slider yapıcısına şu şekilde geçirerek bu div'leri kaydırıcı olarak kullanmalıyız. sliderObject, ve knobObject. Kaydırıcıyı tanımlamak için aşağıdaki sözdizimine bir göz atın.

Sözdizimi

var SliderObject = new Slider(sliderObject , knobObject , [,options,],..);

Kaydırıcı seçeneklerini de tanımlamalıyız.

Kaydırıcı Seçenekleri

Kaydırıcılar için kullanılan birkaç seçeneği tartışalım.

Snap

Bir anlık değer doğru veya yanlış bir değer olabilir. Bu, düğmenin kaydırıcı boyunca sürüklenirken adımlara yaslanıp yapışmayacağını belirler. Varsayılan olarak yanlıştır.

Ofset

Bu, topuzun başlangıç ​​konumundan göreceli ofsetidir. Bununla denemeyi deneyin. Varsayılan olarak 0'dır.

Aralık

Bu çok kullanışlı bir seçenektir. Adımların gireceği bir sayı aralığı belirleyebilirsiniz. Örneğin, aralığınız [0, 200] ise ve 10 adımınız varsa, adımlarınız 20 ayrı olacaktır. Aralık, negatif sayılar da içerebilir, örneğin [-10, 0], bu, kaydırılanı ters çevirirken çok kullanışlıdır. Varsayılan olarak yanlıştır.

Tekerlek

Tekerleği true olarak ayarlayın ve kaydırma çubuğu fare tekerleği olayını tanıyacaktır. Fare tekerleğini kullanırken, fare tekerleği olayının tersine çevrilmiş görünmemesini sağlamak için aralığı ayarlamanız gerekebilir (yine, bundan sonra daha fazlası).

Adımlar

Yüzde olarak kullanımı kolay olduğu için varsayılan 100 adım çok kullanışlıdır. Bununla birlikte, mantık dahilinde (kullanılabilir olan) çok sayıda adım belirleyebilirsiniz. Varsayılan olarak 100'dür.

Mod

Mod, bir kaydırıcının kendisini dikey mi yoksa yatay mı kaydedeceğini tanımlayacaktır. Bununla birlikte, yatay ve dikeyden dönüştürmek için birkaç gerekli adım daha vardır. Varsayılan olarak yataydır.

Geri Arama Olayları

Bir Slider'ın sağladığı üç önemli geri arama olayı vardır.

onChange

Mevcut adımdaki herhangi bir değişiklik, olayın yürütülmesini tetikler. Ne zaman çalıştığını görmek için aşağıda verilen örneğe bakın.

onTick

Tutamacın pozisyonundaki herhangi bir değişiklik, bu olayın yürütülmesini tetikler. Bunun ne çalıştırdığını görmek için aşağıdaki örneğe bakın.

onComplete

Bu olay, tutamaç bırakıldığında yürütülür. Ne zaman çalıştığını görmek için aşağıda verilen örneğe bakın.

Misal

Aşağıdaki örnek, olay göstergeleriyle birlikte yatay ve dikey kaydırıcıyı açıklamaktadır. Aşağıdaki koda bir göz atın.

<!DOCTYPE html>
<html>

   <head>
      <style "text/css">
         #slider {
            width: 200px;
            height: 20px;
            background-color: #0099FF;
         }
         #knob {
            width: 20px;
            height: 20px;
            background-color: #993333;
         }
         #sliderv {
            width: 20px;
            height: 200px;
            background-color: #0099FF;
         }
         #knobv {
            width: 20px;
            height: 20px;
            background-color: #993333;
         }
         #change{
            background-color: burlywood;
            border: 2px solid black;
            width: 200px;
         }
         #complete{
            background-color: burlywood;
            border: 2px solid black;
            width: 200px;
         }
      </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 SliderObject = new Slider('slider', 'knob', {
               //options
               range: [0, 10],
               snap: false,
               steps: 10,
               offset: 0,
               wheel: true,
               mode: 'horizontal',
               
               //callback events
               onChange: function(step){
                  $('change').highlight('#F3F825');
                  $('steps_number').set('html', step);
               },
               
               onTick: function(pos){
                  $('tick').highlight('#F3F825');
                  $('knob_pos').set('html', pos);
                  
                  //this line is very necessary (left with horizontal)
                  this.knob.setStyle('left', pos);
               },
               
               onComplete: function(step){
                  $('complete').highlight('#F3F825')
                  $('steps_complete_number').set('html', step);
                  this.set(step);
               }
            });
            
            var SliderObjectV = new Slider('sliderv', 'knobv', {
               range: [-10, 0],
               snap: true,
               steps: 10,
               offset: 0,
               wheel: true,
               mode: 'vertical',
               onChange: function(step){
                  $('stepsV_number').set('html', step*-1);
               }
            });
            
            //sets the vertical one to start at 0
            //without this it would start at the top
            SliderObjectV.set(0);
            
            //sets the slider to step 7
            $('set_knob').addEvent('click', function(){ SliderObject.set(7)});
         });
      </script>
   </head>
   
   <body>
      <div id = "slider">
         <div id = "knob"></div>
      </div><br/><br/>
      
      <div id = "sliderv">
         <div id = "knobv"></div>
      </div><br/>
      
      <span id = "stepsV_number"></span> <br/>
      
      <div id = "change" class = "indicator">
         <strong>onChange</strong><br/>
         Passes the step you are on: <span id = "steps_number"></span>
      </div></br/>
      
      <div id = "complete" class = "indicator">
         <strong>onComplete</strong><br />
         passes the current step: <span id = "steps_complete_number"></span>
      </div>
      
   </body>
</html>

Çıktı

Yatay veya dikey kaydırıcılar üzerindeki kahverengi düğmeyi tıklayın ve ardından sürükleyin, her eylem için adım konumunu ve olay göstergesini bulacaksınız.