स्पॉइलर साइट के लिए एक सुविधाजनक उपकरण है। यह विभिन्न मंचों और ब्लॉगों में व्यापक रूप से उपयोग किया जाता है, जिससे उपयोगकर्ता को एक बटन प्रेस के समय एक विशिष्ट तत्व को छिपाने की अनुमति मिलती है। इसके अलावा, स्पॉइलर साइट पर अच्छा दिखता है और उन हिस्सों को छिपाने में मदद करता है जो अनावश्यक रूप से पृष्ठ को अधिभारित करते हैं।
यह आवश्यक है
jQuery पुस्तकालय
अनुदेश
चरण 1
जावा स्क्रिप्ट प्रोग्रामिंग भाषा में लिखी गई लोकप्रिय jQuery प्लग-इन लाइब्रेरी का उपयोग करके स्पॉइलर को लागू किया जा सकता है। इसका उपयोग पृष्ठ के HTML मार्कअप कोड के साथ प्रोग्रामिंग भाषा की पूर्ण सहभागिता को लागू करने के लिए किया जाता है। टैग का उपयोग करके HTML का उपयोग करके jQuery कनेक्शन किया जाता है। आपको वह स्थान निर्दिष्ट करना होगा जहां स्क्रिप्ट स्थित है और उसका प्रकार सेट करें: $ (दस्तावेज़).ready (फ़ंक्शन ()
चरण दो
एक निश्चित पैराग्राफ के भीतर निर्दिष्ट पाठ के टुकड़े को एक अलग परत में संलग्न किया जाना चाहिए - एक डिव, जिसकी मदद से स्पॉइलर को नियंत्रित किया जाएगा: साशा राजमार्ग पर चली और सुखाने को चूसा।
चरण 3
इसके बाद, आपको नाम के सभी डिव्स के सामने स्पॉइल संबंधित बटन बनाने होंगे जो टेक्स्ट को संक्षिप्त और विस्तारित करेंगे। सबसे पहले, स्पॉइलर मानक "छिपाने ()" फ़ंक्शन का उपयोग करके छिपा हुआ है: $ ("div [name = 'spoil']")। छुपाएं (); इसके बाद, आपको सभी स्पॉइलर के लिए एक टेक्स्ट और एक छवि बनाने की आवश्यकता है, जो बटन के लिए पृष्ठभूमि के रूप में उपयोग किया जाएगा: $ ("पी [नाम = 'स्पॉइलबटन']")। एचटीएमएल ("टेक्स्ट दिखाएं");
चरण 4
पृष्ठ पर सभी बटन ढूंढें और बटन के सामने प्रथम स्तर के शीर्षकों की जांच करें। ऐसा करने के लिए, एक शर्त बनाएं जो h1 टैग को नाम से खोजेगी। निर्दिष्ट शीर्षक पाठ स्वयं div में लपेटता है: $ ("p [नाम = 'spoilbutton']")। प्रत्येक (फ़ंक्शन () {अगर ($ (यह).prev (यह).get (0).tagName == "H1") {वर न्यूस्पोइलबटन =" "+ $ (यह).prev (यह).html () +" टेक्स्ट दिखाएं "; $ (यह).prev (यह).replaceWith (" "); $ (यह).replaceWith (न्यूस्पोइलबटन);}})
चरण 5
इसके बाद, आपको क्लिक के साथ माउस बटन के क्लिक को संभालने की आवश्यकता है। यदि एक क्लिक का पता चलता है, तो इसे प्रदर्शित किया जा सकता है: $ ("div [name = 'spoilbutton']")। क्लिक करें (फ़ंक्शन () {अगर ($ (यह).अगला (यह).css ("डिस्प्ले") = = "ब्लॉक") {
चरण 6
फिर विरासत लिखें। एक डिव के भीतर, टेक्स्ट पैराग्राफ पी में है, जिसकी सामग्री को स्पैन टैग में रखा गया है: $ (यह).बच्चों ("पी")। बच्चे ("स्पैन")। एचटीएमएल ("टेक्स्ट दिखाएं"); संक्षिप्त करें खुला बिगाड़नेवाला। यदि यह खुला नहीं है, तो पाठ का विस्तार करें। यह चरण इनहेरिटेंस नियम पर आधारित है: $ (यह).अगला (यह).slideUp ("सामान्य");} और {$ (यह).बच्चों ("पी")। बच्चे ("स्पैन")। एचटीएमएल ("पाठ छुपाएं"); $ (यह).अगला (यह).स्लाइडडाउन ("सामान्य");} झूठी वापसी; })
चरण 7
फिर बटन पर माउस का क्लिक रिकॉर्ड किया जाता है, जिससे स्क्रिप्ट स्पॉइलर को छिपाएगी और खोल देगी। $ ("पी [नाम = 'स्पॉइलबटन']")। क्लिक करें (फ़ंक्शन () {अगर ($ (यह).अगला (यह).css ("डिस्प्ले") = "ब्लॉक") {$ (यह).next (यह).slideUp ("सामान्य"); $ (यह).html ("छिपाएं");} झूठी वापसी;}); स्पॉयलर तैयार। यह तब दिखाई देगा जब एक मेल खाने वाला DIV ब्लॉक मिलेगा।
