jQuery के iPhone प्रभाव

जावास्क्रिप्ट लाइब्रेरी के रूप में, jQuery कई जटिल प्रोग्रामिंग कार्यों को संभालता है, आपको कोड की मात्रा कम करनी होगी। JQuery का उपयोग करके, आपकी व्यावसायिक वेबसाइट Apple के iPhone के इंटरेक्टिव और आंख को पकड़ने वाले टचस्क्रीन ग्राफिक्स को अनुकरण कर सकती है। अपनी वेबसाइट पर एक jQuery प्लगइन जोड़ने से आप कंप्यूटर माउस के जवाब में लोकप्रिय iPhone प्रभावों को पुन: पेश कर सकते हैं।

कड़ी चोट

जब आप शब्द "आईफोन" सुनते हैं, तो "स्वाइप" शब्द भी दिमाग में आ सकता है, क्योंकि आप अपनी सामग्री को हेरफेर करने के लिए आईफोन की स्क्रीन पर अपनी उंगली को स्वाइप करते हैं। साइट के "स्रोत डाउनलोड करें" अनुभाग में "ज़िप पुरालेख" लिंक पर क्लिक करके, अज़ॉफ़ डिज़ाइन द्वारा ओवरस्क्रॉक jQuery प्लगइन का उपयोग करके आप इस प्रभाव को पुन: उत्पन्न कर सकते हैं। ज़िप फ़ाइल को डाउनलोड करने के बाद, आपको Jquery.overscroll.min.js नाम की एक जावास्क्रिप्ट फ़ाइल को प्रकट करने के लिए इसे अनज़िप करना होगा। इसे अपने वेब पेज पर जोड़ने के लिए, आपको अपने दस्तावेज़ के मुख्य भाग में निम्नलिखित कथन को अंकित करना होगा:

फिर आप अपने दस्तावेज़ के मुख्य भाग में एक div block जोड़ सकते हैं, जो नीचे सूचीबद्ध है:

मान "div1" को दस्तावेज़ के मुख्य भाग में div की आईडी से मेल खाना चाहिए। अपने वेब पेज को एक ब्राउज़र में लॉन्च करने के बाद, आप डिव को उसके आयामों से अधिक होने पर उसे इधर-उधर ले जाने के लिए क्लिक कर सकते हैं।

wiggle

सबसे सूक्ष्म लेकिन प्रभावशाली iPhone प्रभावों में से एक तब होता है जब आप कुछ क्षणों के लिए आइकन दबाते हैं और दबाए रखते हैं: जब तक आप इसे फिर से नहीं दबाते हैं, तब तक आप इसे एक विजुअल क्लू देते हैं, जिसे आपने आइकन चुना है। आप इस प्रभाव को अपने वेब पेज पर UserDot के jQuery Wiggle प्लगइन के साथ जोड़ सकते हैं; इसे डाउनलोड करने के बाद, आपको डाउनलोड फ़ोल्डर में कई फाइलें और सबफ़ोल्डर मिलेंगे। आपके वेब सर्वर पर कॉपी किया गया है, उन फ़ाइलों और फ़ोल्डरों को किसी भी छवि को बनाते हैं जब इसे "आईडी" जैसे एक आईडी देकर क्लिक किया जाता है, जैसा कि निम्नलिखित उदाहरण में दिखाया गया है:

उस छवि टैग को जोड़ने के बाद, आपको अपने दस्तावेज़ के स्क्रिप्ट सेक्शन में निम्नलिखित कोड पेस्ट करना होगा:

$ (दस्तावेज़)। पहले से ही (फ़ंक्शन () (var अंतराल = null; $ ('# wiggle')। wiggle ('रोक');} और {$ (यह) .wiggle ('प्रारंभ');}});});

तीसरे कथन में क्लिक फ़ंक्शन img टैग में निर्दिष्ट "wiggle" आईडी मान को संदर्भित करता है। दस्तावेज़ के मुख्य भाग में निम्नलिखित स्क्रिप्ट टैग जोड़ने से सेटअप प्रक्रिया पूरी होती है:

जब आप अपने पृष्ठ को किसी ब्राउज़र में देखते हैं, तो आपके द्वारा क्लिक की गई छवि तब तक विचलित हो जाएगी, जब तक कि आप इसे फिर से क्लिक नहीं करते। IWiggle प्लगइन 2012 के रूप में फ़ायरफ़ॉक्स, सफारी, क्रोम और ओपेरा के नवीनतम संस्करण के साथ-साथ इंटरनेट एक्सप्लोरर 10 में काम करने वाले कैस्केडिंग स्टाइल शीट रोटेट प्रभाव का उपयोग करता है।

छवि ज़ूम

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

$ (दस्तावेज़)। पहले से ही (फ़ंक्शन () {var अवधि = 400; var zoomed = false; // $ ("# छवि")। क्लिक करें (फ़ंक्शन () {

// ज़ूम किया हुआ आकार यदि (ज़ूम किया हुआ = गलत) {ज़ूम किया हुआ = सत्य; $ ("# छवि")। चेतन ({ऊंचाई: 400}, अवधि); $ ("# छवि")। चेतन ({चौड़ाई: 430}, अवधि); }

// सामान्य आकार बाकी {झूले = झूठे; $ ("# छवि")। चेतन ({ऊंचाई: 200}, अवधि); $ ("# छवि")। चेतन ({चौड़ाई: 215}, अवधि); }}); });

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

इस उदाहरण में छवि का आईडी मान "छवि" है, लेकिन इसका नाम कॉल में उपयोग किए गए नाम को jQuery कोड में चेतन फ़ंक्शन से मेल खाना चाहिए।

विचार

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

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

अनुशंसित