MooTools - ตัวเลื่อน
Slider คือฟังก์ชันที่แสดงถึงการกระทำในขณะที่เลื่อนลูกบิดหรือปุ่มใด ๆ คุณสามารถสร้างแถบเลื่อนของคุณเองในขณะที่กำหนดองค์ประกอบตัวจัดการตัวเลือกและเรียกเหตุการณ์กลับได้ ให้เราพูดคุยเพิ่มเติมเกี่ยวกับแถบเลื่อน
การสร้างตัวเลื่อนใหม่
ก่อนอื่นเราต้องเลือกองค์ประกอบ HTML ที่เหมาะสมสำหรับแถบเลื่อน ในขณะที่พิจารณาแนวคิดพื้นฐานองค์ประกอบ div เหมาะสมที่สุดสำหรับแถบเลื่อนเนื่องจากการใช้ div เราสามารถสร้างองค์ประกอบย่อยได้ ตอนนี้เราต้องตั้งค่า CSS สำหรับ div เหล่านั้นเพื่อให้โครงสร้าง div เป็นแถบเลื่อนที่สมบูรณ์แบบ ที่นี่ div พาเรนต์มีไว้สำหรับslider และ div เด็กมีไว้สำหรับ knob.
ตอนนี้เราต้องใช้ div เหล่านี้เป็นตัวเลื่อนโดยส่งผ่านองค์ประกอบไปยังตัวสร้าง Slider เป็น sliderObjectและ knobObject. ดูไวยากรณ์ต่อไปนี้สำหรับการกำหนดแถบเลื่อน
ไวยากรณ์
var SliderObject = new Slider(sliderObject , knobObject , [,options,],..);เราต้องกำหนดตัวเลือกแถบเลื่อนด้วย
ตัวเลือกแถบเลื่อน
ให้เราพูดถึงตัวเลือกบางอย่างที่ใช้สำหรับแถบเลื่อน
Snap
ค่าสแน็ปอาจเป็นค่าจริงหรือเท็จก็ได้ สิ่งนี้กำหนดว่าลูกบิดจะยึดเข้ากับขั้นตอนหรือไม่ขณะที่ลากไปตามแถบเลื่อน โดยค่าเริ่มต้นจะเป็นเท็จ
ออฟเซ็ต
นี่คือค่าชดเชยสัมพัทธ์ของลูกบิดจากตำแหน่งเริ่มต้น ลองทดลองกับตัวนี้ โดยค่าเริ่มต้นจะเป็น 0
พิสัย
นี่เป็นตัวเลือกที่มีประโยชน์มาก คุณสามารถกำหนดช่วงของตัวเลขที่จะแบ่งขั้นตอน ตัวอย่างเช่นหากช่วงของคุณคือ [0, 200] และคุณมี 10 ขั้นตอนของคุณจะห่างกัน 20 ก้าว ช่วงนี้ยังสามารถรวมตัวเลขติดลบเช่น [-10, 0] ซึ่งมีประโยชน์มากเมื่อย้อนกลับการเลื่อน โดยค่าเริ่มต้นจะเป็นเท็จ
ล้อ
ตั้งวงล้อเป็นจริงและตัวเลื่อนจะรับรู้เหตุการณ์เมาส์วีล เมื่อใช้มูสวีลคุณอาจต้องปรับเปลี่ยนช่วงเพื่อให้แน่ใจว่าเหตุการณ์มูสวีลจะไม่กลับด้าน (อีกครั้งและเพิ่มเติมในภายหลัง)
ขั้นตอน
ค่าเริ่มต้น 100 ขั้นตอนมีประโยชน์มากเนื่องจากใช้เป็นเปอร์เซ็นต์ได้ง่าย อย่างไรก็ตามคุณสามารถกำหนดขั้นตอนต่างๆ (ที่ใช้งานได้) ภายในเหตุผล โดยค่าเริ่มต้นคือ 100
โหมด
โหมดจะกำหนดว่าแถบเลื่อนจะลงทะเบียนตัวเองเป็นแนวตั้งหรือแนวนอน อย่างไรก็ตามยังมีขั้นตอนที่จำเป็นอีกสองสามขั้นตอนในการแปลงจากแนวนอนและแนวตั้ง โดยค่าเริ่มต้นจะเป็นแนวนอน
เหตุการณ์การโทรกลับ
มีเหตุการณ์การเรียกกลับที่สำคัญสามเหตุการณ์ที่ Slider มีให้
onChange
การเปลี่ยนแปลงใด ๆ ในขั้นตอนปัจจุบันจะทริกเกอร์การดำเนินการของเหตุการณ์ ลองดูตัวอย่างที่ให้ไว้ด้านล่างเพื่อดูว่ามันทำงานเมื่อใด
onTick
การเปลี่ยนแปลงตำแหน่งของจุดจับจะทริกเกอร์การดำเนินการของเหตุการณ์นี้ ดูตัวอย่างด้านล่างเพื่อดูว่าสิ่งนี้ดำเนินการอย่างไร
onComplete
เหตุการณ์นี้จะดำเนินการเมื่อใดก็ตามที่มีการปล่อยแฮนเดิล ลองดูตัวอย่างที่ให้ไว้ด้านล่างเพื่อดูว่ามันทำงานเมื่อใด
ตัวอย่าง
ตัวอย่างต่อไปนี้อธิบายแถบเลื่อนแนวนอนและแนวตั้งพร้อมกับตัวบ่งชี้เหตุการณ์ ดูรหัสต่อไปนี้
<!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>เอาต์พุต
คลิกที่ปุ่มสีน้ำตาลบนแถบเลื่อนแนวนอนหรือแนวตั้งจากนั้นลากไปคุณจะพบตำแหน่งขั้นตอนและตัวบ่งชี้เหตุการณ์สำหรับแต่ละการกระทำ