सादे HTML, CSS और JavaScript का उपयोग करके एक विस्तारित खोज बार बनाना सीखें।
इंटरएक्टिव जीयूआई तत्व आपके एप्लिकेशन को उपयोग में आसान बनाते हैं। HTML में डिफ़ॉल्ट रूप से कई फॉर्म घटक शामिल होते हैं, लेकिन आप CSS का उपयोग करना चाहेंगे ताकि वे आपके डिज़ाइन में फिट हों। आप उनके व्यवहार को बढ़ाने या संशोधित करने के लिए जावास्क्रिप्ट का भी उपयोग कर सकते हैं।
आप टेलविंड जैसी लाइब्रेरी का उपयोग करके ऐसे घटक बना सकते हैं, लेकिन यह जानना उपयोगी है कि उन्हें स्क्रैच से कैसे बनाया जाए।
HTML, CSS और JavaScript का उपयोग करके एक छिपी हुई खोज बार बनाने का तरीका जानें।
HTML के साथ सामग्री संरचना बनाएँ
यहाँ सुविधा के लिए HTML कोड दिया गया है। आपके पास एक मूल तत्व होगा जिसमें एक इनपुट और एक बटन तत्व होगा। आप खोज आइकन के लिए फ़ॉन्ट-भयानक स्क्रिप्ट भी आयात करेंगे। इस स्थिति में, आप आवर्धक लेंस खोज चिह्न का उपयोग करेंगे।
एचटीएमएल>
<एचटीएमएललैंग="एन"><सिर>
<मेटाcharset="यूटीएफ-8" />
<मेटाHTTP-समतुल्य="एक्स-यूए-संगत"संतुष्ट="आईई = किनारा" />
<मेटानाम="व्यूपोर्ट"संतुष्ट="चौड़ाई = उपकरण-चौड़ाई, प्रारंभिक-पैमाना = 1.0" />
<लिखी हुई कहानीस्रोत=" https://kit.fontawesome.com/d69fb28507.js"crossorigin="अनाम">लिखी हुई कहानी>
<शीर्षक>हिडन सर्च बारशीर्षक>
सिर><शरीर>
<डिवकक्षा="माता-पिता">
<इनपुटकक्षा="इनपुट"प्रकार="प्रकार"प्लेसहोल्डर="खोज..." /><बटनकक्षा="बीटीएन">
<मैंकक्षा="एफए-सॉलिड एफए-मैग्नीफाइंग-ग्लास">मैं>
बटन>
डिव>
शरीर>
एचटीएमएल>
CSS का उपयोग करके इंटरफ़ेस को स्टाइल करें
सीएसएस फ़ाइल में, आपको मूल तत्व को रिश्तेदार की स्थिति देने की आवश्यकता है। एक सापेक्ष स्थिति इनपुट और बटन तत्वों को माता-पिता के चारों ओर घूमने की अनुमति देती है। सीएसएस स्थिति संपत्ति कई प्रकार के लेआउट को नियंत्रित करता है, इसलिए इसे समझना महत्वपूर्ण है।
आप बेहतर दृश्यता के लिए दोनों तत्वों को केंद्र में भी संरेखित करेंगे। लेकिन अपने आवेदन पर, आप जब चाहें खोज बार चुन सकते हैं। इसके अलावा, दोनों तत्वों को समान चौड़ाई दें ताकि वे एक ही आकार के दिखें और एक दूसरे से बड़ा न हो।
फिर आपको माता-पिता को इनपुट और बटन तत्वों दोनों के लिए एक सक्रिय कक्षा देनी होगी। इस तरह, जब भी तत्व चलता है, यह निर्दिष्ट रूप में रूपांतरित हो जाएगा।
* {
अंतर: 0;
गद्दी: 0;
बॉक्स आकार: सीमा बॉक्स;
}शरीर {
पृष्ठभूमि का रंग: #d9d9d9;
ऊंचाई: 100वीएच;
दिखाना: मोड़ना;
संरेखित-आइटम: केंद्र;
औचित्य-सामग्री: केंद्र;
}माता-पिता {
पद: रिश्तेदार;
}इनपुट {
खाका: कोई नहीं;
सीमा: कोई नहीं;
बॉर्डर-त्रिज्या: 100पिक्सल;
गद्दी: 5पिक्सल 10पिक्सल;
चौड़ाई: 40पिक्सल;
संक्रमण: चौड़ाई 0.3sआराम;
}इनपुट:: प्लेसहोल्डर {
रंग: हरा;
}माता-पिता।सक्रियइनपुट {
चौड़ाई: 200पिक्सल;
}.बीटीएन {
चौड़ाई: 40पिक्सल;
गद्दी: 5पिक्सल 10पिक्सल;
कर्सर: सूचक;
बॉर्डर-त्रिज्या: 100पिक्सल;
सीमा: कोई नहीं;
पृष्ठभूमि: हरा;
दिखाना: इन - लाइन;
डब्बे की छाया: 0 0 5पिक्सलrgba(0, 0, 0, 0.2);
पद: शुद्ध;
ऊपर: 0;
बाएं: 0;
संक्रमण: परिवर्तन 0.3sआराम;
}माता-पिता।सक्रिय.बीटीएन {
परिवर्तन: translateX(210पिक्सल);
}
.एफए-ठोस {
रंग: #fffff;
}
आपके पास ऐसा दिखने वाला एक खोज बटन होना चाहिए:
जावास्क्रिप्ट कार्यक्षमता जोड़ें
अगला, तत्वों के लिए जावास्क्रिप्ट कोड लिखें। सबसे पहले, जावास्क्रिप्ट का उपयोग करके पैरेंट, इनपुट और बटन तत्वों का चयन करें क्वेरी चयनकर्ता () तरीका।
फिर, बटन पर क्लिक ईवेंट श्रोता जोड़ें। तो जब क्लिक किया जाता है, बटन चयनित वर्ग के अनुसार टॉगल करता है। जोड़ें केंद्र() विधि निर्दिष्ट तत्व पर ध्यान केंद्रित करने के लिए। जब भी सर्च बार का विस्तार होता है तो यह ब्लिंक करना शुरू कर देता है।
होने देना इनपुट = दस्तावेज़क्वेरी चयनकर्ता (".इनपुट");
होने देना बीटीएन = दस्तावेज़क्वेरी चयनकर्ता (".बीटीएन");
होने देना अभिभावक = दस्तावेज़क्वेरी चयनकर्ता ("माता-पिता");btn.addEventListener("क्लिक करें", () => {
माता-पिता.वर्गसूची.टॉगल ("सक्रिय");
इनपुट.फोकस ();
});
यदि आप बटन पर क्लिक करते हैं, तो यह खोज बार खोलता है और इसके विपरीत। यह निम्न आरेख में दिखाए गए अनुसार दिखाई देता है:
अब, यदि आप जानकारी टाइप करते हैं और बटन पर क्लिक करते हैं तो यह बंद हो जाता है क्योंकि सिस्टम जानकारी खोजता है।
अच्छा, है ना? आप इस कोड को देख सकते हैं और सर्च बार को चालू रखकर खेल सकते हैं codepen.io। आप एक बनाकर खोज बार को और अधिक अनुकूलित कर सकते हैं खोज बार सूची वस्तुओं का। इससे आपके उपयोगकर्ताओं के लिए ऐप पर खोज करना आसान हो जाता है।
अन्य सुविधाएँ जिन्हें आप बना सकते हैं
वेब विकास में एक शुरुआत के रूप में, आप HTML, CSS और जावास्क्रिप्ट के साथ कई सुविधाएँ बना सकते हैं। आप एक पॉपअप/मोडल विंडो, एक छवि स्लाइडर, एक फुटर ऑटो-अपडेटर, और बहुत कुछ बना सकते हैं।
प्रोग्रामिंग अवधारणाओं को सीखने के लिए ऐसी रचनात्मक परियोजनाएँ महान हैं। जैसे-जैसे आप कौशल सीखते हैं आप उन्हें लागू करने लगते हैं जिससे कौशल की उपयोगिता बढ़ जाती है। साथ ही, आपको शानदार उपयोगकर्ता इंटरफ़ेस बनाने का मौका मिलता है जिसका आप और आपके उपयोगकर्ता आनंद लेंगे। अपनी साइट के लिए एक छिपा हुआ खोज बार और अन्य इंटरएक्टिव सुविधाएँ बनाने के लिए इस मार्गदर्शिका का उपयोग करें।
