Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

कैसे एक अद्भुत jQuery शैली switcher बनाने के लिए

by
Difficulty:IntermediateLength:MediumLanguages:

Hindi (हिंदी) translation by Afiff Soebarkah (you can also view the original English article)

इस ट्यूटोरियल में मैं आपको दिखा रहा होगा कैसे एक शैली switcher jQuery और PHP का उपयोग कर बनाने के लिए । अंतिम परिणाम एक विनीत & पूरी तरह से ह्रास गतिशील शैली switcher होगा जो जल्दी और आसानी से लागू होगा ।




चरण 1: HTML

सबसे पहले, हम अपने मूल HTML फ़ाइल बनाने के लिए और index. php के रूप में इसे बचाने की जरूरत है:

आप देखेंगे कि वहां कुछ PHP वहां सिर्फ सिर में शीर्षक विशेषता से नीचे है । यह बहुत आसान है-यह सब एक कुकी के लिए जांच करता है "शैली" कहा जाता है-अगर यह तो मौजूद है यह स्थानीय चर को निर्दिष्ट ("शैली" भी कहा जाता है) और अगर कुकी मौजूद नहीं है, यह डिफ़ॉल्ट विषय ("दिवस") प्रदान $style चर के लिए । इस चर तो लिंक तत्व के href गुण के भीतर बाहर प्रतिध्वनित है (href = "सीएसएस/$style? >. css") ।

आप देखेंगे कि शैली switcher div हमारे HTML में ऊपर शामिल है । इस जावास्क्रिप्ट का उपयोग कर जोड़ने के लिए कोई ज़रूरत नहीं है क्योंकि विधि हम उपयोग कर रहे है शैली की अनुमति होगी switcher काम करने के लिए जब जावास्क्रिप्ट अक्षम है । दो कड़ियां (रात & दिवस) एक संलग्न क्वेरी स्ट्रिंग इसी विषय को निर्दिष्ट करने के साथ style-switcher. php नामक फाइल करने के लिए उपयोगकर्ता ले (जैसे href = "style-switcher. php? style = दिन") ।

मैं भी एक jQuery प्लगइन बुलाया styleSwitcher बुलाया है । यह अभी तक विकसित नहीं किया गया है (ठीक है, यह समय आप इस पढ़ा द्वारा होगा), तो पर पकड़! ... हम इस ट्यूटोरियल के चरण 4 में इस प्लगइन लेखन किया जाएगा ।

चरण 2: सीएसएस

अब, हम अपने HTML के लिए सीएसएस stylesheets के एक जोड़े को बनाने की जरूरत है । मैं सिर्फ दो stylesheets बनाने का फैसला किया है-एक "दिन" के विषय होगा और दूसरे के विषय होगा "रात" और मैं उंहें उचित नाम दिया है । (दिन. css & night. css)

दिवस विषय:

Night Theme

रात विषय:

Night Theme

यह सबसे अच्छा है एक शैली के साथ शुरू करने के लिए और फिर सभी चयनकर्ताओं भर में वैकल्पिक StyleSheet को कॉपी-और फिर सभी कि बदलने की जरूरत है विभिंन सीएसएस नियमों और घोषणाओं रहे हैं । जाहिर है आप के रूप में कई stylesheets के रूप में आप चाहते हैं, लेकिन इस ट्यूटोरियल में हम गाये प्रयोजनों के लिए दो प्रयोग कर सकते हैं । प्लस रात और दिन एक जोड़ी के रूप में अच्छी तरह से एक साथ जाना!

day. css:

रात. सीएसएस:

यह वास्तव में एक सीएसएस ट्यूटोरियल तो मैं ऊपर से किसी में तल्लीन करना नहीं होगा नहीं है, लेकिन अगर आप किसी भी सवाल है तो उंहें टिप्पणी अनुभाग में पूछने के लिए स्वतंत्र महसूस कृपया । और हां, मुझे पता है कि ंयूनतम चौड़ाई पुराने ब्राउज़रों में समर्थित नहीं है! ;)

चरण 3: style-switcher. php

यह वह स्थान है जहां हम शैली switcher के मुख्य कार्यशीलता लिखें । यह वास्तव में बहुत ही बुनियादी PHP कोड की कुछ लाइनें है । आप एक नई फ़ाइल "style-switcher. php" बुलाया बनाने और इसे में निंनलिखित की नकल करनी चाहिए:

तो, क्या इसके बाद के संस्करण कोड करता है "शैली" एक स्थानीय $style चर चर जाओ निरुपित । दूसरे शब्दों में यह क्वेरी स्ट्रिंग (style-switcher. php? style = दिन) के भीतर शैली संपत्ति का मूल्य ले जाएगा । यह तो एक कुकी सेट (एक सप्ताह के लिए) "शैली" कहा जाता है-हम अपने मुख्य index. php पर कदम 1 में दिखाया कोड के साथ इस कुकी पुनः प्राप्त करने में सक्षम हो जाएगा (सिर में php का है कि थोड़ा हिस्सा याद है?) । अगला, यह देखने के लिए अगर "जे एस" क्वेरी स्ट्रिंग में संलग्न है जांच करता है । अगर यह है तो हम जानते है कि जावास्क्रिप्ट (जो हम अभी तक लिखने के लिए) इस PHP स्क्रिप्ट का अनुरोध किया है । और हालत तब होती है जब एक उपयोगकर्ता जावास्क्रिप्ट सक्षम नहीं है और संदर्भ के लिए उपयोगकर्ता पुनर्निर्देश (पृष्ठ वे अभी से आया अर्थात्)-यह स्पष्ट हो जाएगा एक बार हम jQuery सामान लिखा है!

चरण 4: jQuery सामग्री

तुम, अगर तुम चाहो तो यहीं बंद कर सकते हैं!... समाधान इस प्रकार अभी तक पूरी तरह से काम करेंगे, लेकिन जैसा कि मैंने परिचय हम इसे भी कुछ jQuery भययोग्य के साथ कूलर बनाने जा रहे है में कहा! न केवल हम उपयोगकर्ता पृष्ठ को ताज़ा करने के बिना अपने विषय को बदलने के लिए अनुमति देने के लिए जा रहे हैं, लेकिन हम भी एक बहुत अच्छा लुप्त होती प्रभाव जोड़ने के लिए जा रहे हैं... मेरा मतलब है, jQuery ट्यूटोरियल की क्या प्रकार यह होगा अगर वहां कोई लुप्त होती!?!?

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

सबसे पहले, चलो एक "styleswitcher. jquery. js बुलाया फ़ाइल बनाएं."

jQuery में एक नया प्लगइन बनाना अत्यंत सरल है; सभी इसे लेता है निंनलिखित कोड है:

तो, पहले हम निर्दिष्ट क्या होता है जब StyleSheet लिंक में से एक पर क्लिक कर रहे है चाहता हूं (div # पहनाव-switcher के भीतर उन):

loadStyleSheet:

अब हम loadStyleSheet समारोह लिखने की जरूरत है:

मुझे आशा है कि टिप्पणी यह पर्याप्त समझाया । आप के और अधिक ध्यान दिया है कि हम एक वर्तमान में अपरिभाषित समारोह बुला रहे है देखा होगा (cssDummy. check ()) । चिंता मत करो क्योंकि वह अगले कदम है.. ।

cssDummy:

हम परीक्षण का एक तरीका है कि एक StyleSheet भरी हुई है की जरूरत है । अगर यह तो हम ओवरले div गायब कर सकते है भरी हुई है, लेकिन अगर यह नहीं है हम जब तक यह लोड करता है की जांच पर रखना है । मैं नेट के आसपास खोज के एक बिट किया और इस तरह के एक बात के परीक्षण का एक विश्वसनीय तरीका मिल गया । यह एक डमी तत्व की गणना की चौड़ाई के लिए परीक्षण शामिल है । इस तत्व की चौड़ाई सीएसएस में परिभाषित किया जाएगा-और इसलिए तत्व की गणना की चौड़ाई केवल सीएसएस में परिभाषित चौड़ाई बराबर होगा जब StyleSheet भरी हुई है । मुझे आशा है कि तुम अब समझ क्यों हम है कि "#dummy तत्व प्रत्येक सीएसएस फ़ाइल में नियम" शामिल था.. ।

तो, यहां यह है:

और, सही हमारे प्लगइन के अंत में हम cssDummy. init समारोह फोन करने के लिए जा रहे हैं:

हो गया था! पूरे प्लगइन अब इस तरह दिखता है:

अब हम इस तरह jQuery प्लगइन कॉल कर सकते हैं:

समाप्त!

यदि आप फ़ाइल संरचना के बारे में यकीन नहीं कर रहे है तो डाउनलोड src फ़ाइलें एक नज़र है । मुझे आशा है कि आप इस ट्यूटोरियल के माध्यम से पढ़ मज़ा आया । हमेशा की तरह, यदि आप किसी भी प्रश्न है उंहें नीचे पूछने के लिए स्वतंत्र महसूस! यदि आप इस पोस्टिंग मज़ा आया, यह Digg कृपया!


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.