द 2 फ़ील्ड चुनें सादा चयन का बड़ा भाई-बहन है: एक ड्रॉपडाउन जिसे आप टाइप कर सकते हैं, एक वैकल्पिक एकाधिक मोड के साथ जो उपयोगकर्ता को एक साथ कई विकल्प चुनने देता है मास्टर एडॉन्स के अंदर विजेट बिल्डर, यह उन मामलों को कवर करता है जो एक देशी ड्रॉपडाउन बुरी तरह से संभालता है लंबे विकल्प सूचियों को खोज की आवश्यकता है टैग-शैली चुनता है जहां एक उत्तर पर्याप्त नहीं है।
नियमित चयन की तरह, Select2 विकल्प मान सीधे प्लग इन हो जाते हैं शर्तों अन्य नियंत्रणों को दिखाने या छिपाने के लिए, और में ट्विग-सिंटैक्स टेम्पलेट इंजन लिए {% if %} आपके मार्कअप में चेक दोनों गाइड सेटअप और सीमाओं को कवर करते हैं।
एकल-चयन मोड बिल्कुल वैसा ही व्यवहार करता है फ़ील्ड चुनेंः आपका टेम्पलेट एक कुंजी प्राप्त करता है एकाधिक पर फ्लिप और मूल्य कुंजी की एक सरणी बन जाता है, जो आपके टेम्पलेट को इसे पढ़ने के तरीके को बदलता है वह स्विच इस डॉक का दिल है।
सेलेक्ट२ फ़ील्ड क्या करता है #
- खोजने योग्य ड्रॉपडाउन प्रदान करता है एलिमेंटर पैनल में; उपयोगकर्ता विकल्प सूची को फ़िल्टर करने के लिए टाइप करता है।
- एक कुंजी रखती है एकल मोड में आपके परिभाषित विकल्पों में से, सादे चयन के समान अनुबंध।
- कुंजियों की एक सरणी रखता है जब एकाधिक विकल्प चालू होता है, तो नियंत्रण में हटाने योग्य टैग के रूप में दिखाया जाता है।
- टोकन या लूप के माध्यम से टेम्प्लेट फ़ीड करता है, उस मोड के आधार पर।
- कुंजी और लेबल जोड़े का उपयोग करता है आप परिभाषित करते हैं, इसलिए टेम्प्लेट हमेशा स्थिर स्लग के साथ काम करते हैं।
यदि आप विजेट बनाने में नए हैं, तो शुरुआत करें विजेट बिल्डर अवलोकन पहले।
इससे पहले कि आप शुरू करें #
- वर्डप्रेस साथ तत्व स्थापित और सक्रिय।
- एलिमेंट के लिए मास्टर ऐडऑन स्थापित और सक्रिय प्लगइन के लिए नया? देखना स्थापना गाइड.
- विजेट बिल्डर संपादक में एक कस्टम विजेट खुला हमारा उदाहरण एक पोर्टफोलियो कार्ड विजेट है जहां संपादक प्रत्येक उदाहरण को एक या अधिक श्रेणियों के साथ टैग करते हैं: ब्रांडिंग, वेब, प्रिंट, मोशन।
सेलेक्ट२ फ़ील्ड कैसे जोड़ें #
ढूंढना चयन2 विजेट बिल्डर संपादक के बाईं ओर फ़ील्ड पैनल में यह अन्य पसंद क्षेत्रों के साथ बैठता है।
इसे नीचे एक अनुभाग में खींचें सामग्री टैब एक बार जब यह भूमि, क्षेत्र के विकल्प बाईं ओर खुलते हैं, और पहला निर्णय यह है कि क्या यह नियंत्रण एक मूल्य या कई चुनता है टेम्पलेट को छूने से पहले इसे व्यवस्थित करें, क्योंकि दो मोड अलग-अलग मार्कअप चाहते हैं।
2 फ़ील्ड विकल्प चुनें समझाया गया #
- लेबलः एलिमेंटर में नियंत्रण के बगल में दिखाया गया पाठ, उदाहरण के लिए “श्रेणी”।
- नाम: उदाहरण के लिए, केवल फ़ील्ड, अक्षरों, संख्याओं और अंडरस्कोर के लिए विशिष्ट पहचानकर्ता
selected_tags. - विकल्प: कुंजी और लेबल जोड़े के रूप में विकल्प कुंजी स्लग हैं जो आपके टेम्पलेट को देखता है (
branding,web); लेबल ड्रॉपडाउन में शब्द हैं। - एकाधिक: मोड स्विच बंद, उपयोगकर्ता एक विकल्प चुनता है पर, नियंत्रण कई पिक्स स्वीकार करता है और मूल्य कुंजी की एक सरणी बन जाता है।
- डिफ़ॉल्टः जब विजेट पहली बार किसी पृष्ठ पर गिरता है तो कुंजी या कुंजियाँ चुनी जाती हैं।
- विवरण, लेबल दिखाएँ, विभाजकः मानक प्रदर्शन सेटिंग्स, साथ ही फ़ील्ड दिखाने के लिए नीचे की शर्तें केवल तभी जब किसी अन्य नियंत्रण का एक निश्चित मान हो।
अपने टेम्पलेट के लिए चयन २ कनेक्ट करें #
एकल मोड में, इसे बिल्कुल एक चयन की तरह व्यवहार करें टोकन चुने हुए कुंजी को प्रिंट करता है, इसलिए संशोधक वर्ग और तुलना हमेशा की तरह काम करते हैंः
<article class="portfolio-card cat--{{ selected_tags }}">
{% if selected_tags == 'motion' %} <span class="badge">Video</span> {% endif %}एकाधिक मोड में, मान एक है कुंजियों की सरणी, और एक मैदान {{ selected_tags }} प्रिंट कुछ भी उपयोगी नहीं है टेम्पलेट को लूप करना हैः
<div class="card-tags">
{% for tag in selected_tags %}
<span class="tag tag--{{ tag }}">{{ tag }}</span>
{% endfor %}
</div>selected_tagsक्षेत्र का नाम है।tagक्या आप एक लूप वैरिएबल का आविष्कार करते हैं; इसे कुछ भी कहें।- के बीच का ब्लॉक
{% for %}और{% endfor %}प्रति चुनी गई कुंजी को उसी क्रम में एक बार प्रिंट करें, जिस क्रम में उन्हें चुना गया था।
मोड बेमेल के लिए बाहर देखो एक नंगे टोकन के साथ लिखा गया एक टेम्पलेट आपके द्वारा एकाधिक सक्षम करने के बाद “वर्किंग” रखता है; यह सिर्फ एक खाली स्थान प्रस्तुत करता है, कोई त्रुटि नहीं, कंसोल में कुछ भी नहीं यदि एक सेलेक्ट२ मान गायब हो जाता है, तो जांचें कि क्या एकाधिक चालू है और टेम्पलेट अभी भी एक कुंजी की अपेक्षा करता है कि बेमेल कारण अधिक बार नहीं है।
एलिमेंट में सेलेक्ट2 नियंत्रण का उपयोग करें #
एलिमेंटर में एक पृष्ठ पर अपना कस्टम विजेट जोड़ें, संपादक को फिर से लोड करना यदि पृष्ठ पहले से ही खुला था नियंत्रण एक खोज बॉक्स के साथ ड्रॉपडाउन के रूप में प्रस्तुत करता है टाइप करना शुरू करें और सूची फ़िल्टर जैसे ही आप जाते हैं।
मल्टीपल ऑन के साथ, प्रत्येक पिक नियंत्रण के अंदर एक छोटा टैग बन जाता है, जिसे उसके x से हटाया जा सकता है। प्रत्येक ऐड या रिमूव लूप को फिर से प्रस्तुत करता है, इसलिए कार्ड पर बैज वास्तविक समय में नियंत्रण को ट्रैक करते हैं।
सामान्य उपयोग के मामले #
- श्रेणी और टैग पिकर कि कार्ड और पोर्टफोलियो आइटम पर बैज पंक्तियों प्रस्तुत।
- लंबी विकल्प सूचियाँ जैसे देश, उद्योग, या फ़ॉन्ट-युग्मन विकल्प जहां खोज स्क्रॉलिंग से बेहतर है।
- फ़ीचर जाँच सूची जहां प्रत्येक चुनी गई कुंजी मूल्य निर्धारण कॉलम में एक पंक्ति प्रिंट करती है।
- फ़िल्टर-बार विजेट जिनकी चुनी गई कुंजियाँ JS फ़िल्टर स्क्रिप्ट के लिए डेटा विशेषताएँ बन जाती हैं।
- सामाजिक प्रोफ़ाइल चयनकर्ता जहां प्रत्येक कुंजी एक आइकन पर मैप करती है और लूप में लिंक करती है।
सेलेक्ट२ फील्ड के साथ काम करने के लिए टिप्स #
- टेम्पलेट लिखने से पहले मोड तय करें। एकल मोड एक टोकन चाहता है, एकाधिक मोड एक लूप चाहता है; वे विनिमेय नहीं हैं।
- कभी भी एकाधिक मान सीधे प्रिंट न करें।
{{ selected_tags }}किसी सरणी पर कुछ भी उपयोगी नहीं मिलता; केवल{% for %}लूप चाबियों तक पहुंचता है। - चाबियाँ स्लग रहती हैं, लेबल शब्द रहते हैं। लूप कुंजियाँ प्रिंट करता है, इसलिए यदि बैज टेक्स्ट मानव-अनुकूल होना चाहिए, तो या तो कुंजियों को प्रस्तुत करने योग्य बनाएं या उन्हें मैप करें
{% if %}लूप के अंदर ब्लॉक। - एक खाली बहु-चयन लूप शून्य बार। रैपर डिव अभी भी प्रस्तुत करता है, इसलिए इसे लपेटें
{% if selected_tags %}जब एक खाली पिक को पीछे कोई मार्कअप नहीं छोड़ना चाहिए। - छोटी सूचियों के लिए सादे चयन का उपयोग करें। तीन या चार निश्चित वेरिएंट को खोज की आवश्यकता नहीं है; सेलेक्ट2 लंबी सूचियों और मल्टी-पिक्स में अपना स्थान अर्जित करता है।
अक्सर पूछे जाने वाले प्रश्न #
मास्टर ऐडऑन विजेट बिल्डर में सेलेक्ट2 फ़ील्ड क्या है?
सेलेक्ट२ फ़ील्ड एक कस्टम एलिमेंटर विजेट में एक खोज योग्य ड्रॉपडाउन जोड़ता है, एक वैकल्पिक एकाधिक मोड के साथ एकल मोड में आपका टेम्पलेट एक विकल्प कुंजी प्राप्त करता है, जैसे एक सादा चयन एकाधिक मोड में यह कुंजी की एक सरणी प्राप्त करता है, जिसे आप एक के साथ प्रिंट करते हैं {% for %} लूप।
मैं एकाधिक चयनित मान कैसे प्रदर्शित करूं?
क्षेत्र को लूप करेंः {% for tag in selected_tags %}<span>{{ tag }}</span>{% endfor %}, कहाँ selected_tags क्षेत्र का नाम है ब्लॉक प्रति चुने गए कुंजी एक बार प्रस्तुत करता है एक प्रत्यक्ष {{ selected_tags }} सरणी पर काम नहीं करता है।
मेरा चयन २ टेम्पलेट में कुछ भी प्रिंट क्यों नहीं करता है?
लगभग हमेशा क्योंकि एकाधिक चालू है और टेम्पलेट अभी भी एक नंगे टोकन का उपयोग करता है एक सरणी सीधे मुद्रित कोई उपयोगी आउटपुट नहीं देता है टेम्पलेट को एक पर स्विच करें {% for %} लूप, या एकाधिक बंद करें यदि एक पिक आपको बस चाहिए।
क्या टेम्पलेट को लेबल या कुंजी मिलती है?
कुंजी। यदि विकल्प web लेबल “Web Design” रखता है, लूप वेरिएबल रखता है web। तुलना और वर्ग नामों में कुंजी का उपयोग होना चाहिए, और किसी भी अनुकूल प्रदर्शन पाठ को कुंजी से या सशर्त मैपिंग से आना चाहिए।
मुझे चयन के बजाय चयन २ का उपयोग कब करना चाहिए?
चयन २ का उपयोग करें जब विकल्प सूची काफी लंबी है कि खोज में मदद मिलती है, या जब उपयोगकर्ता को एक से अधिक विकल्प चुनना चाहिए एक छोटी एकल-पसंद सूची के लिए, सादा फ़ील्ड चुनें एक ही काम एक सरल नियंत्रण के साथ करता है।
क्या मैं जो चुना गया है उसे सीमित या पूर्व निर्धारित कर सकता हूँ?
डिफ़ॉल्ट विकल्प प्रारंभिक चयन को पूर्व निर्धारित करता है, एकल मोड में एक कुंजी विकल्प सूची ही सीमा है: उपयोगकर्ता केवल आपके द्वारा परिभाषित कुंजियों में से चुन सकते हैं, इसलिए उस सूची को क्यूरेट करना यह है कि आप आउटपुट को अनुमानित कैसे रखते हैं।
लपेटकर #
विजेट बिल्डर सेलेक्ट२ फ़ील्ड दो नौकरियों को कवर करता है जो एक देशी ड्रॉपडाउन नहीं कर सकता है: लंबी सूचियों की खोज करना और एक साथ कई मूल्यों को चुनना अपने सिर में एकल-मोड अनुबंध रखें, एक टोकन के माध्यम से एक कुंजी, और एक पर स्विच करें {% for %} जिस क्षण एकाधिक चलता है उसे लूप करें ड्रॉपडाउन के बजाय आइकन-बटन विकल्पों के लिए, देखें फ़ील्ड चुनें. बाकी का अन्वेषण करें मास्टर ऐडऑन विजेट और एक्सटेंशन, और देखें मूल्य निर्धारण पृष्ठ प्रत्येक योजना में क्या शामिल है।
