पृष्ठ चौड़ाई को गतिशील रूप से बदलें

कई लोग इस बारे में तर्क देते हैं कि पृष्ठ की चौड़ाई क्या होनी चाहिए - फिक्स्ड या स्ट्रेच्ड (रबर)। कुछ एक निश्चित आकार की तरह, दूसरों के चारों ओर का रास्ता। आइए दोनों प्रकारों को खुश करने की कोशिश करें, क्योंकि किसी भी व्यावसायिक साइट के किसी उपयोगकर्ता के पास एक संभावित ग्राहक है जो इस पृष्ठ पर रह सकता है या छोड़ सकता है (साइट उपयोग का एक प्रश्न)। मैंने इस समस्या को एक बार में हल करने का प्रयास किया, जिससे उपयोगकर्ता को पृष्ठ की चौड़ाई का विकल्प छोड़ दिया गया।







इस समस्या के दो समाधान हैं। पहला है 2 साइट टेम्प्लेट बनाना और साइट पृष्ठों पर उनके बीच एक स्विच जोड़ना (मेरी राय में, यह बहुत सुविधाजनक नहीं है)। दूसरा तरीका पृष्ठ की चौड़ाई में एक एनिमेटेड परिवर्तन को फिर से लोड किए बिना लागू करना है, और जब आप साइट पर अगले पृष्ठ पर जाते हैं, तो पृष्ठ की चौड़ाई अपरिवर्तित रहती है, क्योंकि चौड़ाई का डेटा कुकी में संग्रहीत होता है। यह विधि नीचे वर्णित है।



स्क्रिप्ट पूरी तरह से मान्य है (यदि आप इस बात को ध्यान में रखते हैं कि 7 डिव ब्लॉक हैं और इससे ज्यादा कुछ नहीं)।



खुद jquery लाइब्रेरी और jquery.cookie प्लगइन की जरूरत है ।



सीएसएस फ़ाइल में ie6, 7 के हैक होते हैं, मैंने अलग से उन्हें संक्षिप्तता के लिए फ़ाइल में निर्यात नहीं किया।



अक्षम कुकीज़ की जांच को ध्यान में नहीं रखा गया था, क्योंकि व्यवहार में सर्वर साइड पर सत्र के साथ स्क्रीन सेटिंग्स को सहेजना बेहतर है। सभी कोड में विस्तार से टिप्पणी की गई है।



मुझे उम्मीद है कि यह जानकारी उपयोगी होगी, मैंने इस तरह के कार्यान्वयन के उदाहरण नहीं देखे हैं।

$ ( दस्तावेज ) । तैयार ( फ़ंक्शन ) {



/ * कुकी अनुमति डेटा पृष्ठ की जाँच करें इसे देखने के लिए * /

अगर ( $। कुकी ( "स्क्रीन" ) == 'पूर्ण' ) { / * यदि पिछला दृश्य विस्तृत स्क्रीन पर था तो / /

/ * मुख्य ब्लॉकों के लिए एक विस्तृत साइट शैली वर्ग जोड़ें * /

$ ( '#conteiner, # conteiner_2, # conteiner_3, #footer' ) । addClass ( 'tip_full' ) ;

खिड़की। sreen_1 = 'fix' ; / * पेज की चौड़ाई बदलने वाले बटन के लिए प्रारंभिक मूल्य लिखें * /

खिड़की। sreen_2 = 'पूर्ण' ; / * माध्यमिक मूल्य * /

} अन्य { / * अन्य सभी मामलों में (डिफ़ॉल्ट सहित) एक संकीर्ण पृष्ठदृश्य * / प्रदर्शित करेगा

/ * मुख्य ब्लॉकों के लिए साइट पृष्ठ के प्रदर्शन को संकीर्ण करने के लिए शैलियों की एक श्रेणी जोड़ें * /

$ ( '#conteiner, # conteiner_2, # conteiner_3, #footer' ) । addClass ( 'tip_fix' ) ;

खिड़की। sreen_1 = 'full' ; / * प्राथमिक मूल्य * /

खिड़की। sreen_2 = 'ठीक' ; / * माध्यमिक मूल्य * /

}



/ * स्क्रीन की चौड़ाई को बदलने के लिए फंक्शन, जो इसे दिए गए मापदंडों पर निर्भर करता है * /

फंक्शन size_screen ( size_type_1 , size_type_2 ) {



$ ( '#start' ) । css ( 'प्रदर्शन' , 'कोई नहीं' ) ; / * "मूर्ख" से सुरक्षा, बार-बार बटन दबाने पर // बटन हटाएं * /



/ * पारित पैरामीटर (स्क्रीन की चौड़ाई) के आधार पर चर का मान निर्दिष्ट करें * /

अगर ( size_type_1 == 'पूर्ण' ) {

खिड़की। size_width = '100%' ; / * पृष्ठ चौड़ाई मान * /

} {

खिड़की। size_width = '800px' ;

}



/ * जक्वरी एनीमेशन फ़ंक्शन। इस स्थिति में, साइट पृष्ठ की छवि की चौड़ाई में एक सुचारू परिवर्तन * /

$ ( '#conteiner, # conteiner_2, # conteiner_3, # पाद' ) । चेतन ( {

'चौड़ाई' : खिड़की। size_width / * पृष्ठ प्रदर्शन सेटिंग के अनुसार चौड़ाई को धीरे-धीरे बदलें * /

} ,

500 , / * एनिमेशन समय * /

समारोह ( ) { / * एनीमेशन के बाद बुलाया समारोह * *

/ * पिछले पृष्ठ प्रदर्शन शैलियों को ब्लॉक से हटाएं * /

$ ( यह ) । removeClass ( 'tip_' + size_type_2 ) ;

/ * नई स्क्रीन चौड़ाई के लिए एक नई शैली वर्ग जोड़ें * /

$ ( यह ) । addClass ( 'tip_' + size_type_1 ) ;

/ * कचरा से html कोड को साफ करने के लिए, शैली विशेषता (jquery द्वारा बनाई गई) को हटा दें * *

/ * यह क्रिया आवश्यक नहीं है, यह एक सौंदर्य कार्य करता है * /

$ ( यह ) । removeAttr ( 'स्टाइल' ) ;



/ * "मूर्ख" से सुरक्षा: बार-बार बटन दबाने पर // बटन दिखाओ * /

$ ( '#start' ) । css ( 'डिस्प्ले' , 'ब्लॉक' ) ;

} ;

/ * हम पेज को पुनः लोड करने या बदलने के बाद साइट को प्रदर्शित करने के लिए कुकी लिखते हैं * / /

$। कुकी ( "स्क्रीन" , size_type_1 , { path : '/' } ) ;



}



$ ( '#start' ) । टॉगल ( / * टॉगल फ़ंक्शन क्रमिक रूप से बार-बार एक तत्व (बटन) * / दबाता है

function ( ) { size_screen ( window। sreen_1 , window। sreen_2 ) ; } , / * पहला प्रेस * /

function ( ) { size_screen ( window। sreen_2 , window। sreen_1 ) ; } / * दूसरा प्रेस * /

) ;

} )

आप इस लिंक को निम्न लिंक पर डाउनलोड कर सकते हैं: jquery आकार , और यहाँ देखें (ऊपरी दाएं कोने में लाल कचरा एक बटन है)।



PS इस लेख के लेखक अलेक्जेंडर हैं (gmail.com पर balancev), यदि कोई व्यक्ति आमंत्रण साझा करना चाहता है, तो यह समय है।



पीपीएस "आह, उन्होंने एक आमंत्रण !!! 111" के लिए कहा - जंगल के माध्यम से जाओ, अपने "अपने दोस्त को जन्मदिन" या सैंडबॉक्स में कॉपी-पेस्ट के लिए अपने निमंत्रण को बेहतर तरीके से भेजें।