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

JQuery के साथ एक "फ़िल्टर करने योग्य" पोर्टफोलियो बनाना

by
Difficulty:IntermediateLength:MediumLanguages:

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

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

Final Product

1. मार्कअप

हमारा पोर्टफोलियो एक साधारण unordered लिस्ट से अधिक कुछ नहीं है:

नोट: मेरा इन अद्भुत साइटों को बनाने का कोई मतलब नहीं है; मैं बस उन्हें उदाहरण के रूप में उपयोग कर रहा हूँ।

2. पोर्टफोलियो काटेगोरीज़िंग

हम यह मानने जा रहे हैं कि हमारे पोर्टफोलियो को 5 कैटेगरीज़ में विभाजित किया जा सकता है:

  • डिज़ाइन
  • डेवलपमेंट
  • CMS
  • इंटीग्रेशन
  • इनफार्मेशन आर्किटेक्चर

हमने परिभाषित कैटेगरीज़ का उपयोग करने के लिए, हम उन्हें लोअरकेस में परिवर्तित कर देंगे और सभी जगहों को हाइफ़न के साथ बदल देंगे:

  • Design = design
  • Development = development
  • CMS = cms
  • Integration = integration
  • Information Architecture = information-architecture

हम यह मानने जा रहे हैं कि प्रत्येक पोर्टफोलियो आइटम एक या कई कैटेगरीज़ में हो सकता है, इसलिए हम लिस्ट आइटम्स में क्लासेज के रूप में हमारी नव निर्मित कैटेगरीज़ को रैंडम रूप से जोड़ने जा रहे हैं:

केटेगरी नेविगेशन जोड़ना

अब हमारे पास पोर्टफोलियो के टुकड़े हैं, हमें उनके माध्यम से नेविगेट करने के लिए कुछ तरीके की आवश्यकता होगी। एक और unordered लिस्ट को करना चाहिए:

चूंकि मैं All आइटम्स को दिखाने के लिए पोर्टफोलियो का डिफ़ॉल्ट व्यू चाहता हूं, इसलिए मैंने पहली लिस्ट आइटम में current क्लास असाइन की है।

आप शायद इस पर ध्यान दें और इस उदाहरण की एक्सेसिबिलिटी पर मुझसे सवाल करें। मेरा विचार यह है कि उस समस्या को हल करने के लिए आपके पास 3 ऑप्शन हैं।

  1. इस तरह एक पोर्टफोलियो बनाते समय, एक मजबूत संभावना है कि यह डेटाबेस ड्रिवेन होगा। इस प्रकार, आप प्रत्येक केटेगरी के लिए एक अलग पेज बनाने में सक्षम होने चाहिए। इसलिए यदि किसी यूजर के पास जावास्क्रिप्ट इनेबल नहीं है, तो वे फ़िल्टर किए गए पोर्टफोलियो के साथ अलग पेज पर जा सकते हैं।
  2. आप मेरे अंतिम ट्यूटोरियल के समान ही तकनीक का उपयोग कर सकते हैं: URL में पैरामीटर सेट करना।
  3. पोर्टफोलियो आइटम से पहले आप हमेशा जावास्क्रिप्ट के साथ नेविगेशन में लिख सकते हैं:

ठीक है, आपको मेरे नोट्स को एक्सेसिबिलिटी पर मिला है, इसलिए इसके बारे में सोचने के लिए मेरी आलोचना न करें।

3. CSS

यह ट्यूटोरियल CSS के बारे में नहीं है, इसलिए मैं CSS के माध्यम से बहुत तेज़ी से दौड़ने जा रहा हूं।

मैं हमेशा कुछ बुनियादी स्टाइल्स के साथ एक प्रकार के फ्रेमवर्क के रूप में शुरू करता हूं, इसलिए मैं अभी उन स्टाइल्स पर नहीं जा रहा हूं। ये स्टाइल्स मूल रूप से केवल रीसेट के रूप में कार्य करते हैं और बुनियादी एलिमेंट्स के लिए कुछ स्टाइल परिभाषित करते हैं।

शुरू करने के लिए, मैं बस प्रत्येक के बीच सीमा के साथ टॉप हॉरिजॉन्टल कैटेगरीज़ को प्रदर्शित करना चाहता हूं:

इसके बाद, मैं अंतिम लिस्ट आइटम (ब्राउज़र का समर्थन करने वाले ब्राउज़र में) से बॉर्डर को हटाना चाहता हूं और लिंक के प्रदर्शन को बदलना चाहता हूं:

मैं वर्तमान में चयनित केटेगरी को सुनिश्चित और अंतर (differentiate) करना भी चाहता हूं:

ठीक है, अब हमारे पास केटेगरी नेविगेशन स्टाइल है, चलिए पोर्टफोलियो के वास्तविक लेआउट पर ध्यान केंद्रित करते हैं। आइए प्रत्येक के चारों ओर एक सीमा के साथ एक-दूसरे के बगल में फ्लोट करने वाली 3 लिस्ट आइटम्स पर योजना बनाएं:

अब, हमें इमेजेज और लिंक के लिए कुछ बुनियादी स्टाइल जोड़ने की जरूरत है:

इंटरनेट एक्सप्लोरर 6 के लिए कंपनसेशन

बेशक, हमारे दोस्त IE6 के बारे में मत भूलना। एक बार जब आप कुछ फ़िल्टरों के माध्यम से क्लिक करना शुरू कर देते हैं, तो लेआउट थोड़ा क्रेजी हो जाता है।

IE Screenshot

मैं जो कह सकता हूं उससे, यह डरावना IE डबल मार्जिन बग है। मैंने लिस्ट आइटम्स को display:inline लगाने की कोशिश की जब वह फ़िल्टर हो जाते हैं, लेकिन ऐसा लगता है कि यह ठीक नहीं हुआ। तो मेरा सबसे अच्छा समाधान सिर्फ सही मार्जिन को कम करना था:

हम निश्चित रूप से कंडीशनल कमैंट्स का उपयोग कर इस IE6 विशिष्ट स्टाइलशीट को सर्व करने जा रहे हैं:

हाँ, यह अच्छा नहीं लग रहा है, लेकिन आप जानते हैं कि: मुझे परवाह नहीं है। यदि आप IE6 का उपयोग कर रहे हैं, तो आप इसके लायक हैं।

4. jQuery

ठीक है, अब हमारे पास मार्कअप और CSS सब कुछ है, इस ट्यूटोरियल के महत्वपूर्ण भाग पर आएं: जावास्क्रिप्ट

हम अपने डॉक्यूमेंट के हेड में jQuery के नवीनतम संस्करण को शामिल करके शुरू करने जा रहे हैं।

अगला, डॉक्यूमेंट लोड होने के बाद हम अपने कोड को एक्सेक्यूट करना चाहते हैं।

अब, हम कुछ भी नहीं करना चाहते हैं जब तक कि हमारी कैटेगरीज़ में से कोई एक क्लिक न हो जाए। हम यह भी सुनिश्चित करना चाहते हैं कि हम लिंक के href वैल्यू को फॉलो न करें, इसलिए हमें false को रीटर्न करने की आवश्यकता है:

एक बार एक केटेगरी लिंक क्लिक करने के बाद, मैं कुछ चीजें करना चाहता हूं: क्लिक किए गए लिंक पर आउटलाइन हटाएं, उस लिस्ट आइटम पर current की क्लास को हटा दें, और क्लिक किए गए लिंक के पैरेंट पर current की केटेगरी जोड़ें :

इसके बाद, हम क्लिक किए गए लिंक के अंदर टेक्स्ट प्राप्त करना चाहते हैं, इसे लोअरकेस में कनवर्ट करना चाहते हैं, और हाइफ़न के साथ किसी भी रिक्त स्थान को रीप्लेस करना चाहते हैं (जैसे कि जब हम केटेगरी क्लासेज बना रहे थे):

स्क्रिप्ट का पहला केस तब होता है जब सभी लिंक क्लिक किए जाते हैं। जब इसे क्लिक किया जाता है, तो हम सभी पोर्टफोलियो आइटम दिखाना और छिपे हुए क्लास को हटाना चाहते हैं:

अन्यथा, वास्तविक कैटेगरीज़ में से एक पर क्लिक किया गया था। इसलिए हम प्रत्येक पोर्टफोलियो आइटम से गुजरना चाहते हैं और यह देखने के लिए जांच कर सकते हैं कि इसमें क्लास है जो केटेगरी की वैल्यू के बराबर है। यदि इसमें क्लास नहीं है, तो हम लिस्ट आइटम को fade करना चाहते हैं और छिपी हुई क्लास को जोड़ना चाहते हैं। इसमें क्लास है, हम इसे fade करना चाहते हैं और hidden क्लास को हटा देना चाहते हैं:

समाप्त होने पर स्क्रिप्ट

आइए पूरी स्क्रिप्ट पर एक नज़र डालें:

कुछ लोगों को इफ़ेक्ट पसंद नहीं हो सकता है, लेकिन मुझे लगता है कि यह बहुत अच्छा लगता है कि वे कैसे सभी प्रकार के नृत्य करते हैं। यह निश्चित रूप से ऐसा कुछ करने का एकमात्र तरीका नहीं है, और इसे अन्य चीजों को करने के लिए आसानी से बनाया जा सकता है।

यह तकनीक वास्तव में कोडिंग से डेवेलप हुई है जिसे मैंने अपनी कंपनी के पोर्टफोलियो के लिए किया था।

Final Product

5. एक क्विक नोट

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

  • अधिक दैनिक वेब डेवलपमेंट टुट्स और आर्टिकल्स के लिए NETTUTS RSS Feed की सदस्यता लें।
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.