चयन2

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

सेलेक्ट२ एक प्रो फील्ड है फ्री प्लगइन में एक सीमित विजेट बिल्डर शामिल है, और फ़ील्ड का पूरा सेट इसके साथ आता है मास्टर एडॉन्स प्रो.

सेलेक्ट२ फ़ील्ड क्या करता है #

• यह एलिमेंटर में आपके विजेट के पैनल में एक खोज बॉक्स के साथ एक ड्रॉपडाउन जोड़ता है।
• शो मल्टीपल ऑफ के साथ, संपादक एक विकल्प चुनता है और आपके टेम्पलेट को उस विकल्प की कुंजी मिलती है।
• शो मल्टीपल ऑन के साथ, संपादक किसी भी संख्या में विकल्प चुनता है, जिसे हटाने योग्य टैग के रूप में दिखाया जाता है, और आपके टेम्पलेट को उन कुंजियों की एक सूची मिलती है जिन्हें आप प्रिंट करते हैं {% for %} लूप।
• प्रत्येक विकल्प में एक कुंजी और एक लेबल होता है संपादकों को लेबल दिखाई देते हैं, और आपका एचटीएमएल हमेशा कुंजी प्राप्त करता है।

यदि आपने अभी तक विजेट नहीं बनाया है, तो पढ़ें विजेट बिल्डर अवलोकन पहला। खोज के बिना एक छोटी एकल-विकल्प सूची के लिए, सादा फ़ील्ड चुनें सरल है।

इससे पहले कि आप शुरू करें #

• एलिमेंटर स्थापित और सक्रिय के साथ वर्डप्रेस।
• एलिमेंटर और मास्टर एडॉन्स प्रो के लिए मास्टर एडॉन्स, दोनों सक्रिय हैं स्थापना गाइड सेटअप को कवर करता है।
• विजेट बिल्डर में एक विजेट खुला इस गाइड में उदाहरण एक है “पोर्टफोलियो कार्ड” विजेट प्रोजेक्ट शीर्षक के लिए एक टेक्स्ट फ़ील्ड और दो सेलेक्ट२ फ़ील्ड के साथ: प्रोजेक्ट प्रकार (एक विकल्प) और प्रोजेक्ट टैग (कई विकल्प)।

सेलेक्ट२ फ़ील्ड कैसे जोड़ें #

1. को जा मास्टर ऐडऑन > विजेट बिल्डर और अपना विजेट खोलें।
2. पर सामग्री टैब, यदि अभी तक कोई अनुभाग नहीं है तो एक अनुभाग जोड़ें।
3. प्रकार select बाईं ओर फ़ील्ड खोज बॉक्स में चुनें और चयन करें२ ऊपर आते हैं।
4. खींचना चयन2 अनुभाग में इसकी सेटिंग्स बाएं साइडबार में खुलती हैं।

एक नया Select2 फ़ील्ड शो मल्टीपल ऑन और तीन नमूना विकल्पों (से शुरू होता है) के साथ शुरू होता हैvalue-1 को value-3)। टेम्प्लेट लिखने से पहले उन्हें अपने से बदलें।

2 फ़ील्ड विकल्प चुनें समझाया गया #

यहां प्रोजेक्ट टाइप फ़ील्ड है, जो एकल विकल्प के लिए सेट किया गया हैः

• लेबल एलिमेंटर में नियंत्रण के बगल में पाठ है, उदाहरण के लिए “प्रोजेक्ट टाइप”।
• नाम क्षेत्र की विशिष्ट आईडी है (केवल अक्षर, संख्या और अंडरस्कोर) यह भी टोकन है जिसे आप टेम्पलेट में उपयोग करते हैं, इसलिए project_type बन जाता है {{project_type}}.
• विवरण एलिमेंट में नियंत्रण में दिखाई देता है इसका उपयोग एक छोटे संकेत के लिए करें जैसे कि “एक श्रेणी चुनें।”
• एकाधिक दिखाएँ? एक पिक (नहीं) और कई पिक्स (हां) के बीच स्विच यह आपके टेम्पलेट को प्राप्त करने में परिवर्तन करता है, इसलिए एचटीएमएल लिखने से पहले तय करें।
• विकल्प विकल्पों की सूची है बाएं बॉक्स वह कुंजी है जो आपके टेम्पलेट को मिलती है (branding, web)। सही बॉक्स लेबल संपादकों को देखना है (ब्रांडिंग, वेब डिज़ाइन) एक पंक्ति जोड़ने के लिए प्लस आइकन का उपयोग करें और एक को हटाने के लिए लाल क्रॉस का उपयोग करें।
• डिफ़ॉल्ट मान क्या विजेट को पहली बार किसी पृष्ठ में जोड़ने पर चुना जाता है एकल मोड में यह एक सामान्य ड्रॉपडाउन है यदि आप इसे खाली छोड़ देते हैं, तो पहला विकल्प चुना जाता है।

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

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

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

अपने टेम्पलेट में सेलेक्ट२ मानों का उपयोग करें #

आप मूल्य कैसे प्रिंट करते हैं यह शो मल्टीपल पर निर्भर करता है।

एकल मोड: कुंजी प्रिंट करें #

एक एकल चयन२ किसी भी अन्य टोकन की तरह काम करता है। {{project_type}} चयनित कुंजी प्रिंट करता है, ताकि आप इसे पाठ के रूप में उपयोग कर सकें या इससे सीएसएस वर्ग बना सकेंः

<article class="portfolio-card type-{{project_type}}">
  <span class="card-type">{{project_type}}</span>

ब्रांडिंग चयनित होने पर, वह प्रस्तुत होता है type-branding और branding॰ आप इसकी तुलना भी कर सकते हैंः {% if project_type == 'web' %}...{% endif %}.

एकाधिक मोड: कुंजियों पर लूप #

एक एकाधिक चयन2 एक सूची रखता है, और {{project_tags}} अपने आप पर कुछ भी नहीं प्रिंट करता है इसके बजाय लूपः

<ul class="card-tags">
  {% for tag in project_tags %}
    <li class="card-tag">{{ tag }}</li>
  {% endfor %}
</ul>

लूप प्रत्येक चुने गए विकल्प के लिए एक बार चलता है, जिस क्रम में संपादक ने उन्हें चुना है इसके अंदर, {{ tag }} एक कुंजी है, और फ़िल्टर जैसे {{ tag|upper }} काम भी। द ट्विग सिंटैक्स गाइड टेम्प्लेट इंजन द्वारा समर्थित सभी चीज़ों को सूचीबद्ध करता है।

कोड संपादक के बगल में दस्तावेज़ीकरण पैनल प्रत्येक फ़ील्ड के लिए एक टोकन सूचीबद्ध करता है। नकल करना {{project_tags}} वहां से एकल फ़ील्ड के लिए ठीक है, लेकिन एकाधिक फ़ील्ड को अभी भी लूप की आवश्यकता है।

क्लिक करें सेटिंग्स सहेजें जब टेम्पलेट हो जाता है।

एलिमेंट में सेलेक्ट2 नियंत्रण का उपयोग करें #

विजेट को किसी पृष्ठ पर जोड़ें, या यदि पृष्ठ पहले से ही खुला था तो संपादक को पुनः लोड करें दोनों सेलेक्ट2 नियंत्रण सामग्री टैब पर दिखाई देते हैं और उनके डिफ़ॉल्ट पहले से ही चयनित हैं।

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

एकल नियंत्रण अपने स्वयं के खोज बॉक्स के साथ एक ड्रॉपडाउन खोलता है एक विकल्प चुनें, या इसे साफ़ करने के लिए वर्तमान मूल्य के बगल में क्रॉस का उपयोग करें।

कैनवास सीधे अपडेट करता है ध्यान दें कि पैनल लेबल दिखाता है (वेब डिजाइन, सोशल मीडिया) जबकि कार्ड प्रिंट कुंजी (web, social):

यदि आपको पृष्ठ पर लेबल टेक्स्ट की आवश्यकता है, तो या तो कुंजी को प्रदर्शित करने के लिए पर्याप्त पठनीय बनाएं, या इसे टेम्पलेट में मैप करेंः

{% for tag in project_tags %}
  <li class="card-tag">{% if tag == 'social' %}Social Media{% else %}{{ tag }}{% endif %}</li>
{% endfor %}

सामान्य उपयोग के मामले #

• पोर्टफोलियो, केस स्टडी और टीम कार्ड पर टैग या सेवाएँ।
• एक श्रेणी या शैली पिकर जो सीएसएस वर्ग जोड़ता है, जैसे type-web.
• देशों, उद्योगों या आइकन सेट जैसी लंबी सूचियाँ, जहाँ खोज स्क्रॉलिंग को सहेजती है।
• मूल्य निर्धारण या उत्पाद कार्ड पर फ़ीचर सूचियाँ, सूची आइटम में लूप की गईं।

सेलेक्ट२ फील्ड के साथ काम करने के लिए टिप्स #

• पहले एकाधिक दिखाएँ पर निर्णय लें बाद में इसे स्विच करने का मतलब है बदलना {{field}} एक लूप के लिए, या दूसरी तरफ गोल।
• बिना किसी रिक्त स्थान के लोअरकेस में कुंजियाँ लिखें (social, web)। वे कक्षा के नामों और तुलनाओं में समाप्त होते हैं।
• विजेट के उपयोग में होने के बाद कुंजियों का नाम न बदलें जिन पृष्ठों ने पहले से ही पुरानी कुंजी को सहेजा है, वे नए से मेल नहीं खाएंगे।
• उदाहरण के लिए, कुंजी के साथ आउटपुट को स्टाइल करें .type-web .card-type { ... }.
• ड्रॉपडाउन के बजाय मुट्ठी भर आइकन बटन के लिए, इसका उपयोग करें फ़ील्ड चुनें.

अक्सर पूछे जाने वाले प्रश्न #

लपेटकर #

सेलेक्ट२ फ़ील्ड जोड़ें, अपनी कुंजियाँ और लेबल सेट करें, और एचटीएमएल लिखने से पहले एक पिक और कई के बीच चयन करें के साथ एक एकल मान प्रिंट करें {{field_name}} और एक से अधिक पर लूप करें {% for %}। विकल्पों की सूची के बजाय फ़ील्ड के समूहों को दोहराने के लिए, देखें पुनरावर्तक क्षेत्र, और जाँच करें मूल्य निर्धारण प्रत्येक योजना में क्या शामिल है।