script.aculo.us - स्लाइडर्स बनाएँ

स्लाइडर्स उन पर एक या अधिक हैंडल के साथ पतले ट्रैक होते हैं जिन्हें उपयोगकर्ता ट्रैक के साथ खींच सकता है।

एक स्लाइडर का लक्ष्य संख्यात्मक मान को परिभाषित करने के लिए एक वैकल्पिक इनपुट विधि प्रदान करना है; स्लाइडर एक सीमा का प्रतिनिधित्व करता है, और ट्रैक के साथ एक हैंडल को स्लाइड करना इस सीमा के भीतर एक मान को परिभाषित करता है।

स्लाइडर्स क्षैतिज या ऊर्ध्वाधर अभिविन्यास में हो सकते हैं। जब क्षैतिज, ट्रैक का बायां छोर आमतौर पर सबसे कम मूल्य का प्रतिनिधित्व करता है, जबकि एक ऊर्ध्वाधर अभिविन्यास में, स्लाइड के नीचे आमतौर पर सबसे कम मूल्य होता है।

Script.aculo.us की स्लाइडर क्षमताओं का उपयोग करने के लिए, आपको प्रोटोटाइप.js मॉड्यूल के साथ स्लाइडर.जेएस मॉड्यूल को लोड करना होगा। तो आपके लिए script.aculo.us की न्यूनतम लोडिंग इस तरह होगी -

<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load=slider">< /script>

एक स्लाइडर नियंत्रण बनाना

स्लाइडर बनाना, हमेशा की तरह, आपके पृष्ठ के DOM में कुछ मौजूदा तत्वों पर एक कस्टम ऑब्जेक्ट बनाने का मामला है। आपको यहां दो तत्वों की आवश्यकता होगी, एक हैंडल के लिए और एक ट्रैक के लिए निम्नानुसार है -

new Control.Slider(handle, track [ , options ] );

ट्रैक तत्व आमतौर पर एक <div> है, और ट्रैक तत्व के भीतर हैंडल तत्व एक <div> या <span> है। दोनों को हमेशा की तरह अपनी आईडी = या सीधे DOM संदर्भ द्वारा पारित किया जा सकता है।

स्लाइडर विकल्प

अपने स्लाइडर ऑब्जेक्ट को बनाते समय आप निम्न विकल्पों में से एक या अधिक का उपयोग कर सकते हैं।

अनु क्रमांक	विकल्प और विवरण
1	Axis नियंत्रण के अभिविन्यास को क्षैतिज या ऊर्ध्वाधर के रूप में परिभाषित करता है । डिफ़ॉल्ट अभिविन्यास क्षैतिज है ।
2	Range स्लाइडर ऑब्जेक्ट्स की सीमा को एक प्रोटोटाइप ऑब्जेक्टRange उदाहरण के उदाहरण के रूप में परिभाषित करता है। 1 के माध्यम से 0 से चूक।
3	Values मानों के असतत सेट को परिभाषित करता है जिसे स्लाइडर अधिग्रहण कर सकता है। यदि छोड़ा गया है, तो सीमा के भीतर सभी मान सेट किए जा सकते हैं।
4	sliderValue स्लाइडर का प्रारंभिक मूल्य सेट करता है। यदि छोड़ा गया है, तो स्लाइडर के बाईं ओर (या शीर्ष-सबसे) द्वारा दर्शाया गया मूल्य प्रारंभिक मूल्य है।
5	Disabled यदि यह सच है, तो यह एक स्लाइड बनाता है जो शुरू में अक्षम है। असत्य से असत्य की रक्षा करना।
6	setValue स्लाइडर के मूल्य को अद्यतन करेगा और इस प्रकार स्लाइडर हैंडल को उचित स्थिति में ले जाएगा।
7	setDisabled स्लाइडर को अक्षम स्थिति (अक्षम = सत्य) पर सेट करेगा।
8	setEnabled स्लाइडर को सक्षम स्थिति में सेट करेगा (अक्षम = गलत)।

आप विकल्प पैरामीटर में निम्नलिखित कॉलबैक प्रदान कर सकते हैं -

अनु क्रमांक	विकल्प और विवरण
1	onSlide जब भी बुलाकर स्लाइडर को खींचकर ले जाया जाता है। कहा जाता है कि फंक्शन को स्लाइडर मान इसके पैरामीटर के रूप में मिलता है।
2	onChange जब भी स्लाइडर को स्थानांतरित करना समाप्त हो गया है या सेटस्लाइडर मान फ़ंक्शन के माध्यम से इसका मूल्य बदल गया है, तब कॉल किया गया। कहा जाता है कि फंक्शन को स्लाइडर मान इसके पैरामीटर के रूप में मिलता है।

स्लाइडर्स उदाहरण

<html>
   <head>
      <title>Sliders Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = slider" ></script>
		
      <script type = "text/javascript">
         window.onload = function() {
            new Control.Slider('handle1' , 'track1',{
            range: $R(1,100), values: [1,25,50,75,100], sliderValue: 1, onChange: function(v){ $('changed').innerHTML = 'Changed Value : '+v;
               },

            onSlide: function(v) {
               $('sliding').innerHTML = 'Sliding Value: '+v; } }); new Control.Slider('handle2' , 'track2', { range: $R(1,100),
               axis:'vertical',
               sliderValue: 1,
               onChange: function(v){
                  $('changed').innerHTML = 'Changed Value : '+v; } onSlide: function(v) { $('sliding').innerHTML = 'Sliding Value: '+v;
               }
            });
         }
      </script>
		
      <style type = "text/css">
         h1{ font-size: 1.5em; }
			
         .track {
            background-color: #aaa;
            position: relative;
            height: 0.5em; width: 10em;
            cursor: pointer; z-index: 0;
         }
			
         .handle {
            background-color: red;
            position: absolute;
            height: 1em; width: 0.25em; top: -0.25em;
            cursor: move; z-index: 2;
         }
			
         .track.vertical { 
            width: 0.5em; height: 10em; 
         }
			
         .track.vertical .handle {
            width: 1em; height: 0.25em; top: 0; left: -0.25em; 
         }
      </style>
   </head>

   <body>
      <h1>Simple sliders</h1>

      <div id = "track1" class = "track" style = "width: 20em;" >
         <div id = "handle1" class = "handle" style = "width: 0.5em;" ></div>
      </div>

      <p id = "sliding" ></p>
      <p id = "changed" ></p>

      <div id = "track2" class = "track vertical" style = "position: absolute; left: 25em;  top: 3em;" >
         <div id = "handle2" class = "handle" style = "height: 0.5em;" ></div>
      </div>
   </body>
</html>

नोट करने के लिए अंक:

आप CSS का उपयोग करके किसी भी स्लाइडर की स्लाइडर छवि को बदल सकते हैं। CSS गुण पृष्ठभूमि-छवि का उपयोग करें : url (track.gif) और पृष्ठभूमि-दोहराएँ: स्लाइडर छवि को सेट करने के लिए कोई दोहराएं नहीं ।
रेंज मान का उपयोग करके निर्दिष्ट किया जा सकता है $R(minValue, MaxValue). For example, $आर (1, 100)।
सीमा मूल्य को विशिष्ट मूल्यों के संदर्भ में निर्दिष्ट किया जा सकता है। उदाहरण के लिए मान: [1,25,50,75,100]। इस स्थिति में, स्लाइडर केवल असतत मानों को प्राप्त करेगा जो हैंडल के रूप में सूचीबद्ध था।
किसी भी समय, स्लाइडर का मान, स्लाइडर नियंत्रण के सेटवैल्यू () विधि को कॉल करके प्रोग्राम नियंत्रण के तहत सेट किया जा सकता है, जैसे: स्लाइडरइन्स्टेंस.सेटवैल्यू (50);

यह निम्नलिखित परिणाम देगा -