script.aculo.us - अवलोकन

Script.aculo.us क्या है?

script.aculo.us प्रोटोटाइप जावास्क्रिप्ट फ्रेमवर्क के ऊपर बनी एक जावास्क्रिप्ट लाइब्रेरी है , जो GUI को बढ़ाती है और वेब उपयोगकर्ताओं को वेब 2.0 का अनुभव देती है।

script.aculo.us को थॉमस फुक्स द्वारा विकसित किया गया था और इसे पहली बार जून 2005 में जनता के लिए जारी किया गया था।

script.aculo.us डॉक्यूमेंट ऑब्जेक्ट मॉडल (DOM) के माध्यम से डायनामिक विजुअल इफेक्ट्स और यूजर इंटरफेस एलिमेंट्स प्रदान करता है।

प्रोटोटाइप जावास्क्रिप्ट ढांचा सैम स्टीफेंसन द्वारा बनाया गया एक जावास्क्रिप्ट ढांचा है जो अजाक्स ढांचा और अन्य उपयोगिताओं प्रदान करता है।

Script.aculo.us इंस्‍टॉल कैसे करें?

यह script.aculo.us लाइब्रेरी को स्थापित करने के लिए काफी सरल है। इसे तीन सरल चरणों में स्थापित किया जा सकता है -

एक सुविधाजनक पैकेज में नवीनतम संस्करण डाउनलोड करने के लिए डाउनलोड पृष्ठ पर जाएं ।
डाउनलोड किए गए पैकेज को अनपैक करें और आपको निम्नलिखित फ़ोल्डर मिलेंगे -
- lib - इसमें प्रोटोटाइप .js फ़ाइल है।
- src - निम्नलिखित 8 फाइलें शामिल हैं -
  - builder.js
  - controls.js
  - dragdrop.js
  - effects.js
  - scriptaculous.js
  - slider.js
  - sound.js
  - unittest.js
- test - परीक्षण के उद्देश्य के लिए फ़ाइलें शामिल हैं।
- CHANGELOG - फाइल जिसमें सभी परिवर्तनों का इतिहास है।
- MIT-LICENSE - लाइसेंस की शर्तों का वर्णन करने वाली फ़ाइल।
- README - इंस्टॉलेशन निर्देशों सहित इंस्टॉलेशन पैकेज का वर्णन करने वाली फाइल।
अब निम्नलिखित फाइलों को अपनी वेबसाइट की एक निर्देशिका जैसे / जावास्क्रिप्ट में डालें।
- builder.js
- controls.js
- dragdrop.js
- effects.js
- scriptaculous.js
- slider.js
- prototype.js

NOTE - sound.js और unittest.js फाइलें वैकल्पिक हैं

Script.aculo.us लाइब्रेरी का उपयोग कैसे करें?

अब आप script.aculo.us स्क्रिप्ट को निम्न प्रकार से शामिल कर सकते हैं -

<html>
   <head>
      <title>script.aculo.us examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script >
   </head>
	
   <body>
      ........
   </body>
</html>

डिफ़ॉल्ट रूप से, scriptaculous.js प्रभाव, ड्रैग-एंड-ड्रॉप, स्लाइडर्स और अन्य सभी script.aculo.us सुविधाओं के लिए आवश्यक अन्य जावास्क्रिप्ट फ़ाइलों को लोड करता है।

यदि आपको सभी विशेषताओं की आवश्यकता नहीं है, तो आप अतिरिक्त स्क्रिप्ट को सीमित कर सकते हैं जो उन्हें अल्पविराम से अलग की गई सूची में निर्दिष्ट करके लोड होती हैं, जैसे -

<html>
   <head>
      <title>script.aculo.us examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>
   </head>
	
   <body>
      ........
   </body>
</html>

निर्दिष्ट की जा सकने वाली स्क्रिप्ट हैं -

effects
dragdrop
builder
controls
slider

NOTE - कुछ स्क्रिप्ट की आवश्यकता होती है कि दूसरों को ठीक से काम करने के लिए लोड किया जाए।

कैसे एक script.aculo.us लाइब्रेरी फ़ंक्शन को कॉल करें?

Script.aculo.us लाइब्रेरी फ़ंक्शन को कॉल करने के लिए, नीचे दिखाए गए अनुसार HTML स्क्रिप्ट टैग का उपयोग करें -

<html>
   <head>
      <title>script.aculo.us examples</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>

      <script type = "text/javascript" language = "javascript">
         // <![CDATA[
         function action(element){
            new Effect.Highlight(element, 
               { startcolor: "#ff0000", endcolor: "#0000ff", restorecolor: "#00ff00",  duration: 8 });
         }
         // ]]>
      </script>
   </head>
	
   <body>
      <div id = "id" onclick = "action(this);">
         Click on this and see how it change its color.
      </div>
   </body>
</html>

यहां हम इफेक्ट मॉड्यूल का उपयोग कर रहे हैं और हम एक तत्व पर हाइलाइट प्रभाव लागू कर रहे हैं ।

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

किसी भी मॉड्यूल के फ़ंक्शन को कॉल करने का एक और आसान तरीका इवेंट हैंडलर के अंदर है -

<html>
   <head>
      <title>script.aculo.us examples</title>

      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>
   </head>
	
   <body>
      <div onclick = "new Effect.BlindUp(this, {duration: 5})">
         Click here if you want this to go slooooow.
      </div>
   </body>
</html>

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