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>

เอาต์พุต

คลิกที่ปุ่มสีน้ำตาลบนแถบเลื่อนแนวนอนหรือแนวตั้งจากนั้นลากไปคุณจะพบตำแหน่งขั้นตอนและตัวบ่งชี้เหตุการณ์สำหรับแต่ละการกระทำ