script.aculo.us - इन-प्लेस संपादन

इन-प्लेस संपादन वेब 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
   if( isset($_REQUEST["value"]) ) { $str = $_REQUEST["value"]; $str = strtoupper($str); echo "$str";
   }
?>

प्रदर्शित होने पर, प्रदर्शित विकल्पों में से एक पर क्लिक करें और चुनें। यह बल्कि तुच्छ PHP स्क्रिप्ट क्वेरी पैरामीटर के मान को "अपरकेस" के बराबर कुंजी के साथ परिवर्तित करता है, और परिणाम को प्रतिक्रिया पर वापस लिखता है।

उपरोक्त तालिका में चर्चा किए गए विभिन्न विकल्पों के साथ कोड की बेहतर समझ के लिए हमारे ऑनलाइन कंपाइलर का उपयोग करें।

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