लाइव फॉर्म के लिए प्लगइन

लेख एक प्लगइन के लिए समर्पित है जो क्लाइंट-साइड प्रोग्रामर के जीवन को सरल बनाता है।

फॉर्म भरते समय, ऐसा होता है कि, दर्ज किए गए डेटा को देखते हुए, फॉर्म को बदलने (फ़ील्ड को छिपाने और दिखाने) की आवश्यकता होती है। सबसे सरल उदाहरण: सामानों के वितरण का आदेश देते समय, उपयोगकर्ता ने "पिकअप" चुना, इसलिए वितरण पते के बारे में फ़ील्ड छुपाई जा सकती हैं, लेकिन पिकअप के लिए नक्शा दिखाना बहुत अच्छा होगा।

और आगे क्या है

अक्सर इस तर्क को लागू किए बिना छोड़ दिया जाता है, लेकिन यदि आप अपने उपयोगकर्ताओं की परवाह करते हैं, तो आपको ऐसा करने की आवश्यकता है।

पहला मानक दृष्टिकोण चरण-दर-चरण विज़ार्ड बनाना है जहां सर्वर चरण पर प्रत्येक चरण के लिए एक फ़ॉर्म जेनरेट होता है। मेरी राय में, यह एक दुर्भाग्यपूर्ण विकल्प है, क्योंकि इस प्रक्रिया को चरणों में तोड़ने के लिए बहुत सारे काम की आवश्यकता होती है, एक टन कोड लिखें और इस फॉर्म के साथ काम करने में बहुत कम खुशी मिलती है।

दूसरा दृष्टिकोण जावास्क्रिप्ट के "जॉगल्स" लिखना है जो क्लाइंट पक्ष पर इस सभी तर्क को लागू करता है। यह "कैस्केडिंग" तर्क लिखने के लिए विशेष रूप से दुख की बात है जैसे "यदि आपने फ़ील्ड ए में प्रवेश किया है , तो बी दिखाएं, यदि आपने फ़ील्ड बी में प्रवेश किया है, तो डी दिखाएं। यदि आपने ए में कुछ और दर्ज किया है, तो बी छिपाएं और फिर डी"।

दोनों विकल्पों को सुविधाजनक नहीं कहा जा सकता। सबसे पहले, क्योंकि तर्क को इस तरह के मामलों के लिए उपयुक्त एक के बजाय एक अनिवार्य शैली में लागू किया जाता है । लेकिन एक रास्ता है!

निर्णय

सामान्य तौर पर, जब इस तरह के दूसरे रूप को लागू करने की आवश्यकता उत्पन्न हुई, तो अंततः jQuery के लिए एक प्लग-इन लिखने का निर्णय लिया गया जो कि होगा:

• फॉर्म फील्ड भरने के लिए प्रतिक्रिया व्यक्त की
• एक या दो पंक्तियों में चयन करने के लिए टाइप शो , छिपाने , जोड़ने के मानक तर्क का वर्णन करने की अनुमति दी गई है
• वह कार्रवाई के निष्पादन और उनके रोलबैक को समझने का ध्यान रखेगा
• अध्ययन के लिए कुछ मिनटों की आवश्यकता होगी

मैंने परिणामी प्लगइन को jQuery.grewform (जैसे कि एक बढ़ता हुआ रूप) कहा। रेंटिंग के बिना - सबसे सरल उदाहरण । आइए हम रूसी में लागू तर्क का वर्णन करें:

 #first   "show",    #p2.  #second   "gogo",    #p3. 

अब देखते हैं कि प्लगइन का उपयोग करके इस तर्क का वर्णन कैसे किया जाता है:

 $('form').grewform({ // #first   "show",    #p2 '#first[value=show]':{ show:'#p2' }, // #second   "gogo",    #p3 '#second[value=gogo]':{ show:'#p3' } }) 

अधिक जानकारी

इसके बाद प्लगइन का विस्तृत विवरण है। यदि उपरोक्त उदाहरण से सब कुछ अधिक या कम स्पष्ट है, तो आप लेख के इस भाग को छोड़ सकते हैं और संभावनाओं के विवरण के लिए आगे बढ़ सकते हैं।
प्लगइन व्यवहार को नियमों के एक सेट द्वारा परिभाषित किया गया है। प्रत्येक नियम में एक शब्द और क्रियाओं का एक समूह होता है। आरंभीकरण के बाद, और हर बार फॉर्म बदलने के बाद, प्लगइन प्रत्येक नियम की अवधि की जांच करता है। जाँच करते समय, शब्द फॉर्म की वर्तमान स्थिति से मेल खाने के लिए निर्धारित होता है। प्रत्येक नियम तीन में से एक स्थिति में दिखाई दे सकता है:

1. अंतिम जांच के दौरान, यह शब्द राज्य के अनुरूप नहीं था, लेकिन अब यह मेल खाता है
2. अंतिम जांच के दौरान, यह शब्द राज्य के अनुरूप था, लेकिन अब यह अनुरूप नहीं है
3. प्रपत्र की स्थिति के लिए पत्राचार नहीं बदला है

पहले मामले में, नियम को ट्रिगर के रूप में चिह्नित किया जाता है , शब्द में वर्णित DOM तत्वों (वास्तव में, इन तत्वों को नियम के कारण ट्रिगर किया जा रहा है) एक लेबल प्राप्त होता है (एक वर्ग जोड़ा जाता है) यह दर्शाता है कि ट्रिगर नियम उन पर "लटका" है। उसके बाद, नियम में वर्णित सभी क्रियाएं बदले में शुरू की जाती हैं। दूसरा मामला अधिक दिलचस्प है। इसी तरह, एक नियम के रूप में चिह्नित किया गया है जो अब काम नहीं कर रहा है ; तत्वों से नोट हटा दिए जाते हैं। उसके बाद, नियम में वर्णित कार्यों के नकारात्मक को ट्रिगर किया जाता है (कुछ दिखाया गया है? अब इसे छिपाना चाहिए!), और यदि कोई तत्व DOM में छिपा या हटाए गए हैं, तो इसे पहले चेक किया गया है
क्या कोई नियम उन पर "लटका" है (केस नंबर 1 देखें), यदि हां, तो इन नियमों के लिए "रोलबैक" प्रक्रिया शुरू होती है (केस नंबर 2 के रूप में काम करता है)। तीसरे मामले में, कुछ भी नहीं होता है।
यह ध्यान देने योग्य है कि शर्तों के अनुरूपता की जांच करते समय फ़ॉर्म के केवल दृश्य तत्वों को ध्यान में रखा जाता है।

अवसरों

वह अभिव्यक्ति जिसके द्वारा यह निर्धारित किया जाता है कि क्या यह कार्य चलाने का समय है (शब्द) एक CSS / jQuery- संगत चयनकर्ता है। यदि प्रपत्र में चयनकर्ता के अनुरूप तत्व शामिल हैं, तो इस नियम की क्रियाएं चालू हो जाती हैं। कभी-कभी एक नियम के लिए केवल डबल (ट्रिपल, चौगुनी ...) स्थिति के तहत काम करना आवश्यक होता है, इसके लिए आप AND फ़ंक्शन ( उदाहरण ) का उपयोग कर सकते हैं। यह केवल वाक्यविन्यास परिवर्तन है, या इसके अलावा है।
पहला उदाहरण [value = show] चयनकर्ता का उपयोग करता है। विशेष रूप से जानकार jQuery का कहना है कि कोड के निष्पादन के दौरान यदि मूल्य बदल दिया गया था तो ऐसे चयनकर्ताओं को काम नहीं करना चाहिए। हालांकि, प्लगइन सभी <input/> लिए मूल्य विशेषता की वर्तमान स्थिति को बनाए रखता है, क्रमशः, सब कुछ उसी तरह काम करता है जैसा उसे करना चाहिए।
आइए क्रियाओं के प्रकारों के विवरण पर आगे बढ़ते हैं। यहाँ वाक्यविन्यास विवरण की एक सूची है:

 { show:'elements_selector', //  (slideDown; slideUp  ) hide:'elements_selector', //  (slideUp; slideDown  ) disable:'elements_selector' // disabled="disabled"    (  ) enable:'elements_selector' //   disabled ( disabled="disabled"  ) check:'elements_selector' // checked="checked"    (  ) uncheck:'elements_selector' //   checked ( checked="checked"  ) set_value:'elements_selector', // value  <input>,  <select>  selected="selected"   <option> add_options: // <option>  <select> { '<select> selector':{ 'value_1':'display_value_1', // <option value="1">display_value_1</option> 'value_2':'display_value_2', ... } or '<select> selector': function //   ( - {'value_1':'display_value_1',...}) }, custom: //   { match:function, //     unmatch:function, //    } } 

जैसा कि ऊपर उल्लेख किया गया है, केवल सकारात्मक घटनाओं का वर्णन किया गया है, अर्थात्। केवल वे ही होने चाहिए, जब नियम को ट्रिगर किया गया हो। रोलबैक क्रियाओं की गणना स्वचालित रूप से की जाती है।
जैसा कि आप देख सकते हैं, लगभग सभी कार्यों में निम्नलिखित सिंटैक्स होते हैं:
क्रिया_नाम: 'तत्व चयनकर्ता'
चयनकर्ता वाक्यविन्यास भी पूरी तरह से CSS / jQuery के अनुरूप है। निर्दिष्ट कार्रवाई चयनकर्ता द्वारा पाए गए तत्वों पर की जाएगी। दरअसल, सभी कार्यों को कोड में ऊपर वर्णित किया गया है।

अंत में, सबसे बड़ा और सबसे शक्तिशाली उदाहरण मनोवैज्ञानिक परामर्श क्रम फॉर्म =) है

मदद चाहिए

मैंने इस प्लगइन को 2 सप्ताह पहले लिखना शुरू किया था और हम पहले से ही उत्पादन पर 2 रूपों में इसका उपयोग कर रहे हैं। यदि आप इस प्लगइन को आज़माएँगे और मुझे बताएंगे कि आप क्या याद कर रहे हैं तो मैं बहुत आभारी रहूँगा

संदर्भ:

• एक बार में सभी उदाहरण
• गिथब पर परियोजना भंडार

© कोड पूरा से लिया गया चित्र