🐑 ⛵️ 😘 साइट पर पंजीकरण: शुरुआत से दोपहर तक 👡 🚟 🈚️

हाय हमर!
मैं वेब विकास के क्षेत्र में काम करता हूं और दूसरे दिन मेरे पास एक दिलचस्प काम था - एक जटिल पंजीकरण फॉर्म बनाना आवश्यक था, जिसमें बाईस (22!) पाठ फ़ील्ड और चेकबॉक्स के साथ एक बड़ी सूची होगी।
मुझे हमेशा इस सिद्धांत द्वारा निर्देशित किया गया है कि पंजीकरण फॉर्म पर बड़ी संख्या में फ़ील्ड उपयोगकर्ताओं के लिए बहुत अप्रिय हैं, भले ही वे पूरा होने पर सामग्री बोनस प्राप्त करेंगे। इसलिए, मैंने हमेशा अधिकतम 4 क्षेत्रों के साथ, जितना संभव हो उतना सरल बनाने की कोशिश की, यदि यह व्यवसाय (ग्राहक) की ओर से संभव था। और यहां तक कि छिपे हुए js- कैप्चा का उपयोग करते हुए, या पूरी तरह से इसे छोड़ देने के बावजूद कैप्चा फ़ील्ड की उपेक्षा की। लेकिन ग्राहक को यह बताने के सभी प्रयास असफल रहे।

हैब्रैट के तहत मैं इस तरह की समस्याओं का सबसे सार्वभौमिक समाधान बनाने की कोशिश करूंगा

पहले सोचा गया था कि सभी पॉलिमर चले गए थे, लेकिन थोड़े विचार के बाद यह स्पष्ट हो गया कि कई क्षेत्रों को समूहों में विभाजित किया जा सकता है, और कुछ को पूरी तरह से हटाया जा सकता है। नतीजतन, मुझे 4 फॉर्म मिले:

"पंजीकरण डेटा" (लॉगिन, पासवर्ड, ईमेल, फोन)
"व्यक्तिगत डेटा" (जन्म की तारीख, लिंग, आद्याक्षर)
"काम का स्थान" (क्षेत्र, स्थिति, वेतन :))
"दिलचस्प टेप" (चेकबॉक्स की सूची)
"पंजीकरण का समापन", सभी दर्ज किए गए डेटा प्रदर्शित करें

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

(function ($) { $.fn.Roadmap = function (){ }; })(jQuery);

बहुत बढ़िया। अब हम कुछ प्लग-इन विकल्पों को कॉन्फ़िगर करने की क्षमता जोड़ सकते हैं (इसे शुरू करने से पहले), कुछ सार्वजनिक तरीके प्रदान करते हैं, और एक क्लोजर जोड़ते हैं ताकि हम अपनी वस्तु के लिए jQuery फ़ंक्शंस का उपयोग कर सकें।

 (function ($) { $.Roadmap = $.Roadmap || {}; $.extend($.Roadmap, { extend: function (methods) { $.extend($.fn.Roadmap, methods); $.fn.extend(methods); } }); //    $.fn.Roadmap = function (options) { var options = $.extend({ onInit: null, allowJump: true, voyagerSpeed: 300, voyagerPosition: 0, checkpoints: [], onloadEvent: null, ckeckpointNext: null, checkpointPrev: null, width: 400, }, options); //   // $.Roadmap.extend,    $.Roadmap.extend({ CurrentPosition: function () { }, MoveNext: function () { }, MovePrev: function () { } }); //,    \ jQuery,  $.animate() return this.each(function () { //  }); }; })(jQuery);

हो गया। लेकिन प्लगइन कोड किसी तरह खो गया है, इसे एक अलग जगह पर ले जाना बेहतर है, यह अधिक पठनीय होगा और सार्वजनिक कार्यों का वर्णन करना न भूलें। और पूरी तरह से पठनीय होने के लिए, सब कुछ बिगाड़ने में है।

प्लगइन कोड पूरी तरह से

 (function ($) { $.Roadmap = $.Roadmap || {}; $.extend($.Roadmap, { extend: function (methods) { $.extend($.fn.Roadmap, methods); $.fn.extend(methods); } }); $.fn.Roadmap = function (options) { var options = $.extend({ onInit: null, // ,    allowJump: true, //   , .  voyagerSpeed: 300, //      checkpoint voyagerPosition: 0, //   checkpoints: [], //    callbacks ckeckpointNext: null, //callback    (  MoveNext()) checkpointPrev: null, //  width: 400, //    }, options); var $roadmap = $("<div>").addClass("roadmap"), $voyager = $("<div>").addClass("voyager"), voyagerPosition = options.voyagerPosition, voyagerOffset = -1; //private  (  ,  ) var methods = { determineWidth: function ($obj) { var r = /[px|em]{2,}/g, w = 0; w += parseInt($obj.css("padding-left").replace(r, "")); w += parseInt($obj.css("padding-right").replace(r, "")); w += parseInt($obj.css("border-left-width").replace(r, "")); w += parseInt($obj.css("border-right-width").replace(r, "")); w += parseInt($obj.css("margin-left").replace(r, "")); w += parseInt($obj.css("margin-right").replace(r, "")); return w; } }; // ,   var make = function () { $(this) .css("width", options.width) .css("display", "none"); var $mark = $("<div>").addClass("mark"), $map = $("<div>").addClass("map"), $checkpoint = {}; $(options.checkpoints).each(function (i, o) { $checkpoint = $("<div>").addClass("checkpoint"); $checkpoint .append($("<div>")) .click(function (e) { if ((options.allowJump || !e.originalEvent) && $(e.target).closest(".voyager").length == 0) { var ts = $(this), tsOffset = ts.offset(), rmOffset = $roadmap.offset(); voyagerPosition = i; if (voyagerOffset < 0) { voyagerOffset = $voyager.offset().left; $voyager.css("left", voyagerOffset); } $voyager.animate({ left: (voyagerOffset + tsOffset.left - rmOffset.left - parseInt($map.css("padding-left"))) }, 400); $("div.mark") .find("div.marklabel").removeClass("active").end() .find("div.marklabel:eq(" + i + ")").addClass("active"); if (o.hndl != null && typeof (o.hndl) === "function") { o.hndl(voyagerPosition); } } }); $map.append($checkpoint); if (i < options.checkpoints.length - 1) { $map.append($("<div>").addClass("road")) $mark .append($("<div>").addClass("marklabel").html(o.text)) .append($("<div>").addClass("road")); } else { $map.append($("<div>").addClass("clear")); $mark.append($("<div>").addClass("marklabel").html(o.text)) } }); $roadmap .append($map) .append($mark); $(this).append($roadmap); var roadLength = 0, checkpointsTotalLength = 0; checkpointsTotalLength += methods.determineWidth($checkpoint.find("div")); checkpointsTotalLength += methods.determineWidth($checkpoint); roadLength = Math.floor((options.width - checkpointsTotalLength * 4) / 3); roadLength -= methods.determineWidth($map); roadLength -= methods.determineWidth($(".road", $map)); $map .find(".road").width(roadLength).end() .find(".checkpoint").eq(voyagerPosition).prepend($voyager).end(); $mark .find(".marklabel:eq(" + voyagerPosition + ")").addClass("active").end() .find(".marklabel").width(checkpointsTotalLength).end() .find(".road").width(roadLength).end(); if (options.onInit != null && typeof (options.onInit) === "function") { options.onInit(); } $(this).show(); $map.find(".checkpoint").eq(voyagerPosition).trigger("click"); }; //public ,      $.Roadmap.extend({ CurrentPosition: function () { return voyagerPosition; }, MoveNext: function () { if (voyagerPosition + 1 < options.checkpoints.length) { ++voyagerPosition; $("div.roadmap .checkpoint:eq(" + voyagerPosition + ")").trigger("click"); if (typeof (options.ckeckpointNext) === "function") { options.ckeckpointNext(voyagerPosition); } } }, MovePrev: function () { if (voyagerPosition - 1 >= 0) { --voyagerPosition; $("div.roadmap .checkpoint:eq(" + voyagerPosition + ")").trigger("click"); if (typeof (options.ckeckpointPrev) === "function") { options.ckeckpointPrev(voyagerPosition); } } } }); return this.each(make); }; })(jQuery);//  $.Roadmap.extend({ CurrentPosition: function () { return voyagerPosition; }, MoveNext: function () { if (voyagerPosition + 1 < options.checkpoints.length) { ++voyagerPosition; $("div.roadmap .checkpoint:eq(" + voyagerPosition + ")").trigger("click"); if (typeof (options.ckeckpointNext) === "function") { options.ckeckpointNext(voyagerPosition); } } }, MovePrev: function () { if (voyagerPosition - 1 >= 0) { --voyagerPosition; $("div.roadmap .checkpoint:eq(" + voyagerPosition + ")").trigger("click"); if (typeof (options.ckeckpointPrev) === "function") { options.ckeckpointPrev(voyagerPosition); } } } });

यह पृष्ठ पर इसे सम्मिलित करने के लिए रहता है, उदाहरण के लिए इस तरह

 $("#rmp").Roadmap({ checkpoints: [{ text: " ", }, { text: " }] });

प्लगइन github पर उपलब्ध है
यहां डेमो देखा जा सकता है।

युपीडी
इलवर द्वारा सलाह के अनुसार, डेमो को Pages.github में ले जाया गया।

पुनश्च
नक्शे में $ voyager को स्थानांतरित करने के लिए, मैंने CSS3 का उपयोग करने से इनकार करते हुए $ .animate () का उपयोग किया। कारण क्रोमियम के नवीनतम संस्करणों (28.0.1482.0 (194616)) में से एक में $ .cs निर्माण ("- वेबकिट-ट्रांसफ़ॉर्म", "ट्रांसलेक्स (100)") का अजीब व्यवहार था, हालांकि सब कुछ अगले रिलीज में काम किया।

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

सभी आगामी 2014 के साथ!

साइट पर पंजीकरण: शुरुआत से दोपहर तक

More articles: