घटक नोटों के ऊपर

ड्रॉप डाउन सूची

आइए एक सरल घटक बनाएं, ड्रॉपडाउन सूची। (ध्यान दें कि सभी नोटों में कोड में jQuery नहीं होगा)। मान लें कि हमारे पास एक एंकर (इनपुट फॉर्म) है, और जब यह फोकस प्राप्त करता है, तो इसके तहत पूर्वनिर्धारित मूल्यों की एक ड्रॉप-डाउन सूची दिखाई देती है। जब हम किसी सूची आइटम पर क्लिक करते हैं, तो हम एक मनमाने ढंग से कार्य करते हैं।



नमूना कोड https://github.com/mbykov/component-dropdown-example पर उपलब्ध है। इसे क्लोन करें और ब्राउज़र में फ़ाइल test/example.html खोलें, input पर क्लिक करें।



इस उदाहरण के कंकाल घटक बनाएँ:

 $ component create dropdown-example repo (username/project): mbykov/component-dropdown-example description: simple dropdown example . . . 

घटकों में। यदि आपको हमारे द्वारा आवश्यक घटकों को निर्दिष्ट करने की आवश्यकता है:

 "dependencies": { "component/domify": "*", "component/each": "*", "component/classes": "*" }, 

और कर $ make । Makefile आप देखेंगे, विशेष रूप से (नोट मेकफाइल बनाम ग्रंट में मेकफाइल प्रारूप के बारे में):

 build: components index.js dropdown.css @component build --dev components: component.json @component install --dev 

इसका मतलब यह है कि component सभी निर्भरताओं component स्थापित component build/build.js build/build.css . build/build.js build/build.css . build/build.js build/build.css । (मैंने मूल dd-example.css को dropdown.css में बदल दिया, और तदनुसार मेकफाइल को ठीक किया)।

उदाहरण निर्माण

अब एक उदाहरण बनाते हैं। हम test निर्देशिका और example.html फ़ाइल बनाते हैं, जिसमें सार है

  <p><input type="text" id="anchor"><p> <script> var anchor = document.querySelector('#anchor'); var Dropdown = require('dd-example'); var dd = new Dropdown(anchor); </script> 

और फ़ाइल index.js घटकों में हम मुख्य सामग्री जोड़ते हैं:

 var domify = require('domify'); var classes = require('classes'); var each = require('each'); module.exports = Dropdown; function Dropdown(anchor) { console.log(anchor); return this; } 

इसे return this करने के लिए ध्यान दें - यह महत्वपूर्ण है। अब हम अपने घटक के लिए तरीकों की एक श्रृंखला बना सकते हैं। प्रत्येक बाद की विधि को यही मिलता है।

अब फिर से करें, और परीक्षण पृष्ठ को फिर से लोड करें (जब तक हम घड़ी का उपयोग नहीं करते हैं, इसलिए मैन्युअल रूप से करें)। फेयरबाग में, हम देखते हैं कि सब कुछ वैसा ही चल रहा है जैसा हमें होना चाहिए, हम लंगर को देखते हैं।

आइए dropdown कंपोनेंट को ही लिखें।

 function Dropdown(anchor) { var _div = domify('<div class="dropdown-div"></div>'); var _list = domify('<ul class="dropdown-list"></ul>'); _div.appendChild(_list); this.list = _list; this.div = _div; this.anchor = anchor; anchor.parentNode.insertBefore(_div, anchor.nextSibling); anchor.focus(); return this; } 

यहां क्या हो रहा है?

हम दो ऑब्जेक्ट बनाते हैं, _list और _list । यह रेखांकित करने से कि मेरे लिए DOM ऑब्जेक्ट्स का चयन करना सुविधाजनक है (हमें अब अंडरस्कोर की आवश्यकता नहीं है, और $ साइन किसी तरह नहीं दिखता है, लेकिन यह स्वाद की बात है)। वास्तविक जीवन में, निश्चित रूप से, आपको टेम्पलेट.html में html डालने की आवश्यकता है, और इसे कॉल करने की require('template') । मैं स्पष्टता के लिए यहां कोड नहीं करता हूं।

इस पंक्तियों में यह this.list = _list इन ऑब्जेक्ट्स को इस ऑब्जेक्ट की विशेषताओं के रूप में सहेजते हैं, यह विधि श्रृंखला में उपयोगी है। और पेज पर एक नई ऑब्जेक्ट जोड़ें।

 $ make 

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

  var self = this; anchor.onclick = function(e){ self.toggle(); classes(this.div).remove('hidden'); return false; } 

और एक विधि बनाएं जो मूल्यों को दर्शाता है

 Dropdown.prototype.render = function(values) { var self = this; values.each(function(value){ var added = domify('<li class="dropdown-line"></li>'); added.textContent = value; self.list.appendChild(added); }); return this; } 

पूर्वनिर्धारित मानों के साथ render विधि में example.html कॉल जोड़ें: var values = [' '...

  dd.render(values) 

लाइन के बाद कोई अर्धविराम नहीं है। यह कोई त्रुटि नहीं है, अगली पंक्ति पर अगला घटक विधि कहा जाएगा - .select ()।

अब हम अपने घटक को अनियंत्रित कॉलबैक में सूची लाइन पर क्लिक करने पर मूल्य प्रदर्शित करेंगे (उदाहरण में कॉलबैक बस कंसोल होगा।)।

 Dropdown.prototype.select = function(cb){ var self = this; this.list.onclick = function(e) { var value = e.target.textContent; anchor.value = value; self.hide(); cb(value); }; } 

यहां हमें फ़ंक्शन के अंत में return this वापस करने की आवश्यकता नहीं है, क्योंकि यह श्रृंखला का अंत है। example.html । .select में .select विधि को कॉल करें, जिसमें हम कंसोल पर मान प्रदर्शित करते हैं। देखा।

निष्कर्ष

काफी पहले से ही अंतिम है, और उदाहरण से सीधे संबंधित नहीं है - सूची लंगर के नीचे नहीं, बल्कि लाइन की शुरुआत में प्रदर्शित की जाती है। लेकिन सुंदरता के लिए, आइए सूची को संरेखित करें - यह मुख्य कार्य में एक पंक्ति है:

  _div.style.left = getOffset(anchor).left +'px'; 

मैंने मैथ्यू मुलेरा से गेटऑफसेट फ़ंक्शन उधार लिया, उसके लिए धन्यवाद।

इस उदाहरण और मेरे "वयस्क" घटक के ड्रॉपडाउन का निर्माण करते समय, मैंने पुराने साथियों के उदाहरणों पर ध्यान केंद्रित किया: component/dropdown , stagas/dropdown , bmcmahen/dropdown , matthewmueller/autocomplete । सच है, वे सभी jQuery का उपयोग करते हैं, यही कारण है कि मैंने अपना mbykov/dropdown लिखा है - यह mbykov/dropdown से प्राप्त json डेटा के लिए डिज़ाइन किया गया है, इसलिए इसकी अपनी ख़ासियतें हैं।

अब आप इस ड्रॉप-डाउन सूची का उपयोग जितनी बार चाहें, किसी भी पूर्वनिर्धारित मूल्यों के साथ, एक पृष्ठ पर या कई पर कर सकते हैं।

जारी रखा जाए