इंटरनेट एक्सप्लोरर के लिए, उन्होंने पहली बार पहले और
बाद की घटनाओं को लागू किया, और लंबे समय तक वह एकमात्र ऐसा व्यक्ति था जिसने उनका समर्थन किया। तब मोज़िला ने
अपने ब्राउज़र के 6 वें संस्करण से इन घटनाओं का समर्थन करते हुए खुद को ऊपर खींच लिया। वेबकिट
बहुत लंबे समय तक लागू करने की हिम्मत नहीं करता था , और अंत में पूरी तरह से इसे छोड़ दिया, हमें
मैचमीडिया इंटरफ़ेस का हवाला देते हुए। ओपेरा, जहां तक लेखक यह पता लगाने में सक्षम था, उसने या तो घटना या मैचमीडिया को लागू नहीं किया, हालांकि इस मुद्दे के अपर्याप्त googling को बाहर नहीं किया गया है।
पूर्वगामी के आधार पर, मैं पाठकों के साथ एक सरल jQuery प्लगइन साझा करना चाहता हूं जो पहले और बाद के तरीकों के लिए समर्थन जोड़ता है।
/ **
* @ अथर अलेक्जेंडर बर्टसेव
* @ शेड्यूलिंग के बाद और पहले की घटनाओं के लिए लगभग क्रॉस ब्राउज़र हैंडलिंग
* @requires jQuery 1.7+
* /
$। fn । पहले छाप = फ़ंक्शन ( कॉलबैक ) {
वापसी $ ( यह ) । प्रत्येक ( फ़ंक्शन ( ) {
अगर ( jQuery। isindow ( यह ) )
वापसी;
यदि ( यह । आगे बढ़ना ! == अपरिभाषित )
$ ( यह ) । पर ( 'पहले' , कॉलबैक ) ;
और अगर ( यह । माचिया )
यह । मैचमीडिया ( 'प्रिंट' ) । addListener ( कॉलबैक ) ;
} ;
} ;
$। fn । afterprint = फ़ंक्शन ( कॉलबैक ) {
वापसी $ ( यह ) । प्रत्येक ( फ़ंक्शन ( ) {
अगर ( jQuery। isindow ( यह ) )
वापसी;
यदि ( यह । बाद में ! == अपरिभाषित )
$ ( यह ) । पर ( 'छाप' , कॉलबैक ) ;
और अगर ( यह । माचिया )
यह । मैचमीडिया ( 'मीडिया' ) । addListener ( कॉलबैक ) ;
} ;
} ;
उपयोग के बारे में
मान लीजिए कि आपकी साइट पर एक पेज है जिसे उपयोगकर्ता प्रिंट करेंगे। उदाहरण के लिए,
Google मानचित्रों पर विचार करें (यह यैंडेक्स मानचित्रों पर विचार करने के लिए देशभक्ति होगी, लेकिन वे केवल एक विशेष पृष्ठ पर एक अलग पृष्ठ पर प्रिंट करते हैं)। यदि आप इसे Google Chrome में प्रिंट करने का निर्णय लेते हैं, तो आपको निम्न जैसा कुछ दिखाई देगा:
Google ने इसे सरल और सुंदर तरीके से किया। सीएसएस मीडिया प्रिंट का उपयोग करते हुए, मैंने सभी अनावश्यक तत्वों को हटा दिया, मुद्रण के लिए शेष लोगों को स्टाइल किया, और ईमानदारी से ऊपरी दाहिने हिस्से में लिखा: "इस पद्धति से गलत परिणाम हो सकते हैं, इसलिए प्रिंट लिंक का उपयोग करना बेहतर है"।
गूगल को क्या याद आया? वह नक्शे को क्रोम में प्रिंट पर केंद्रित नहीं करता है। मूल में, यह मॉस्को में लेखक के आसपास केंद्रित है, और यहां स्थानांतरित कर दिया गया है। इसके अलावा, स्क्रीन की चौड़ाई जितनी बड़ी होगी, उतनी ही मजबूत होगी। यह इस तथ्य के कारण है कि Google मैप्स प्रिंट मीडिया में मानचित्र को अपडेट करने के लिए एक साधारण जावास्क्रिप्ट नहीं चलाते हैं।
अब उपरोक्त प्लगइन का उपयोग करके बग को ठीक करें:
// मेरा उपयोग मामला
( फ़ंक्शन ( ) {
var _links = $ ( 'लिंक [मीडिया = "प्रिंट"]' ) ;
$ ( खिड़की )
। पहले ( फ़ंक्शन ) ( {
_links। attr ( 'मीडिया' , 'ऑल' ) ;
मैप करें। updateAfterLayoutChange ( ) ;
} )
। afterprint ( फ़ंक्शन ( ) {
_links। attr ( 'मीडिया' , 'प्रिंट' ) ;
मैप करें। updateAfterLayoutChange ( ) ;
} ;
// updateAfterLayoutChange () विधि का आविष्कार किया गया है, और मैप लिंक भी
} ) ( ) ;
लाभ!
कुल मिलाकर
अब हम मुद्रण के लिए पृष्ठ की उपस्थिति को अनुकूलित कर सकते हैं, न केवल सीएसएस का उपयोग करते हुए, बल्कि जावास्क्रिप्ट का उपयोग भी कर सकते हैं। IE8 +, क्रोम और मोज़िला में परीक्षण किया गया।
यदि आपके पास 1.7 से अधिक पुराना jQuery है, तो प्लगइन कोड में बाइंड () के साथ ऑन () विधि को बदलें, अब प्लगइन को 1.4.3+ संस्करणों के लिए समर्थित होना चाहिए।