गतिशील एचटीएमएल (DHTML) आपको अपनी वेबसाइटों पर एक एप्लिकेशन-शैली का अनुभव बनाने की अनुमति देता है, जिससे उस आवृत्ति को कम किया जा सकता है जिसमें पूरे पृष्ठों को पूरी तरह से लोड किया जाना है। अनुप्रयोगों में, जब आप किसी चीज़ पर क्लिक करते हैं, तो उस विशिष्ट सामग्री को दिखाने के लिए या आपको अपना उत्तर प्रदान करने के लिए एप्लिकेशन तुरंत बदल जाता है।
इसके विपरीत, वेब पेजों को आम तौर पर फिर से लोड करना पड़ता है, या एक पूरी तरह से नया पेज लोड करना पड़ता है। यह उपयोगकर्ता के अनुभव को और अधिक असंबद्ध बना सकता है। आपके ग्राहकों को पहले पृष्ठ के लोड होने की प्रतीक्षा करनी होगी और फिर दूसरे पृष्ठ के लोड होने की प्रतीक्षा करनी होगी, इत्यादि।
दर्शक अनुभव को बेहतर बनाने के लिए उपयोग करना
DHTML का उपयोग करना, इस अनुभव को बेहतर बनाने के सबसे आसान तरीकों में से एक है डिव अनुरोध किए जाने पर सामग्री प्रदर्शित करने के लिए तत्व चालू और बंद होते हैं। ए div तत्व आपके वेबपेज पर तार्किक विभाजन को परिभाषित करता है। एक डिव को एक बॉक्स के रूप में सोचें जिसमें पैराग्राफ, हेडिंग, लिंक, इमेज और यहां तक कि अन्य डिव भी हो सकते हैं।
आपको किस चीज़ की ज़रूरत पड़ेगी
एक div बनाने के लिए जिसे चालू और बंद किया जा सकता है, आपको निम्न की आवश्यकता है:
- क्लिक करने पर इसे चालू और बंद करके div को नियंत्रित करने के लिए एक लिंक।
- दिखाने और छिपाने के लिए div।
- सीएसएस div छुपा या दृश्यमान स्टाइल करने के लिए।
- कार्रवाई करने के लिए जावास्क्रिप्ट।
नियंत्रण लिंक
नियंत्रण कड़ी सबसे आसान हिस्सा है। बस एक लिंक बनाएं जैसे आप दूसरे पेज पर करेंगे। अभी के लिए, छोड़ दें href विशेषता खाली।
एचटीएमएल सीखें
इसे अपने वेबपेज पर कहीं भी रखें।
Div to Show and Hide
वह डिव एलिमेंट बनाएं जिसे आप दिखाना और छिपाना चाहते हैं। सुनिश्चित करें कि आपके div पर एक अद्वितीय आईडी है। उदाहरण में, अद्वितीय आईडी है एचटीएमएल सीखें.
यह सामग्री कॉलम है। इस स्पष्टीकरण पाठ को छोड़कर यह खाली शुरू होता है। चुनें कि आप बाईं ओर नेविगेशन कॉलम में क्या सीखना चाहते हैं। पाठ नीचे दिखाई देगा:
एचटीएमएल सीखें
- फ्री एचटीएमएल क्लास HTML
- एचटीएमएल ट्यूटोरियल
- एक्सएचटीएमएल क्या है?
div को दिखाने और छिपाने के लिए CSS CSS
अपने सीएसएस के लिए दो वर्ग बनाएं: एक div को छिपाने के लिए और दूसरा इसे दिखाने के लिए। इसके लिए आपके पास दो विकल्प हैं: डिस्प्ले और विजिबिलिटी।
प्रदर्शन पृष्ठ प्रवाह से div को हटा देता है, और दृश्यता बस इसे कैसे देखा जाता है इसे बदल देती है। कुछ कोडर पसंद करते हैं प्रदर्शन, लेकिन अ यदा यदा दृश्यता भी समझ में आता है। उदाहरण के लिए:
छिपा हुआ {प्रदर्शन: कोई नहीं; }
.अनहिडन {डिस्प्ले: ब्लॉक; }
यदि आप दृश्यता का उपयोग करना चाहते हैं, तो इन वर्गों को इसमें बदलें:
छिपा हुआ {दृश्यता: छिपा हुआ; }
.अनहिडन {दृश्यता: दृश्यमान; }
छिपी हुई कक्षा को अपने div में जोड़ें ताकि यह पृष्ठ पर छिपे हुए के रूप में शुरू हो:
इसे काम करने के लिए जावास्क्रिप्ट
यह सब स्क्रिप्ट आपके डिव पर सेट की गई वर्तमान क्लास को देखती है और अगर इसे हिडन या इसके विपरीत के रूप में चिह्नित किया गया है तो इसे अनहाइड करने के लिए टॉगल करता है।
यह जावास्क्रिप्ट की केवल कुछ पंक्तियाँ हैं। निम्नलिखित को अपने सिर में रखें एचटीएमएल दस्तावेज़ (से पहले।
यह स्क्रिप्ट क्या करती है, लाइन दर लाइन:
फ़ंक्शन को कॉल करता है प्रकट करें, तथा डिवीड सटीक अद्वितीय आईडी है जिसे आप दिखाना या छिपाना चाहते हैं।
एक चर सेट करता है iमंदिर अपने div के मूल्य के साथ।
एक साधारण ब्राउज़र जांच करता है; यदि ब्राउज़र समर्थन नहीं करता है getElementById, यह स्क्रिप्ट काम नहीं करेगी।
Div पर कक्षा की जाँच करता है। अगर यह है छिपा हुआ, यह इसे बदल देता है छिपे नहीं. अन्यथा, यह इसे बदल देता है छिपा हुआ.
बंद करता है अगर बयान।
फ़ंक्शन को बंद कर देता है।
स्क्रिप्ट काम करने के लिए, आपको एक और काम करने की ज़रूरत है। अपने लिंक पर वापस जाएं और जावास्क्रिप्ट को href विशेषता में जोड़ें। इस href में ठीक उसी विशिष्ट आईडी का उपयोग करना सुनिश्चित करें जिसे आपने अपना div नाम दिया है:
एचटीएमएल सीखें
बधाई हो! अब आपके पास एक div है जो जब भी आप किसी लिंक पर क्लिक करेंगे तो दिखाएगा और छिपाएगा।
देखने के लिए संभावित समस्याएं
यह स्क्रिप्ट मूर्खतापूर्ण नहीं है। ऐसी कुछ स्थितियाँ हैं जिनमें यह आपके लिए समस्याएँ पैदा कर सकता है:
जावास्क्रिप्ट चालू नहीं है। यदि आपके पाठकों के पास जावास्क्रिप्ट नहीं है या यह बंद है, तो यह स्क्रिप्ट काम नहीं करेगी। छिपे हुए डिव छिपे रहते हैं, चाहे आपके पाठक कुछ भी करें। इसे ठीक करने का एक तरीका है छिपे हुए divs को एक नोस्क्रिप्ट क्षेत्र में रखना, लेकिन उन्हें सही ढंग से प्रदर्शित करने के लिए आपको इसके साथ खेलना होगा।
बहुत अधिक सामग्री। यह आपके पाठकों को केवल उनकी आवश्यक सामग्री को देखने की अनुमति देने के लिए एक अच्छा टूल हो सकता है, लेकिन यदि आप छिपे हुए divs के अंदर बहुत अधिक डालते हैं, तो यह पृष्ठ के लोड होने के तरीके को काफी प्रभावित कर सकता है। याद रखें कि भले ही सामग्री प्रदर्शित नहीं हो रही है, वेब ब्राउज़र अभी भी इसे डाउनलोड कर रहा है, इसलिए आप कितनी सामग्री छिपाते हैं, इस बारे में अच्छी समझ का उपयोग करें।
ग्राहक नहीं समझते। अंत में, ग्राहक सामग्री को दिखाने या छिपाने वाले लिंक पर क्लिक करने के आदी नहीं हो सकते हैं। आपके ग्राहकों के साथ क्या होगा, यह समझाने के लिए आइकन (साथ ही चिह्न और तीर अच्छी तरह से काम करते हैं) या टेक्स्ट के साथ खेलें। एक अन्य उपाय यह है कि एक डिव को खुला छोड़ दें जबकि अन्य बंद हैं। यह आपके ग्राहकों को विचार बता सकता है, ताकि वे अधिक तेज़ी से यह पता लगा सकें कि शेष सामग्री को कैसे खोला जाए।
आपको हमेशा अपने ग्राहकों के साथ इस तरह से डायनामिक HTML का परीक्षण करना चाहिए। एक बार जब आप आश्वस्त हो जाते हैं कि वे इसे समझ सकते हैं और इसका उपयोग कर सकते हैं, तो यह आपके वेबपृष्ठों पर बहुत अधिक दृश्य स्थान लिए बिना बड़ी मात्रा में सामग्री प्राप्त करने का एक शानदार तरीका हो सकता है।