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.