लेआउट के लिए jPutty, एक jQuery प्लगइन

कार्य

तो इस तरह के डिजाइन के साथ मुझे एक वेबसाइट विकसित करनी थी, मुख्य पृष्ठ को दो बैंडों में विभाजित किया गया है - अंधेरे और प्रकाश। पतली रेखाएं और कुछ प्रमुख तत्व स्वर्ण अनुपात के आधार पर कड़ाई से हैं। और फिर यह मुझे कवर किया ...

जटिल HTML + सीएसएस कोड के साथ सरल काम कर रहे हैं? फिर से, प्रत्येक ब्राउज़र पृष्ठ को अपने तरीके से प्रदर्शित करेगा? क्रॉस-ब्राउज़र के साथ फिर से गड़बड़ करने के लिए? लेखन हैक?

और डेस्कटॉप प्रोग्रामिंग में ऐसी समस्याएं क्यों नहीं हैं? सूत्र के अनुसार तत्व का आकार बदलें - कृपया। बटन को बाईं ओर 17 पिक्सेल पर ले जाएँ - कृपया। खिड़की के आकार पर सख्त निर्भरता में तत्वों की एक मौलिक रूप से अलग व्यवस्था करें - कोई समस्या नहीं! और केवल html + css में ही इस तरह की मुश्किलें आ सकती हैं। एक बार जब मैंने अपने ग्राहक को खो दिया था, जब मैंने "ब्लॉक को थोड़ा अधिक और बाईं ओर ले जाने" के कार्य में देरी की थी ... मुझे पूरे लेआउट को अच्छी तरह से फिर से करना पड़ा, क्योंकि इस तरह के ब्लॉक आंदोलनों के लिए पुरानी संरचना को डिज़ाइन नहीं किया गया था। इस काम की सराहना नहीं की गई, और ठीक है, क्योंकि अंत में मैंने सिर्फ ब्लॉक को धक्का दिया।


यह पर्याप्त है, अब से मैंने लेआउट में यथासंभव जावास्क्रिप्ट का उपयोग करने का निर्णय लिया है। हां, मुझे पता है कि हर किसी में js सक्षम नहीं है। हां, मुझे पता है कि अब बहुत कम लोग ऐसा करते हैं। आंकड़ों के अनुसार, 1% से कम उपयोगकर्ताओं ने जावास्क्रिप्ट बंद कर दिया है! यह बहुत है या थोड़ा है?

jPutty

इस विचार को एक नए jQuery प्लगइन में लागू किया गया था। उन लोगों के लिए, जिन्होंने जावास्क्रिप्ट को बंद कर दिया है, हम जुड़े हुए नियमित सीएसएस-शैली में सबसे सरल टाइपसेटिंग को लागू करते हैं (क्या ऐसे उपयोगकर्ता अधिकतम सादगी के लिए प्रयास कर रहे हैं?)। जावास्क्रिप्ट सक्षम करने वालों के लिए, एक स्क्रिप्ट लॉन्च की जाएगी जो एक विशेष घटना को लागू करती है:

$(window).readyresize(function(width, height) { // using jPutty }); 

पृष्ठ लोडिंग के पूरा होने पर, और ब्राउज़र विंडो के आकार बदलने पर प्रत्येक बाद के समय में "रीडायरीज़" घटना को उठाया जाता है।

प्लगइन वेबसाइट पर विवरण - jputty.ru/getting-started ।

समाधान क्या दिखता है

समय - पृष्ठ के ऊपरी (अंधेरे) के एचटीएमएल-कोड का एक टुकड़ा।
प्रत्येक तत्व एक अलग div ब्लॉक है। कोई रैपर, डिवाइडिंग ब्लॉक या अन्य ट्रिक्स की जरूरत नहीं है।

 <!--  ()   --> <div id="dark"> <!-- Sliderman Endegor's Degustation --> <div id="DegustationNavigation"></div> <div id="Degustation"> <img src="./img/Degustation/cognac.png" width="383" height="600" alt="Degustation cognac" /> <img src="./img/Degustation/riesling.png" width="383" height="600" alt="Degustation riesling" /> <img src="./img/Degustation/bourgogne.png" width="383" height="600" alt="Degustation bourgogne" /> <img src="./img/Degustation/bordeaux.png" width="383" height="600" alt="Degustation bordeaux" /> <img src="./img/Degustation/champagne.png" width="383" height="600" alt="Degustation champagne" /> <img src="./img/Degustation/martini.png" width="383" height="600" alt="Degustation martini" /> </div> <!-- /Sliderman Endegor's Degustation --> <div class="delivery_text">  </div> <a href="#"> <div class="shop_wine"></div> <div class="shop_wine_text"></div> </a> <a href="#"> <div class="shop_cognac"></div> <div class="shop_cognac_text"></div> </a> <a href="#"> <div class="shop_armagnac"></div> <div class="shop_armagnac_text"></div> </a> <div class="JJB"></div> <div class="line"></div> </div> <!-- / ()   --> 

दो - सीएसएस कोड का संगत टुकड़ा।
ग्रंथों के ब्लॉक के लिए हम फ़ॉन्ट सेट करते हैं, चित्रों के ब्लॉक के लिए हम पृष्ठभूमि सेट करते हैं।

 #dark { background-color: #000; color: #f0f0f0; z-index: -10; } #dark .delivery_text { text-align: right; font-size: 12pt; } #dark .shop_wine { background-image: url(../img/shop/wine.png); } #dark .shop_wine_text { text-align: center; } #dark .shop_cognac { background-image: url(../img/shop/cognac.png); } #dark .shop_cognac_text { text-align: center; } #dark .shop_armagnac { background-image: url(../img/shop/armagnac.png); } #dark .shop_armagnac_text { text-align: center; } #dark .JJB { background-image: url("../img/Jean Jacques Brissot.png"); } #dark .line { background-color: #fff; z-index: -10; } 

और तीन! Js कोड का स्निपेट।
ब्राउज़र के आकार (चौड़ाई और ऊंचाई) के आधार पर प्रत्येक ब्लॉक का स्थान निर्दिष्ट करें।

 $(window).readyresize(function(width, height) { ... var dy = (height - 600) / 1.618 + 35; $('#dark').putty('xysize', 0, 0, width, height); $('#dark #Degustation').putty('xysize', 0, dy - 35 - 1, 383, 600); $('#dark #DegustationNavigation').putty('xysize', 0, dy - 35, 20, 600); $("#dark #DegustationNavigation a").each(function (i) { $(this).putty('xysize', 25, 10 + 25 * i, 11, 11); }); $('#dark .delivery_text').putty('xysize', 0, 5, width - 50, 30); $('#dark .shop_wine').putty('xysize', (width - width / 1.618) - 48 / 2, dy, 48, 174); $('#dark .shop_wine_text').putty('xysize', (width - width / 1.618) - 100, dy + 174, 200, 36); $('#dark .shop_cognac').putty('xysize', (width / 1.618) - 68 / 2, dy + 174 - 139, 68, 139); $('#dark .shop_cognac_text').putty('xysize', (width / 1.618) - 100, dy + 174, 200, 36); $('#dark .shop_armagnac').putty('xysize', (3*width / 1.618 - width) - 36 / 2, dy + 174 - 172, 36, 172); $('#dark .shop_armagnac_text').putty('xysize', (3*width / 1.618 - width) - 100, dy + 174, 200, 36); $('#dark .JJB').putty('xysize', 383, height / 1.618 - 76, 768, 76); $('#dark .line').putty('xysize', 0, height / 1.618, width, 1); ... }); 

पोटीन () फ़ंक्शन x, y, चौड़ाई और ऊंचाई मापदंडों को लेता है और उन्हें css गुणों के माध्यम से ब्लॉक में सेट करता है। इस प्रकार, जावास्क्रिप्ट भाषा की सभी विशेषताओं का उपयोग करके ब्लॉकों की स्थिति को गतिशील रूप से सेट किया जा सकता है।

लिंक और स्रोत

JPutty plugin site - jputty.ru
डेमो: brissot.biz
डेमो साइट के स्रोत: data.brissot.biz/jjb.rar