राउंडअबाउट - jQuery आधारित हिंडोला रूपरेखा

हाल ही में, मैंने जावास्क्रिप्ट सीखना शुरू किया, फिर JQuery, और अब मैं धीरे-धीरे उपरोक्त तकनीकों के आधार पर निर्मित प्लगइन्स और फ्रेमवर्क पर आगे बढ़ रहा हूं। जेएस के अध्ययन के समानांतर, मैं छोटे व्यवसाय कार्ड साइटें बिछा रहा हूं, और अब मुझे चित्रों का "हिंडोला" बनाने की आवश्यकता है। यह पता चला कि पहले से तैयार समाधान हैं, और मैं आपको उनमें से एक के बारे में बताना चाहता हूं। यह लेख मूल RounAbout फ्रेमवर्क साइट के अंश है।

परिचय।

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

तैयार करना।

इससे पहले कि हम कोड के माध्यम से अफवाह शुरू करें, आपको सभी स्क्रिप्ट डाउनलोड करने और उन्हें कनेक्ट करने की आवश्यकता है। आपको इसकी आवश्यकता है:

• अपने पसंदीदा संपादक में html फ़ाइल खोलें
• jQuery
• राउंडअबाउट

आइए एक फोल्डर में सभी फाइलों को सेव करें। यदि आप फ़ाइलों को उनके प्रकारों के अनुसार वितरित करना चाहते हैं - उदाहरणों में पथों को बदलना न भूलें!

HTML पेज की तैयारी।

इनसाइड बॉडी निम्नलिखित कोड जोड़ें:

<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> 

स्क्रिप्ट।

हमें जो स्क्रिप्ट चाहिए, उन्हें कनेक्ट करें। ऐसा करने के लिए, बस बॉडी टैग के बहुत नीचे निम्नलिखित कोड जोड़ें (जैसा कि यह फ्रेमवर्क साइट पर लिखा गया है, उन्हें सिर से जोड़ना बेहतर होगा)।

 <script src="jquery.js"></script> <script src="jquery.roundabout.js"></script> 

हिंडोला।

कनेक्टेड स्क्रिप्ट के नीचे निम्नलिखित कोड जोड़ते हैं:

 <script> $(document).ready(function() { $('ul').roundabout(); }); </script> 

यहां क्या हो रहा है?

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

सीएसएस।

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

 <style> .roundabout-holder { list-style: none; padding: 0; margin: 0; height: 5em; width: 5em; } .roundabout-moveable-item { height: 4em; width: 4em; cursor: pointer; background-color: #ccc; border: 1px solid #999; } .roundabout-in-focus { cursor: auto; } </style> 

.Roundabout- धारक वर्ग को उल द्वारा ही जोड़ा जाएगा। यह सूची मार्करों को हटाने और हिंडोला के लिए चयनित आकार निर्धारित करने के लिए आवश्यक है।
.Roundabout- चल-आइटम वर्ग केवल ली में जोड़ा जाएगा। झूठे तत्व आकार ले लेंगे, और जब आप पर मंडराते हैं, तो माउस पॉइंटर एक "हाथ" में बदल जाता है।
जब तत्व सामने (फ़ोकस) हो, तो .roundabout-in-focus वर्ग को ली में जोड़ा जाएगा। ऐसे तत्व के लिए हम सूचक को मूल एक पर लौटाएंगे।

सीएसएस सेटिंग्स।

CSS के माध्यम से हिंडोला को लचीले ढंग से अनुकूलित करके, इसे बदलना एक विज्ञान की तुलना में अधिक कला बन जाता है। .Emabout- धारक वर्ग की चौड़ाई को 10em में बदलने का प्रयास करें। देखें कि तत्व कैसे भरे जाते हैं? हिंडोला इसके लिए आवंटित पूरे क्षेत्र को भरने के लिए हर संभव प्रयास करेगा, हालांकि, चलते समय कुछ तत्व स्थापित सीमाओं से परे जाएंगे।
इन हिंडोला सेटिंग्स के साथ खेलें, जितना अधिक आपके परिवर्तन सहज होंगे, उतना ही अधिक हिंडोला बन जाएगा (मूल में पागल शब्द का उपयोग किया जाता है)।

पैरामीटर सेट करना।

इससे पहले, हमने पूर्वनिर्धारित मापदंडों के साथ सबसे सरल हिंडोला बनाया था, लेकिन वास्तव में, एक फ़ंक्शन को कॉल करते समय, हम सेटिंग्स के साथ एक ऑब्जेक्ट पास कर सकते हैं, जिससे हमारे हिंडोला को अधिक लचीले रूप से अनुकूलित किया जा सकता है।
यह निम्नलिखित कोड का उपयोग करके किया जाता है:

 <script> $(document).ready(function() { $('ul').roundabout({ //  }); }); </script> 

उपलब्ध विकल्प।

वास्तव में, इन विकल्पों में से बहुत सारे हैं, लेकिन अब हम सबसे दिलचस्प में से एक का उपयोग करने की कोशिश करेंगे।
HTML कोड में जोड़ें:

 <a href=”#” class=”.next”></a> 

राउंडअबाउट में हम वस्तु की निम्नलिखित संपत्ति पास करते हैं:
btnNext: ".next"
यह गुण चयनकर्ता को jQuery स्ट्रिंग के रूप में पास करता है। अब वर्ग के लिंक पर क्लिक करें। फिर हम हिंडोला की वस्तुओं को बाएं से दाएं स्विच कर सकते हैं। उलटा btnPrev संपत्ति के साथ अभ्यास करें, यह उस वस्तु को परिभाषित करता है जो हिंडोला तत्वों को रिवर्स ऑर्डर में स्विच करता है। किसी वस्तु के कई मापदंडों को पारित करते समय, उन्हें अल्पविराम से अलग करके सूचीबद्ध करें। दिलचस्प गुणों में से एक, मेरी राय में, सही और गलत मूल्यों के साथ, ऑटोप्ले है। यह स्लाइड्स को स्वचालित रूप से स्विच करने के लिए जिम्मेदार है। ऑटोप्ले सेट करते समय, अवधि संपत्ति आवश्यक हो जाती है, इसे मिलीसेकंड में मापा जाता है, और यह अगली स्लाइड पर स्विच करने से पहले उस समय को निर्धारित करता है जिसे समाप्त होना चाहिए।
गुणों की पूरी सूची यहां देखी जा सकती है ।

अंत तक पाठ पढ़ने के लिए धन्यवाद!