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>यह निम्नलिखित परिणाम देगा -
script.aculo.us मॉड्यूल में विभाजित है, प्रत्येक की अपनी जावास्क्रिप्ट फ़ाइल है। इन मॉड्यूल को यहाँ समझाया गया है -
प्रभाव
प्रभाव मॉड्यूल पच्चीस से अधिक दृश्य प्रभाव और सात संक्रमण मोड के साथ आता है।
खींचें और छोड़ें
आप किसी भी तत्व को खींचने योग्य बनाने के लिए ड्रैग एंड ड्रॉप मॉड्यूल का उपयोग करेंगे , इसे एक ड्रॉप ज़ोन में बदल सकते हैं, या यहां तक कि तत्वों की एक पूरी श्रृंखला बना सकते हैं ताकि आप उन्हें ड्रैग और ड्रॉप करके पुनर्व्यवस्थित कर सकें।
स्लाइडर्स
एक स्लाइडर एक प्रकार का छोटा रेल या ट्रैक होता है, जिसके साथ आप एक हैंडल को स्लाइड कर सकते हैं। यह एक संख्यात्मक मूल्य में तब्दील हो जाता है। Script.aculo.us के साथ, आप बहुत नियंत्रण के साथ ऐसे स्लाइडर्स बना सकते हैं।
स्वत: पूर्णता
ऑटोकंप्लीटर नियंत्रण Google-सुझाव शैली, स्थानीय और सर्वर-संचालित स्वत: पूर्णता पाठ इनपुट फ़ील्ड की अनुमति देता है।
जगह-जगह संपादन
आप किसी भी टेक्स्ट या आइटम के संग्रह को संपादन योग्य जगह पर केवल इसे क्लिक करके बना सकते हैं।
निर्माता
जावास्क्रिप्ट में DOM के टुकड़े बनाने के लिए एक सहायक। यह एक डेवलपर टूल है जो DOM क्रिएशन को काफी कम कर देता है।
ध्वनि
संस्करण 1.7.1 ने एक ध्वनि प्रणाली शुरू की, जिससे आप आसानी से ध्वनि बजा सकते हैं, उन्हें कतारबद्ध कर सकते हैं, कई ट्रैक्स का उपयोग कर सकते हैं, और इसी तरह।
Script.aculo.us प्रभावों को दो समूहों में विभाजित किया गया है -
कोर प्रभाव
निम्नलिखित छह मुख्य प्रभाव script.aculo.us विज़ुअल इफेक्ट्स जावास्क्रिप्ट लाइब्रेरी की नींव हैं।
Effect.Opacity
Effect.Scale
Effect.Morph
Effect.Move
Effect.Highlight
Effect.Parallel
सभी मुख्य प्रभाव विभिन्न सामान्य मापदंडों के साथ-साथ प्रभाव-विशिष्ट मापदंडों का समर्थन करते हैं और ये प्रभाव नाम केस-संवेदी होते हैं।
इस ट्यूटोरियल में सभी प्रभाव-विशिष्ट कॉमन पैरामीटर्स पर प्रभावों के साथ चर्चा की गई है।
संयोजन प्रभाव
सभी संयोजन प्रभाव पांच कोर प्रभावों पर आधारित होते हैं, और आपको अपने स्वयं के प्रभावों को लिखने की अनुमति देने के लिए उदाहरण के रूप में सोचा जाता है।
आमतौर पर ये प्रभाव अन्य प्रभावों के समानांतर, सिंक्रनाइज़ निष्पादन पर निर्भर करते हैं। ऐसा निष्पादन आसानी से उपलब्ध है, इसलिए अपने स्वयं के संयुक्त प्रभाव बनाना बहुत आसान है। यहाँ संयोजन प्रभाव की एक सूची है -
Effect.Appear
Effect.Fade
Effect.Puff
Effect.DropOut
Effect.Shake
Effect.SwitchOff
Effect.BlindDown
Effect.BlindUp
Effect.SlideDown
Effect.SlideUp
Effect.Pulsate
Effect.Squish
Effect.Fold
Effect.Grow
Effect.Shrink
इसके अतिरिक्त, वहाँ है Effect.toggle उन तत्वों के लिए उपयोगिता विधि जिन्हें आप एक अपील / फीका, स्लाइड या ब्लाइंड एनीमेशन के साथ अस्थायी रूप से दिखाना चाहते हैं।
Effect.toggle
लाइब्रेरी फ़ाइलें प्रभाव के लिए आवश्यक हैं
Script.aculo.us की प्रभाव क्षमताओं का उपयोग करने के लिए, आपको प्रभाव मॉड्यूल को लोड करना होगा। तो, script.aculo.us के लिए आपकी न्यूनतम लोडिंग इस तरह दिखाई देगी:
<html>
<head>
<title>script.aculo.us effects</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/"effects.j"></script>
</head>
<body>
...
</body>
</html>कॉल प्रभाव कार्य
मुख्य प्रभाव शुरू करने का उचित तरीका आमतौर पर है newऑपरेटर। अपनी प्राथमिकताओं के आधार पर, आप दो सिंटैक्स में से एक का उपयोग कर सकते हैं -
वाक्य - विन्यास
new Effect.EffectName(element [, requiredArgs ] [ , options ] )
OR
element.visualEffect('EffectName' [, requiredArgs ] [,options])ये दो वाक्यविन्यास तकनीकी रूप से समतुल्य हैं। दोनों के बीच चुनना ज्यादातर कोड सौंदर्यशास्त्र की आपकी व्यक्तिगत भावना के बारे में है।
उदाहरण
यहां दो समतुल्य कॉल हैं, ताकि आप देख सकें कि वाक्यविन्यास कैसे संबंधित हैं, जो बहुत अधिक विनिमेय हैं -
new Effect.Scale('title', 200, { scaleY: false, scaleContent: false });
OR
$('title' ).visualEffect('Scale', 200, { scaleY:false, scaleContent:false });वेब 2.0 इंटरफ़ेस की सबसे लोकप्रिय विशेषता ड्रैग एंड ड्रॉप सुविधा है। सौभाग्य से script.aculo.us ड्रैग और ड्रॉप का समर्थन करने की एक अंतर्निहित क्षमता के साथ आता है।
Script.aculo.us की ड्रैगिंग क्षमताओं का उपयोग करने के लिए, आपको लोड करने की आवश्यकता होगी dragdrop मॉड्यूल, जिसके लिए भी आवश्यकता होती है effectsमापांक। तो आपके लिए script.aculo.us की न्यूनतम लोडिंग इस तरह होगी:
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>चीजों को घसीटना
Script.aculo.us का उपयोग करके किसी आइटम को ड्रैग करने योग्य बनाना बहुत सरल है। इसके लिए ड्रैगएबल श्रेणी का एक उदाहरण बनाने की आवश्यकता है , और उस तत्व को पहचानने के लिए जिसे ड्रैगेबल बनाया जा सकता है।
खींचने योग्य सिंटैक्स
new Draggable( element, options );कंस्ट्रक्टर के लिए पहला पैरामीटर तत्व की पहचान या तो तत्व की आईडी के रूप में किया जा सकता है , या तत्व का संदर्भ देता है। दूसरा पैरामीटर ड्रैग करने योग्य तत्व के व्यवहार के बारे में वैकल्पिक जानकारी निर्दिष्ट करता है।
ड्रैग करने योग्य विकल्प
अपनी ड्रैग करने योग्य वस्तु बनाते समय आप निम्न विकल्पों में से एक या अधिक का उपयोग कर सकते हैं।
| विकल्प | विवरण | उदाहरण |
|---|---|---|
| वापस लाएं | यदि सही पर सेट किया जाता है , तो ड्रैग समाप्त होने पर तत्व अपनी मूल स्थिति में लौट आता है। यह भी निर्दिष्ट करता है कि जब ड्रैग ऑपरेशन बंद हो जाता है तो क्या रेवरटेक्ट कॉलबैक को लागू किया जाएगा। झूठे की अवहेलना करता है । | उदाहरण |
| स्नैप | ग्रिड में स्नैप करने के लिए या इसके संचलन में बाधा उत्पन्न करने के लिए उपयोग किया जाता है। यदि झूठी (डिफ़ॉल्ट), कोई तड़क या बाधा उत्पन्न नहीं होती है।
|
उदाहरण |
| zindex | ड्रैग ऑपरेशन के दौरान तत्व पर लागू किए जाने वाले CSS z-index को निर्दिष्ट करता है। डिफ़ॉल्ट रूप से, तत्व का z- इंडेक्स खींचते समय 1000 पर सेट होता है। | उदाहरण |
| ghosting | बूलियन यह निर्धारित करता है कि क्या ड्रैग करने के लिए ड्रैग करने योग्य क्लोन किया जाना चाहिए, क्लोन छोड़ने तक मूल को छोड़कर। झूठे की अवहेलना करता है । | उदाहरण |
| बाधा | एक स्ट्रिंग को ड्रैग करने योग्य दिशाओं को सीमित करने के लिए उपयोग किया जाता है, या तो क्षैतिज या ऊर्ध्वाधर । अशक्त करने के लिए चूक जिसका अर्थ है मुक्त आंदोलन। | उदाहरण |
| हैंडल | ड्रैग ऑपरेशन शुरू करने के लिए हैंडल के रूप में उपयोग किए जाने वाले एक तत्व को निर्दिष्ट करता है। डिफ़ॉल्ट रूप से, एक तत्व अपना स्वयं का हैंडल है। | उदाहरण |
| starteffect | खींचने पर शुरू होने पर तत्व नामक एक प्रभाव। डिफ़ॉल्ट रूप से, यह तत्व की अपारदर्शिता को 0.2 से 0.2 सेकंड में बदल देता है। | उदाहरण |
| reverteffect | एक तत्व जिसे ड्रैग रिवर्ट होने पर बुलाया जाता है। तत्व की मूल स्थिति के लिए एक चिकनी स्लाइड में चूक । केवल तभी वापस लौटा जब सच है। | उदाहरण |
| endeffect | एक तत्व जिसे ड्रैगिंग समाप्त होने पर बुलाया जाता है। डिफ़ॉल्ट रूप से, यह 0.2 सेकंड में तत्व की अपारदर्शिता को 1.0 में बदल देता है। | उदाहरण |
कॉलबैक विकल्प
इसके अतिरिक्त, आप विकल्प पैरामीटर में निम्नलिखित कॉलबैक कार्यों में से किसी का उपयोग कर सकते हैं -
| समारोह | विवरण | उदाहरण |
|---|---|---|
| onStart | खींचे जाने पर कॉल किया जाता है। | उदाहरण |
| onDrag | जब माउस की स्थिति पिछले कॉल से बदल जाती है, तो माउस चलने पर बार-बार कॉल किया जाता है। | उदाहरण |
| परिवर्तन | जिसे ऑनड्रैग कहा जाता है (जो पसंदीदा कॉलबैक है)। | उदाहरण |
| अंत में | एक ड्रैग समाप्त होने पर कॉल किया जाता है। | उदाहरण |
"परिवर्तन" कॉलबैक को छोड़कर, इन कॉलबैक में से प्रत्येक दो मापदंडों को स्वीकार करता है: ड्रैगेबल ऑब्जेक्ट, और माउस इवेंट ऑब्जेक्ट।
खींचने योग्य उदाहरण
यहां, हम ऐसे 5 तत्वों को परिभाषित करते हैं जिन्हें ड्रैग करने योग्य बनाया जाता है: तीन <div> तत्व, एक <img> तत्व, और एक <span> तत्व। तीन अलग-अलग <div> तत्वों का उद्देश्य यह प्रदर्शित करना है कि क्या कोई तत्व स्थैतिक (डिफ़ॉल्ट), सापेक्ष, या निरपेक्ष के एक स्थिति नियम से शुरू होता है, चाहे ड्रैग व्यवहार अप्रभावित हो।
<html>
<head>
<title>Draggables Elements</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
<script type = "text/javascript">
// Take all the elements whatever you want to make Draggable.
var elements = ['normaldiv', 'relativediv', 'absolutediv', 'image', 'span'];
// Make all the items drag able by creating Draggable objects
window.onload = function() {
elements.each(function(item) { new Draggable(item, {});});
}
</script>
</head>
<body>
<div id = "normaldiv">
This is a normal div and this is dragable.
</div>
<div id = "relativediv" style="position: relative;">
This is a relative div and this is dragable.
</div>
<div id = "absolutediv" style="position: absolute;">
This is an absolute div and this dragable.
</div>
<br />
<img id = "image" src = "/images/scriptaculous.gif"/>
<p>Let part <span id = "span" style = "color: blue;">
This is middle part</span> Yes, only middle part is dragable.</p>
</body>
</html>यह निम्नलिखित परिणाम देगा -
घसीटती हुई चीजें
एक तत्व ड्राप्पेबल्स नामक एक नाम स्थान के भीतर ऐड () विधि के लिए एक कॉल के माध्यम से एक ड्रॉप लक्ष्य में परिवर्तित हो जाता है ।
ड्रोपेबल्स नेमस्पेस के दो महत्वपूर्ण तरीके हैं: ड्रॉप लक्ष्य बनाने के लिए जोड़ें () और ड्रॉप लक्ष्य को हटाने के लिए () ।
वाक्य - विन्यास
यहाँ ड्रॉप टारगेट बनाने के लिए ऐड () मेथड का सिंटेक्स है। ऐड () विधि दूसरे के रूप में पारित हैश में विकल्पों का उपयोग करते हुए, अपने पहले पैरामीटर के रूप में पारित तत्व से एक ड्रॉप लक्ष्य बनाता है।
Droppables.add( element, options );हटाने के लिए सिंटैक्स () और भी सरल है। हटाने () विधि पारित तत्व से ड्रॉप लक्ष्य व्यवहार को हटा देती है।
Droppables.remove(element);विकल्प
अपनी ड्रैग करने योग्य वस्तु बनाते समय आप निम्न विकल्पों में से एक या अधिक का उपयोग कर सकते हैं।
| विकल्प | विवरण | उदाहरण |
|---|---|---|
| Hoverclass | एक सीएसएस वर्ग का नाम जिसे तत्व में जोड़ा जाएगा जबकि ड्रापेबल सक्रिय है (इसमें एक स्वीकार्य ड्रैगेबल होवर है)। अशक्त करने के लिए चूक। | उदाहरण |
| स्वीकार करना | CSS कक्षाओं का वर्णन करने वाली स्ट्रिंग या स्ट्रिंग की एक सरणी। ड्रापेबल केवल ड्रैगगैबल्स को स्वीकार करेगा जिनके पास इन सीएसएस वर्गों में से एक या अधिक है। | उदाहरण |
| रोकथाम | एक तत्व, या तत्वों की सरणी को निर्दिष्ट करता है, जो कि ड्रॉप टार्गेट द्वारा स्वीकार किए जाने के लिए एक ड्रैग करने योग्य आइटम का माता-पिता होना चाहिए। डिफ़ॉल्ट रूप से, कोई भी बाधाएं लागू नहीं होती हैं। | उदाहरण |
| ओवरलैप | यदि pp क्षैतिज ’या 'वर्टिकल’ पर सेट किया जाता है, तो ड्रापेबल केवल ड्रैगबल पर प्रतिक्रिया करेगा यदि दिए गए दिशा में 50% से अधिक ओवरलैपिंग हो। सॉर्टेबल्स द्वारा प्रयुक्त, अगले अध्याय में चर्चा की गई है। | |
| लालची | यदि सही (डिफ़ॉल्ट) है, तो यह ड्रैग करने योग्य नहीं खोजा जाएगा, के तहत अन्य छोटी बूंदों को मँडराता है। | उदाहरण |
कॉलबैक विकल्प
इसके अतिरिक्त, आप विकल्प पैरामीटर में निम्नलिखित कॉलबैक कार्यों में से किसी का उपयोग कर सकते हैं -
| समारोह | विवरण | उदाहरण |
|---|---|---|
| हॉवर पर | कॉलबैक फ़ंक्शन को निर्दिष्ट करता है जब एक उपयुक्त ड्रैगबल आइटम ड्रॉप टारगेट पर हो जाता है। सॉर्टेबल्स द्वारा प्रयुक्त, अगले अध्याय में चर्चा की गई है। | |
| onDrop | कॉलबैक फ़ंक्शन को निर्दिष्ट करता है जिसे ड्रॉप टारगेट पर उपयुक्त ड्रैग करने योग्य तत्व को गिराया जाता है। | उदाहरण |
उदाहरण
यहां, इस उदाहरण का पहला भाग हमारे पिछले उदाहरण के समान है, सिवाय इसके कि हमने प्रोटोटाइप <के $ A () फ़ंक्शन का उपयोग सभी <img> तत्वों की नोड सूची को ड्रैगैबल्स की आईडी के साथ एक सरणी में बदलने के लिए किया है। ।
<html>
<head>
<title>Drag and Drop Example</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
<script type = "text/javascript">
window.onload = function() {
// Make all the images draggables from draggables division.
$A($('draggables').getElementsByTagName('img')).each(function(item) {
new Draggable(item, {revert: true, ghosting: true});
});
Droppables.add('droparea', {hoverclass: 'hoverActive', onDrop: moveItem});
// Set drop area by default non cleared.
$('droparea').cleared = false;
}
// The target drop area contains a snippet of instructional
// text that we want to remove when the first item
// is dropped into it.
function moveItem( draggable,droparea){
if (!droparea.cleared) {
droparea.innerHTML = '';
droparea.cleared = true;
}
draggable.parentNode.removeChild(draggable);
droparea.appendChild(draggable);
}
</script>
<style type = "text/css">
#draggables {
width: 172px;
border: 3px ridge blue;
float: left;
padding: 9px;
}
#droparea {
float: left;
margin-left: 16px;
width: 172px;
border: 3px ridge maroon;
text-align: center;
font-size: 24px;
padding: 9px;
float: left;
}
.hoverActive {
background-color: #ffffcc;
}
#draggables img, #droparea img {
margin: 4px;
border:1px solid red;
}
</style>
</head>
<body>
<div id = "draggables">
<img src = "/images/html.gif"/>
<img src = "/images/css.gif"/>
<img src = "/images/xhtml.gif"/>
<img src = "/images/wml_logo.gif"/>
<img src = "/images/javascript.gif"/>
</div>
<div id = "droparea">
Drag and Drop Your Images in this area
</div>
</body>
</html>यह निम्नलिखित परिणाम देगा -
कई बार, आपको उपयोगकर्ता को तत्वों (जैसे किसी सूची में आइटम) को फिर से खींचकर पुन: व्यवस्थित करने की क्षमता प्रदान करने की आवश्यकता होती है।
खींचें और ड्रॉप के बिना, पुन: क्रम एक बुरा सपना हो सकता है लेकिन script.aculo.us के माध्यम से बॉक्स से बाहर समर्थन को पुन: क्रम बढ़ाया प्रदान करता है क्रमित करने योग्य वर्ग। Sortable बनने के लिए तत्व Sortable नाम स्थान में बनाने () विधि के लिए पारित किया गया है ।
एक सॉर्टेबल में कंटेनर तत्व में आइटम तत्व होते हैं। जब आप एक नया Sortable बनाते हैं, तो वह संबंधित Draggables और Droppables के निर्माण का ख्याल रखता है ।
Script.aculo.us की सॉर्ट करने योग्य क्षमताओं का उपयोग करने के लिए, आपको लोड करना होगा dragdrop मॉड्यूल, जिसके लिए भी आवश्यकता होती है effectsमापांक। तो आपके लिए script.aculo.us की न्यूनतम लोडिंग इस तरह होगी -
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>सॉर्टेबल सिंटेक्स
यहाँ एक छांटने योग्य आइटम बनाने के लिए () विधि का वाक्यविन्यास है। Create () विधि लेता आईडी एक कंटेनर तत्व की और पारित विकल्पों के आधार पर उन्हें ठीक कर लेगा।
Sortable.create('id_of_container',[options]);Sortable.create द्वारा बनाई गई Sortable करने के लिए सभी घटना संचालकों और संदर्भों को पूरी तरह से हटाने के लिए Sortable.destroy का उपयोग करें ।
NOTE- Sortable.create के लिए एक कॉल, कथित तौर पर Sortable.destroy पर कॉल अगर संदर्भित तत्व पहले से ही एक Sortable था। यहां विनाश फ़ंक्शन को कॉल करने के लिए सरल सिंटैक्स है।
Sortable.destroy( element );छांटने का विकल्प
अपनी Sortable ऑब्जेक्ट बनाते समय आप निम्न विकल्पों में से एक या अधिक का उपयोग कर सकते हैं।
| अनु क्रमांक | विकल्प और विवरण |
|---|---|
| 1 | tag ड्रैग और ड्रॉप के माध्यम से सॉर्ट करने योग्य सॉर्ट करने योग्य कंटेनर के भीतर तत्वों के प्रकार को निर्दिष्ट करता है। 'ली' के लिए चूक। |
| 2 | only एक सीएसएस श्रेणी का नाम या वर्ग के नामों की सरणी निर्दिष्ट करता है, कि एक ड्रैग करने योग्य आइटम को ड्रॉप लक्ष्य द्वारा स्वीकार किए जाने के लिए होना चाहिए। यह ड्रैगबल के स्वीकार विकल्प के समान है । डिफ़ॉल्ट रूप से, कोई वर्ग नाम की बाध्यता लागू नहीं होती है। |
| 3 | overlap झूठी, क्षैतिज या ऊर्ध्वाधर में से एक । उस बिंदु को नियंत्रित करता है जिस पर एक पुन: व्यवस्थित किया जाता है। ऊर्ध्वाधर के लिए चूक । |
| 4 | constraint झूठी, क्षैतिज या ऊर्ध्वाधर में से एक । घसीटे जाने योग्य छंटनी वाले तत्वों की गति को बाधित करता है। ऊर्ध्वाधर के लिए चूक । |
| 5 | containment Sortables के बीच खींचने और छोड़ने में सक्षम करता है। तत्वों या तत्व-आईडी की एक सरणी लेता है। महत्वपूर्ण नोट: यह सुनिश्चित करने के लिए कि कंटेनरों के बीच दो तरह से खींच संभव है, कंटेनर तत्वों के बाद सभी Sortable.create कॉल करें। |
| 6 | handle उसी नाम के ड्रैगबल विकल्प के रूप में समान है, ड्रैग ऑपरेशंस आरंभ करने के लिए उपयोग किए जाने वाले एक तत्व को निर्दिष्ट करता है। डिफ़ॉल्ट रूप से, प्रत्येक तत्व अपना स्वयं का हैंडल है। |
| 7 | hoverclass निर्दिष्ट करता है कि सीएसएस वर्ग का नाम गैर-ड्रैग किए गए सॉर्टेबल तत्वों पर लागू किया जाए क्योंकि ड्रैग किया गया तत्व उनके ऊपर से गुजरता है। डिफ़ॉल्ट रूप से, कोई सीएसएस वर्ग नाम लागू नहीं किया जाता है। |
| 8 | ghosting एक ही नाम के ड्रैगबल विकल्प के समान, यदि सही है, तो यह विकल्प ड्रैग ऑपरेशन के मूल तत्व को जगह में रहने का कारण बनता है, जबकि माउस पॉइंटर के साथ तत्व की एक अर्ध-पारदर्शी प्रतिलिपि को स्थानांतरित किया जाता है। झूठे की अवहेलना करता है । यह विकल्प IE के साथ काम नहीं करता है। |
| 9 | dropOnEmpty यदि सही है, तो यह एक खाली सूची पर सॉर्ट करने योग्य तत्वों को छोड़ने की अनुमति देता है। झूठे की अवहेलना करता है । |
| 10 | scroll यदि सीएसएस ओवरफ़्लो विशेषता की सेटिंग के कारण सॉर्टेबल कंटेनर में स्क्रॉलबार होता है, तो यह विकल्प दृश्य तत्वों से परे सूची के ऑटो-स्क्रॉलिंग को सक्षम करता है। झूठे की अवहेलना करता है । |
| 12 | scrollSensitivity जब स्क्रॉलिंग सक्षम होती है, तो यह उस बिंदु को समायोजित करता है जिस पर स्क्रॉल करना शुरू हो जाता है। 20 की कमी। |
| 13 | scrollSpeed स्क्रॉलिंग सक्षम होने पर, यह स्क्रॉल गति को समायोजित करता है। 15 से चूक। |
| 14 | tree यदि सही है, तो यह सॉर्ट करने योग्य तत्व के भीतर उप-तत्वों के साथ छंटाई करने में सक्षम बनाता है। झूठे की अवहेलना करता है। |
| 15 | treeTag यदि ट्री विकल्प सक्षम है, तो यह उप-तत्व के कंटेनर तत्व प्रकार को निर्दिष्ट करता है, जिनके बच्चे सॉर्टेबल व्यवहार में भाग लेते हैं। 'उल' के लिए चूक। |
आप विकल्प पैरामीटर में निम्नलिखित कॉलबैक प्रदान कर सकते हैं -
| अनु क्रमांक | विकल्प और विवरण |
|---|---|
| 1 | onChange एक ऐसा फंक्शन जिसे ड्रैग करते समय क्रम क्रम बदल जाता है। जब एक सॉर्टेबल से दूसरे में खींचते हैं, तो कॉलबैक को प्रत्येक सॉर्टेबल पर एक बार कॉल किया जाता है। प्रभावित तत्व को इसके पैरामीटर के रूप में प्राप्त करता है। |
| 2 | onUpdate एक फ़ंक्शन जिसे ड्रैग ऑपरेशन की समाप्ति पर बुलाया जाएगा, जिसके परिणामस्वरूप तत्व क्रम में बदलाव होगा। |
छँटाई उदाहरण
इस डेमो को IE 6.0 में काम करने के लिए सत्यापित किया गया है। यह फ़ायरफ़ॉक्स के नवीनतम संस्करण में भी काम करता है।
<html>
<head>
<title>Sorting Example</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
<script type = "text/javascript">
window.onload = function() {
Sortable.create('namelist',{tag:'li'});
}
</script>
<style type = "text/css">
li { cursor: move; }
</style>
</head>
<body>
<p>Drag and drop list items to sort them out</p>
<ul id = "namelist">
<li>Physics</li>
<li>Chemistry</li>
<li>Maths</li>
<li>Botany</li>
<li>Sociology</li>
<li>English</li>
<li>Hindi</li>
<li>Sanskrit</li>
</ul>
</body>
</html>उपरोक्त तालिका में चर्चा किए गए विभिन्न विकल्पों के साथ कोड की बेहतर समझ के लिए हमारे ऑनलाइन कंपाइलर का उपयोग करें।
यह निम्नलिखित परिणाम देगा -
टैग के उपयोग पर ध्यान दें : 'li' । इसी प्रकार, आप <div> - में उपलब्ध चित्रों की सूची को क्रमबद्ध कर सकते हैं।
<html>
<head>
<title>Sorting Example</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
<script type = "text/javascript">
window.onload = function() {
Sortable.create('imagelist',{tag:'div'});
}
</script>
<style type = "text/css">
div { cursor: move; }
img { border: 1px solid red; margin:5px; }
</style>
</head>
<body>
<p>Drag and drop list images to re-arrange them</p>
<div id = "imagelist">
<div><img src = "/images/wml_logo.gif" alt="WML Logo" /></div>
<div><img src = "/images/javascript.gif" alt="JS" /></div>
<div><img src = "/images/html.gif" alt="HTML" /></div>
<div><img src = "/images/css.gif" alt="CSS" /></div>
</div>
</body>
</html>यह निम्नलिखित परिणाम देगा -
क्रमबद्ध तत्वों को क्रमबद्ध करना
Sortable ऑब्जेक्ट HTTP GET या POST अनुरोधों के लिए उपयुक्त प्रारूप में Sortable को क्रमबद्ध करने के लिए एक फ़ंक्शन Sortable.serialize () भी प्रदान करता है । यह अजाक्स कॉल के माध्यम से सॉर्टेबल के आदेश को प्रस्तुत करने के लिए इस्तेमाल किया जा सकता है।
वाक्य - विन्यास
Sortable.serialize(element, options);विकल्प
अपनी Sortable ऑब्जेक्ट बनाते समय आप निम्न विकल्पों में से एक या अधिक का उपयोग कर सकते हैं।
| अनु क्रमांक | विकल्प और विवरण |
|---|---|
| 1 | tag उस प्रकार के टैग सेट करता है, जिन्हें क्रमबद्ध किया जाएगा। यह Sortable.create में उपयोग किए जाने वाले समान होगा । |
| 2 | name HTTP GET / POST प्रारूप में क्रमांकन के लिए कुंजी / मान युग्म बनाने के लिए उपयोग की जाने वाली कुंजी का नाम सेट करता है। तो अगर नाम xyz होना चाहिए, तो क्वेरी स्ट्रिंग जैसा दिखेगा - xyz [] = value1 & xyz [] = value2 & xyz [] = value3 जहां मानों को बाल तत्वों से उस क्रम में प्राप्त किया जाता है, जहां वे कंटेनर के भीतर दिखाई देते हैं। |
सीरियल्स का उदाहरण दें
इस उदाहरण में, क्रमांकन का उत्पादन केवल सूची आइटम आईडी में अंडरस्कोर के बाद नंबर देगा।
कोशिश करने के लिए, सूचियों को उनके मूल क्रम में छोड़ दें, सूचियों के क्रमांकन को देखने के लिए बटन दबाएं। अब, कुछ तत्वों को फिर से ऑर्डर करें और फिर से बटन पर क्लिक करें।
<html>
<head>
<title>Sorting Example</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
<script type = "text/javascript">
window.onload = function() {
Sortable.create('namelist',{tag:'li'});
}
function serialize(container, name){
$('display').innerHTML = 'Serialization of ' +
$(container).id +
' is: <br/><pre>' +
Sortable.serialize( container,{ name:name} ) +
'</pre>';
}
</script>
<style type = "text/css">
li { cursor: move; }
</style>
</head>
<body>
<p>Drag and drop list items to sort them out properly</p>
<ul id = "namelist">
<li id = "list1_1">Physics</li>
<li id = "list1_2">Chemistry</li>
<li id = "list1_3">Maths</li>
<li id = "list1_4">Botany</li>
<li id = "list1_5">Sociology</li>
<li id = "list1_6">English</li>
</ul>
<p>Click following button to see serialized list which can be
passed to backend script, like PHP, AJAX or CGI</p>
<button type = "button" value = "Click Me"
onclick = "serialize('namelist', 'list')"> Serialize
</button>
<div id = "display" style = "clear:both;padding-top:32px"></div>
</body>
</html>यह निम्नलिखित परिणाम देगा -
Sortables के बीच आइटम चल रहा है
निम्न उदाहरण दिखाता है कि आइटम को एक सूची से दूसरी सूची में कैसे स्थानांतरित किया जाए।
<html>
<head>
<title>Sorting Example</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
<script type = "text/javascript">
window.onload = function() {
Sortable.create('List1', {containment: ['List1','List2'], dropOnEmpty: true});
Sortable.create('List2', {containment: ['List1','List2'], dropOnEmpty: true});
}
</script>
<style type = "text/css">
li { cursor: move; }
ul {
width: 88px;
border: 1px solid blue;
padding: 3px 3px 3px 20px;
}
</style>
</head>
<body>
<p>Drag and drop list items from one list to another list</p>
<div style = "float:left">
<ul id = "List1">
<li>Physics</li>
<li>Chemistry</li>
<li>Botany</li>
</ul>
</div>
<div style = "float:left;margin-left:32px">
<ul id = "List2">
<li>Arts</li>
<li>Politics</li>
<li>Economics</li>
<li>History</li>
<li>Sociology</li>
</ul>
</div>
</body>
</html>ध्यान दें कि प्रत्येक कंटेनर के लिए रोकथाम विकल्प दोनों कंटेनरों को रोकथाम तत्वों के रूप में सूचीबद्ध करता है। ऐसा करके, हमने बच्चे के तत्वों को उनके माता-पिता के संदर्भ में हल करने में सक्षम किया है; यह उन्हें दो कंटेनरों के बीच ले जाने में भी सक्षम बनाता है।
हम दोनों सूची के लिए सही पर dropOnEmpty सेट करते हैं। उस सूची पर इस विकल्प के प्रभाव को देखने के लिए, सभी तत्वों को एक सूची से दूसरी सूची में ले जाएं ताकि एक सूची खाली हो। आप पाएंगे कि यह खाली सूची पर तत्व छोड़ने की अनुमति दे रहा है।
यह निम्नलिखित परिणाम देगा -
अजाक्स से बांधना
बेशक, onUpdate सर्वर पर Ajax सूचनाओं को ट्रिगर करने के लिए एक प्रमुख उम्मीदवार है, उदाहरण के लिए जब उपयोगकर्ता एक टू-डू सूची या कुछ अन्य डेटा सेट को फिर से शुरू करता है। Ajax.Request और Sortable.serialize का संयोजन जीवंत दृढ़ता को सरल बनाता है -
<html>
<head>
<title>Sorting Example</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
<script type = "text/javascript">
window.onload = function() {
Sortable.create('List' ,
{
onUpdate: function() {
new Ajax.Request('file.php',
{
method: "post",
parameters: {data:Sortable.serialize('List')}
}
);
}
}
);
}
</script>
<style type = "text/css">
li { cursor: move; }
ul {
width: 88px;
border: 1px solid blue;
padding: 3px 3px 3px 20px;
}
</style>
</head>
<body>
<p>When you will change the order, AJAX Request
will be made automatically.</p>
<div style = "float:left">
<ul id = "List">
<li id = "List_1">Physics</li>
<li id = "List_2">Chemistry</li>
<li id = "List_3">Maths</li>
<li id = "List_4">Botany</li>
</ul>
</div>
</body>
</html>Sortable.serialize एक स्ट्रिंग बनाता है जैसे: सूची [] = 1 और सूची [] = 2 और सूची [] = 3 और सूची [] = 4, जहां संख्या अंडरस्कोर के बाद सूची तत्व आईडी के पहचानकर्ता भाग हैं।
अब हमें file.php कोड करने की आवश्यकता है , जो पोस्ट किए गए डेटा को parse_str ($ _ POST ['डेटा') के रूप में पार्स करेगा ;) और आप इस सॉर्ट किए गए डेटा के साथ जो करना चाहते हैं वह कर सकते हैं।
AJAX के बारे में अधिक जानने के लिए, कृपया हमारे सरल अजाक्स ट्यूटोरियल से गुजरें ।
स्लाइडर्स उन पर एक या अधिक हैंडल के साथ पतले ट्रैक होते हैं जिन्हें उपयोगकर्ता ट्रैक के साथ खींच सकता है।
एक स्लाइडर का लक्ष्य संख्यात्मक मान को परिभाषित करने के लिए एक वैकल्पिक इनपुट विधि प्रदान करना है; स्लाइडर एक सीमा का प्रतिनिधित्व करता है, और ट्रैक के साथ एक हैंडल को स्लाइड करना इस सीमा के भीतर एक मान को परिभाषित करता है।
स्लाइडर्स क्षैतिज या ऊर्ध्वाधर अभिविन्यास में हो सकते हैं। जब क्षैतिज, ट्रैक का बायां छोर आमतौर पर सबसे कम मूल्य का प्रतिनिधित्व करता है, जबकि एक ऊर्ध्वाधर अभिविन्यास में, स्लाइड के नीचे आमतौर पर सबसे कम मूल्य होता है।
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);
यह निम्नलिखित परिणाम देगा -
बॉक्स से बाहर, script.aculo.us ऑटो-पूर्ति के लिए दो स्रोतों का समर्थन करता है -
- दूरस्थ स्रोत (अजाक्स के माध्यम से प्राप्त),
- स्थानीय स्रोत (आपके वेब पेज की स्क्रिप्ट में स्ट्रिंग सरणियाँ)।
आप जिस स्रोत का उपयोग करने की योजना बना रहे हैं, उसके आधार पर, आप क्रमशः Ajax.Autocompleter या Autocompleter.Local को इंस्टाल करेंगे । हालांकि विशिष्ट विकल्पों से सुसज्जित, ये दो ऑब्जेक्ट एक बड़ी सुविधा सेट साझा करते हैं और एक समान उपयोगकर्ता अनुभव प्रदान करते हैं।
इन वस्तुओं को बनाते समय चार चीजें होती हैं -
वह पाठ फ़ील्ड जिसे आप स्वतः पूर्ण करना चाहते हैं। हमेशा की तरह, आप फ़ील्ड को स्वयं या उसकी id = विशेषता के मान को पास कर सकते हैं।
स्वतः पूर्णता विकल्पों के लिए कंटेनर, जिसे चुनने के लिए विकल्पों की सूची <ul> </ li> पकड़ेगी। फिर से, तत्व को सीधे या इसके पास करेंid =। यह तत्व अक्सर एक सरल <div> </ p> </ li> है
डेटा स्रोत, जिसे स्रोत प्रकार के आधार पर, स्ट्रिंग के जावास्क्रिप्ट सरणी या दूरस्थ स्रोत के URL के रूप में व्यक्त किया जाएगा।
अंत में, विकल्प। हमेशा की तरह, वे एक प्रकार का हैश के रूप में प्रदान किए जाते हैं, और दोनों स्वत: पूर्णता ऑब्जेक्ट बिना कस्टम विकल्प के साथ कर सकते हैं; सब कुछ के लिए उपयुक्त चूक हैं।
Script.aculo.us की स्वतः पूर्णता क्षमताओं का उपयोग करने के लिए, आपको प्रोटोटाइप.js मॉड्यूल के साथ controls.js और effects.js मॉड्यूल को लोड करना होगा। तो, script.aculo.us के लिए आपकी न्यूनतम लोडिंग इस तरह होगी -
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,controls"></script>एक अजाक्स ऑटो कम्प्लीटर बनाना
निर्माण सिंटैक्स इस प्रकार है -
new Ajax.Autocompleter(element, container, url [ , options ] )Ajax.Autocompleter के लिए निर्माता चार मापदंडों को स्वीकार करता है -
तत्व नाम या पाठ फ़ील्ड का संदर्भ जो कि डेटा विकल्प के साथ पॉप्युलेट किया जाना है।
नियंत्रण द्वारा पसंद के मेनू के रूप में उपयोग किए जाने वाले तत्व <div> तत्व का नाम या संदर्भ।
सर्वर-साइड संसाधन का URL जो विकल्पों की आपूर्ति करेगा।
सामान्य विकल्प हैश।
विकल्प
अपनी Ajax.Autocompleter ऑब्जेक्ट बनाते समय आप निम्न विकल्पों में से एक या अधिक का उपयोग कर सकते हैं।
| अनु क्रमांक | विकल्प और विवरण |
|---|---|
| 1 | paramName सर्वर-साइड संसाधन पर पोस्ट किए गए पाठ फ़ील्ड की सामग्री वाले क्वेरी पैरामीटर का नाम। पाठ क्षेत्र के नाम की कमी। |
| 2 | minChars पसंद के लिए सर्वर-साइड अनुरोध से पहले दर्ज किए जाने वाले वर्णों की संख्या को बंद किया जा सकता है। 1 से चूक। |
| 3 | Frequency आंतरिक जांच के बीच, सेकंड में अंतराल, यह देखने के लिए कि क्या सर्वर-साइड संसाधन के लिए अनुरोध पोस्ट किया जाना चाहिए। 0.4 की कमी। |
| 4 | Indicator किसी तत्व का आईडी या संदर्भ जबकि विकल्प के लिए सर्वर-साइड अनुरोध चल रहा है। यदि छोड़ा गया है, तो कोई तत्व प्रकट नहीं होता है। |
| 5 | Parameters एक पाठ स्ट्रिंग जिसमें सर्वर-साइड संसाधन को पारित करने के लिए अतिरिक्त क्वेरी पैरामीटर हैं। |
| 6 | updateElement कॉलबैक फ़ंक्शन को ट्रिगर किया जा सकता है जब उपयोगकर्ता उस सर्वर से लौटे विकल्पों में से एक का चयन करता है जो आंतरिक फ़ंक्शन को बदलता है जो चुने हुए मूल्य के साथ पाठ क्षेत्र को अपडेट करता है। |
| 7 | afterUpdateElement अद्यतन कॉल फ़ंक्शन के निष्पादन के बाद कॉलबैक फ़ंक्शन को ट्रिगर किया जाना है। |
| 8 | Tokens एक एकल टेक्स्ट स्ट्रिंग, या टेक्स्ट स्ट्रिंग्स की सरणी जो कि संकेत देती है कि टेक्स्ट के क्षेत्र में कई तत्वों को प्रवेश करने की अनुमति देने के लिए टोकन को डेलिमिटर के रूप में उपयोग किया जाता है, जिनमें से प्रत्येक को व्यक्तिगत रूप से ऑटो-पूरा किया जा सकता है। |
उदाहरण
<html>
<head>
<title>Simple Ajax Auto-completer Example</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,controls"></script>
<script type = "text/javascript">
window.onload = function() {
new Ajax.Autocompleter(
'autoCompleteTextField',
'autoCompleteMenu',
'/script.aculo.us/serverSideScript.php', {}
);
}
</script>
</head>
<body>
<p>Type something in this box and then select suggested option from the list </p>
<div>
<label>Text field:</label>
<input type = "text" id = "autoCompleteTextField"/>
<div id = "autoCompleteMenu"></div>
</div>
</body>
</html>अब, हमें इस पृष्ठ तक पहुंचने और डेटा स्रोत URL (serverSideScript.php) की सेवा करने के लिए एक सर्वर साइड की आवश्यकता है। आप इस स्क्रिप्ट में सुझाव प्रदर्शित करने के लिए एक पूर्ण तर्क रखेंगे।
उदाहरण के लिए, हम serverSideScript.php में एक साधारण HTML पाठ रख रहे हैं । आप सीजीआई, पीएचपी, रूबी, या किसी भी अन्य सर्वर साइड स्क्रिप्टिंग का उपयोग करके अपनी स्क्रिप्ट लिख सकते हैं, उपयुक्त सुझावों का चयन करने और उन्हें <ul> <li> ... </ li> </ ul> के रूप में प्रारूपित करने और उन्हें वापस भेजने के लिए। कॉलर प्रोग्राम के लिए।
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
</ul>यह निम्नलिखित परिणाम देगा -
उपरोक्त तालिका में विभिन्न विकल्पों पर चर्चा की गई है।
एक स्थानीय ऑटो-कम्प्लीटर बनाना
जैसा कि हमने पिछले भाग में चर्चा की है, अजाक्स ऑटो-कंपाइलर बनाने के लिए एक स्थानीय ऑटो-कंपाइलर बनाना लगभग समान है।
प्रमुख अंतर यह है कि ऑटो-पूरा करने के लिए उपयोग किए जाने वाले बैकिंग डेटा को नियंत्रण के लिए कैसे पहचाना जाता है।
एक अजाक्स ऑटो-कंपाइलर के साथ, हमने एक सर्वर-साइड संसाधन का URL दिया है जो आवश्यक फ़िल्टरिंग करेगा, उपयोगकर्ता इनपुट को देखते हुए, और मिलान किए गए डेटा तत्वों को ही लौटाएगा। एक स्थानीय ऑटोकंप्लीटर के साथ, हम जावास्क्रिप्ट स्ट्रिंग स्ट्रिंग के रूप में इसके बजाय डेटा तत्व की पूरी सूची की आपूर्ति करते हैं, और नियंत्रण स्वयं अपने क्लाइंट कोड के भीतर फ़िल्टरिंग ऑपरेशन करता है।
पूरा निर्माण सिंटैक्स वास्तव में इस प्रकार है -
new Autocompleter.Local(field, container, dataSource [ , options ] );Autocompleter.Local के लिए निर्माता चार मापदंडों को स्वीकार करता है -
तत्व नाम या पाठ फ़ील्ड का संदर्भ जो कि डेटा विकल्प के साथ पॉप्युलेट किया जाना है।
नियंत्रण द्वारा पसंद के मेनू के रूप में उपयोग किए जाने वाले तत्व <div> तत्व का नाम या संदर्भ
तीसरे पैरामीटर के लिए, सर्वर-असिस्टेड ऑटो-कंपाइलर के साथ URL के बजाय, हम एक छोटे स्ट्रिंग सरणी की आपूर्ति करते हैं, जिसमें सभी संभावित मान शामिल हैं।
सामान्य विकल्प हैश।
विकल्प
आप अपना ऑटोकंप्लीटर.लोक ऑब्जेक्ट बनाते समय निम्न में से एक या अधिक विकल्पों का उपयोग कर सकते हैं।
| अनु क्रमांक | विकल्प और विवरण |
|---|---|
| 1 | Choices प्रदर्शित करने के लिए विकल्पों की संख्या। 10 से चूक। |
| 2 | partialSearch पूर्ण स्ट्रिंग्स के भीतर एम्बेडेड शब्दों की शुरुआत में मिलान करने में सक्षम करता है। सत्य की अवहेलना। |
| 3 | fullSearch पूर्ण स्ट्रिंग्स के भीतर कहीं भी मिलान करने में सक्षम करता है। झूठे की अवहेलना करता है। |
| 4 | partialChars किसी भी आंशिक मिलान के प्रयास से पहले टाइप किए जाने वाले वर्णों की संख्या निर्धारित करता है। 2 से चूक। |
| 5 | ignoreCase मिलान करते समय मामले को अनदेखा करता है। सत्य की अवहेलना। |
उदाहरण
<html>
<head>
<title>Simple Ajax Auto-completer Example</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,controls"></script>
<script type = "text/javascript">
window.onload = function() {
new Autocompleter.Local(
'autoCompleteTextField',
'autoCompleteMenu',
['abcdef','abcdeg','xyzabcefg', 'tybabdefg','acdefg'],
{ignoreCase:false}
);
}
</script>
</head>
<body>
<p>Type something in this box and then select suggested option from the list </p>
<div>
<label>Text field:</label>
<input type = "text" id = "autoCompleteTextField"/>
<div id = "autoCompleteMenu"></div>
</div>
</body>
</html>जब प्रदर्शित किया जाता है, और वर्ण 'a' को टेक्स्ट बॉक्स में टाइप किया जाता है, तो यह सभी मिलान विकल्पों को प्रदर्शित करता है।
उपरोक्त तालिका में चर्चा किए गए विभिन्न विकल्पों के साथ कोड की बेहतर समझ के लिए हमारे ऑनलाइन कंपाइलर का उपयोग करें।
यह निम्नलिखित परिणाम देगा -
इन-प्लेस संपादन वेब 2.0.स्टाइल एप्लिकेशन के हॉलमार्क में से एक है।
इन-प्लेस संपादन गैर-संपादन योग्य सामग्री लेने के बारे में है, जैसे कि <p>, <h1>, या <div>, और उपयोगकर्ता को केवल क्लिक करके इसकी सामग्री को संपादित करने देता है।
यह स्थैतिक तत्व को संपादन योग्य क्षेत्र में बदल देता है (या तो सिंगललाइन या मल्टीलाइन) और उपयोगकर्ता को संशोधन करने या वापस करने के लिए उपयोगकर्ता के लिए सबमिट (या लिंक, आपके विकल्पों पर निर्भर करता है) को सबमिट और रद्द करता है।
यह तब Ajax के माध्यम से सर्वर साइड पर एडिट को सिंक्रनाइज़ करता है और तत्व को फिर से गैर-संपादन योग्य बनाता है।
Script.aculo.us की इन-प्लेस संपादन क्षमताओं का उपयोग करने के लिए, आपको प्रोटोटाइप.js मॉड्यूल के साथ controls.js और effects.js मॉड्यूल को लोड करना होगा। तो, script.aculo.us के लिए आपकी न्यूनतम लोडिंग इस तरह होगी -
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,controls"></script>इन-प्लेस टेक्स्ट एडिटर बनाना
पूरा निर्माण वाक्यविन्यास इस प्रकार है -
new Ajax.InPlaceEditor(element, url [ , options ] )Ajax.InPlaceEditor के लिए निर्माता तीन मापदंडों को स्वीकार करता है -
लक्ष्य तत्व या तो स्वयं तत्व का संदर्भ हो सकता है या लक्ष्य तत्व का आईडी।
Ajax.InPlaceEditor का दूसरा पैरामीटर एक सर्वर-साइड स्क्रिप्ट के URL को निर्दिष्ट करता है, जो एक संपादित मूल्य पूरा होने पर संपर्क किया जाता है।
सामान्य विकल्प हैश।
विकल्प
आप अपना Ajax.InPlaceEditor ऑब्जेक्ट बनाते समय निम्नलिखित विकल्पों में से एक या अधिक का उपयोग कर सकते हैं।
| अनु क्रमांक | विकल्प और विवरण |
|---|---|
| 1 | okButton एक बूलियन मान दर्शाता है कि "ओके" बटन दिखाया जाना है या नहीं। सत्य की अवहेलना। |
| 2 | okText टेक्स्ट को ओके बटन पर रखा जाएगा। "ठीक" करने के लिए चूक। |
| 3 | cancelLink एक बूलियन मान दर्शाता है कि क्या रद्द लिंक प्रदर्शित किया जाना चाहिए। सत्य की अवहेलना। |
| 4 | cancelText रद्द लिंक का पाठ। "रद्द" करने के लिए चूक। |
| 5 | savingText एक पाठ स्ट्रिंग को नियंत्रण के मूल्य के रूप में प्रदर्शित किया गया है जबकि सेव ऑपरेशन (ओके बटन पर क्लिक करके शुरू किया गया अनुरोध) प्रसंस्करण है। "सेविंग" में कमी। |
| 6 | clickToEditText पाठ स्ट्रिंग जो माउस-ओवर पर नियंत्रण "टूलटिप" के रूप में प्रकट होता है। |
| 7 | rows संपादन नियंत्रण के सक्रिय होने पर दिखाई देने वाली पंक्तियों की संख्या। 1 से अधिक कोई भी संख्या एक पाठ क्षेत्र तत्व के बजाय एक पाठ क्षेत्र तत्व का उपयोग करने का कारण बनती है। 1 से चूक। |
| 8 | cols सक्रिय मोड में होने पर कॉलम की संख्या। यदि छोड़ दिया जाता है, तो कोई स्तंभ सीमा नहीं लगाई जाती है। |
| 9 | size कर्नल के रूप में भी लेकिन केवल जब पंक्तियाँ 1 लागू होती हैं। |
| 10 | highlightcolor माउस-ओवर पर पाठ तत्व की पृष्ठभूमि पर लागू होने वाला रंग। एक पीला पीला करने के लिए चूक। |
| 1 1 | highlightendcolor जिस रंग पर प्रकाश डाला जाता है वह रंग प्रभाव के रूप में मिटता है। Note - समर्थन कुछ ब्राउज़रों में धब्बेदार लगता है। |
| 12 | loadingText लोड ऑपरेशन के दौरान नियंत्रण के भीतर दिखाई देने वाला पाठ। डिफ़ॉल्ट "लोड हो रहा है"। |
| 13 | loadTextURL सक्रिय मोड में प्रवेश करने पर संपादक के प्रारंभिक मूल्य को लोड करने के लिए सर्वर-साइड संसाधन का URL निर्दिष्ट किया जाता है। डिफ़ॉल्ट रूप से, कोई बैकएंड लोड ऑपरेशन नहीं होता है और प्रारंभिक मूल्य लक्ष्य तत्व का पाठ है। |
| 14 | externalControl एक तत्व जो एक "बाहरी नियंत्रण" के रूप में सेवा करने के लिए है जो संपादक को सक्रिय मोड में रखने से चलाता है। यदि आप संपादन को नियंत्रित करने के लिए एक और बटन या अन्य तत्व चाहते हैं तो यह उपयोगी है। |
| 15 | ajaxOptions एक हैश ऑब्जेक्ट जो अंतर्निहित प्रोटोटाइप अजाक्स ऑब्जेक्ट को उसके विकल्प हैश के रूप में उपयोग करने के लिए पारित किया जाएगा। |
कॉलबैक विकल्प
इसके अतिरिक्त, आप विकल्प पैरामीटर में किसी भी कॉलबैक फ़ंक्शन का उपयोग कर सकते हैं
| अनु क्रमांक | समारोह विवरण |
|---|---|
| 1 | onComplete एक जावास्क्रिप्ट फ़ंक्शन जिसे सेव अनुरोध के सफल समापन पर कहा जाता है। डिफ़ॉल्ट संपादक पर एक हाइलाइट प्रभाव लागू करता है। |
| 2 | onFailure एक जावास्क्रिप्ट फ़ंक्शन जिसे सेव रिक्वेस्ट की विफलता कहा जाता है। डिफ़ॉल्ट विफलता संदेश दिखाते हुए चेतावनी जारी करता है। |
| 3 | callback एक जावास्क्रिप्ट फ़ंक्शन जिसे अनुरोध भेजने के लिए क्वेरी स्ट्रिंग प्राप्त करने के लिए केवल सहेजने का अनुरोध सबमिट करने से पहले कहा जाता है। डिफ़ॉल्ट फ़ंक्शन क्वेरी स्ट्रिंग "मान" को पाठ नियंत्रण में मान के बराबर बनाता है। |
CSS स्टाइलिंग और DOM आईडी विकल्प
आप स्थान संपादक के व्यवहार को नियंत्रित करने के लिए निम्नलिखित विकल्पों में से एक का उपयोग कर सकते हैं -
| अनु क्रमांक | विकल्प और विवरण |
|---|---|
| 1 | savingClassName सीएसएस वर्ग नाम तत्व पर लागू होता है जबकि सेव ऑपरेशन जारी है। यह वर्ग तब लागू किया जाता है जब बचत यूआरएल के लिए अनुरोध किया जाता है, और प्रतिक्रिया वापस आने पर इसे हटा दिया जाता है। डिफ़ॉल्ट मान "इनहेल्डिटर-सेविंग" है। |
| 2 | formClassName CSS क्लास का नाम संपादक तत्व को शामिल करने के लिए बनाए गए फॉर्म पर लागू होता है। "इनहेल्डिटर-फॉर्म" की कमी। |
| 3 | formId संपादक तत्व को शामिल करने के लिए बनाए गए फॉर्म पर लागू आईडी। |
उदाहरण
<html>
<head>
<title>Simple Ajax Auto-completer Example</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,controls"></script>
<script type = "text/javascript">
window.onload = function() {
new Ajax.InPlaceEditor(
'theElement',
'/script.aculo.us/transform.php',
{
formId: 'whatever',
okText: 'Upper me!',
cancelText: 'Never mind'
}
);
}
</script>
</head>
<body>
<p>Click over the "Click me!" text and then change text and click OK.</p>
<p>Try this example with different options.</p>
<div id = "theElement">
Click me!
</div>
</body>
</html>प्रदर्शित होने पर, पाठ पर क्लिक करें और संपादित करें। यह बल्कि तुच्छ PHP स्क्रिप्ट एक कुंजी पैरामीटर के मान को "अपरकेस" के बराबर कुंजी के साथ परिवर्तित करता है, और परिणाम को प्रतिक्रिया पर वापस लिखता है।
यहां ट्रांसफॉर्म.फपी स्क्रिप्ट की सामग्री है।
<?php
if( isset($_REQUEST["value"]) ) { $str = $_REQUEST["value"]; $str = strtoupper($str); echo "$str";
}
?>यह निम्नलिखित परिणाम देगा -
इन-प्लेस संग्रह संपादक विकल्प
Ajax.InPlaceCollectionEditor नामक एक और ऑब्जेक्ट है , जो इन-प्लेस संपादन का समर्थन करता है और आपको दिए गए विकल्पों में से एक मूल्य का चयन करने का विकल्प देता है।
पूरा निर्माण वाक्यविन्यास इस प्रकार है -
new Ajax.InPlaceCollectionEditor(element, url [ , options ] )Ajax.InPlaceCollectionEditor के लिए निर्माता तीन मापदंडों को स्वीकार करता है -
लक्ष्य तत्व या तो स्वयं तत्व का संदर्भ हो सकता है या लक्ष्य तत्व का आईडी
Ajax.InPlaceEditor का दूसरा पैरामीटर एक सर्वर-साइड स्क्रिप्ट के URL को निर्दिष्ट करता है, जो एक संपादित मूल्य पूरा होने पर संपर्क किया जाता है।
सामान्य विकल्प हैश।
विकल्प
इसके अलावा संग्रह विकल्प के अलावा, इन-प्लेस कलेक्शन एडिटर के लिए विकल्पों की सूची इन-प्लेस टेक्स्ट एडिटर से विरासत में प्राप्त विकल्पों का एक सबसेट है।
| अनु क्रमांक | विकल्प और विवरण |
|---|---|
| 1 | okButton एक बूलियन मान दर्शाता है कि "ओके" बटन दिखाया जाना है या नहीं। सत्य की अवहेलना। |
| 2 | okText टेक्स्ट को ओके बटन पर रखा जाएगा। "ठीक" करने के लिए चूक। |
| 3 | cancelLink एक बूलियन मान दर्शाता है कि क्या रद्द लिंक प्रदर्शित किया जाना चाहिए। सत्य की अवहेलना। |
| 4 | cancelText रद्द लिंक का पाठ। "रद्द" करने के लिए चूक। |
| 5 | savingText एक पाठ स्ट्रिंग को नियंत्रण के मूल्य के रूप में प्रदर्शित किया गया है जबकि सेव ऑपरेशन (ओके बटन पर क्लिक करके शुरू किया गया अनुरोध) प्रसंस्करण है। "सेविंग" में कमी। |
| 6 | clickToEditText पाठ स्ट्रिंग जो माउस-ओवर पर नियंत्रण "टूलटिप" के रूप में प्रकट होता है। |
| 7 | Highlightcolor माउस-ओवर पर पाठ तत्व की पृष्ठभूमि पर लागू होने वाला रंग। एक पीला पीला करने के लिए चूक। |
| 8 | Highlightendcolor जिस रंग पर प्रकाश डाला जाता है वह रंग प्रभाव के रूप में मिटता है। Note - समर्थन कुछ ब्राउज़रों में धब्बेदार लगता है। |
| 9 | Collection उन मदों की एक सरणी, जिनका उपयोग चयनित तत्व विकल्पों को पॉप्युलेट करने के लिए किया जाता है। |
| 10 | loadTextUrl सक्रिय मोड में प्रवेश करने पर संपादक के प्रारंभिक मूल्य को लोड करने के लिए सर्वर-साइड संसाधन का URL निर्दिष्ट किया जाता है। डिफ़ॉल्ट रूप से, कोई बैकएंड लोड ऑपरेशन नहीं होता है और प्रारंभिक मूल्य लक्ष्य तत्व का पाठ है। इस विकल्प के सार्थक होने के लिए, इसे संग्रह विकल्प में प्रदान की गई वस्तुओं में से किसी एक को वापस चुनना होगा, जिसे चुनिंदा तत्व के प्रारंभिक मूल्य के रूप में सेट किया जाना है। |
| 1 1 | externalControl एक तत्व जो एक "बाहरी नियंत्रण" के रूप में सेवा करने के लिए है जो संपादक को सक्रिय मोड में रखने से चलाता है। यदि आप संपादन को नियंत्रित करने के लिए एक और बटन या अन्य तत्व चाहते हैं तो यह उपयोगी है। |
| 12 | ajaxOptions एक हैश ऑब्जेक्ट जो अंतर्निहित प्रोटोटाइप अजाक्स ऑब्जेक्ट को उसके विकल्प हैश के रूप में उपयोग करने के लिए पारित किया जाएगा। |
कॉलबैक विकल्प
इसके अतिरिक्त, आप विकल्प पैरामीटर में निम्नलिखित कॉलबैक कार्यों में से किसी का उपयोग कर सकते हैं -
| अनु क्रमांक | समारोह विवरण |
|---|---|
| 1 | onComplete एक जावास्क्रिप्ट फ़ंक्शन जिसे सेव अनुरोध के सफल समापन पर कहा जाता है। डिफ़ॉल्ट संपादक पर एक हाइलाइट प्रभाव लागू करता है। |
| 2 | onFailure एक जावास्क्रिप्ट फ़ंक्शन जिसे सेव रिक्वेस्ट की विफलता कहा जाता है। डिफ़ॉल्ट विफलता संदेश दिखाते हुए चेतावनी जारी करता है। |
CSS स्टाइलिंग और DOM आईडी विकल्प
इन-प्लेस एडिटर के व्यवहार को नियंत्रित करने के लिए आप निम्नलिखित विकल्पों में से एक का उपयोग कर सकते हैं -
| अनु क्रमांक | विकल्प और विवरण |
|---|---|
| 1 | savingClassName सीएसएस वर्ग नाम तत्व पर लागू होता है जबकि सेव ऑपरेशन जारी है। यह वर्ग तब लागू किया जाता है जब बचत यूआरएल के लिए अनुरोध किया जाता है, और प्रतिक्रिया वापस आने पर इसे हटा दिया जाता है। डिफ़ॉल्ट मान "इनहेल्डिटर-सेविंग" है। |
| 2 | formClassName CSS क्लास का नाम संपादक तत्व को शामिल करने के लिए बनाए गए फॉर्म पर लागू होता है। "इनहेल्डिटर-फॉर्म" की कमी। |
| 3 | formId संपादक तत्व को शामिल करने के लिए बनाए गए फॉर्म पर लागू आईडी। |
उदाहरण
<html>
<head>
<title>Simple Ajax Auto-completer Example</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,controls"></script>
<script type = "text/javascript">
window.onload = function() {
new Ajax.InPlaceCollectionEditor(
'theElement',
'/script.aculo.us/transform.php',
{
formId: 'whatever',
okText: 'Upper me!',
cancelText: 'Never mind',
collection: ['one','two','three','four','five']
}
);
}
</script>
</head>
<body>
<p>Click over the "Click me!" text and then change text and click OK.</p>
<p>Try this example with different options.</p>
<div id = "theElement">
Click me!
</div>
</body>
</html>यहां ट्रांसफॉर्म.फपी स्क्रिप्ट की सामग्री दी गई है।
<?php
if( isset($_REQUEST["value"]) ) { $str = $_REQUEST["value"]; $str = strtoupper($str); echo "$str";
}
?>प्रदर्शित होने पर, प्रदर्शित विकल्पों में से एक पर क्लिक करें और चुनें। यह बल्कि तुच्छ PHP स्क्रिप्ट क्वेरी पैरामीटर के मान को "अपरकेस" के बराबर कुंजी के साथ परिवर्तित करता है, और परिणाम को प्रतिक्रिया पर वापस लिखता है।
उपरोक्त तालिका में चर्चा किए गए विभिन्न विकल्पों के साथ कोड की बेहतर समझ के लिए हमारे ऑनलाइन कंपाइलर का उपयोग करें।
यह निम्नलिखित परिणाम देगा -