| सामग्री |
|
| एक खेल पाश का निर्माण | HTML का विस्तार |
उत्तरदायी लेआउट
इस ट्यूटोरियल दर्शाता है कि कैसे संवेदनशील लेआउट्स जावास्क्रिप्ट का उपयोग कर बनाने के लिए। दो बक्से लायब्रेरी में जोड़ें। एक लाल और एक हरी बनाते हैं। ये बक्से केवल उदाहरण हैं। किसी भी आकृतियाँ या ऑब्जेक्ट्स इस्तेमाल किया जा सकता है।
बक्से में संपादक को जोड़ें।
तो वे भरने के बाएँ और दाएँ हाथ पक्ष बॉक्सेस, की व्यवस्था। उन्हें चारों ओर एक सीमा छोड़ दो।
अब यह बाएँ और दाएँ हाथ पक्ष पर सामग्री के साथ एक वेब पृष्ठ का एक उदाहरण है। यह एक डेस्कटॉप वेब ब्राउज़र या परिदृश्य मोड में एक फोन पर ठीक लगेगा। दुर्भाग्य से, इस लेआउट चित्र के रूप में अच्छी तरह से काम नहीं करेगा। या तो, दो बक्से फिट करने के लिए छोटी है, या विस्तारित स्क्रीन को भरने के लिए shrunk हो जाना चाहिए, और बक्से के पक्षों में कटौती।
इस स्थिति में है जहाँ उत्तरदायी लेआउट्स की जरूरत हैं। पोर्ट्रेट मोड में, एक बॉक्स के ऊपर अन्य चाल करना चाहिए। ऐसा करने के लिए, हम जावास्क्रिप्ट का उपयोग कर बक्से ले जाने के लिए की जरूरत है। इस का मतलब है बंद टर्निंग 'समय रेखा का उपयोग करें' दोनों बक्सों और स्थापित करने के लिए एक 'स्क्रिप्ट ID'.
फिल्म की सीमा के बाहर बक्से ले जाएँ आदेश के लिए, हम क्लिप में चलचित्र गुण को बंद करें करने के लिए की जरूरत है।
बक्से की व्यवस्था के लिए सबसे अच्छी जगह में है 'आकार बदलने पर' फिल्म समारोह।
जरूरत है हम कार्य कर रहे हैं GetLeft, GetTop, GetWidth और GetHeight. इन कार्यों के वेब ब्राउज़र या फिल्म के निर्देशांक का उपयोग कर डिवाइस की सीमा दे। जब क्लिप चालू है, ये मान फिल्म की सीमा पर लौटने। यदि आप 'कोई नहीं' का उपयोग कर रहे हैं फिल्म स्केल, GetLeft और GetTop हमेशा 0 वापसी करेंगे और अनदेखा किया जा सकता।
पहले दो बक्से की व्यवस्था तो एक बाएँ हाथ की ओर भरता और अन्य दाएँ हाथ की ओर भरता देता है।
BoxB.SetBounds(GetLeft()+(GetWidth()/2),GetTop(),GetWidth()/2,GetHeight());
अगला, हम एक सीमा आकार 10 के जोड़ देगा। यह मान 10 का नहीं पिक्सल में जरूरी है, यह फिल्म का एक ही पैमाने में है। उपयोग फिल्म 'कोई नहीं' सब कुछ पिक्सेल होना करने के लिए स्केल।
BoxA.SetBounds(GetLeft()+Border,GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
BoxB.SetBounds(GetLeft()+(GetWidth()/2)+(Border/2),GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
अंत में हम यदि वेब ब्राउज़र या डिवाइस की चौड़ाई ऊंचाई से कम है को देखने के लिए परीक्षण होगा। जब ऐसा होता है, ऊर्ध्व बक्से पुनर्व्यवस्थित करें।
if(GetWidth()<GetHeight()){
BoxA.SetBounds(GetLeft()+Border,GetTop()+Border,(GetWidth())-Border-Border,(GetHeight()/2)-Border-(Border/2));
BoxB.SetBounds(GetLeft()+Border,GetTop()+(GetHeight()/2)+(Border/2),GetWidth()-Border-Border,(GetHeight()/2)-Border-(Border/2));
}else{
BoxA.SetBounds(GetLeft()+Border,GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
BoxB.SetBounds(GetLeft()+(GetWidth()/2)+(Border/2),GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
}
अब आप देख सकते हैं, अगर आप प्लेयर का आकार बदलें, तब खुद को दो बक्से स्वतः की व्यवस्था करेंगे। इन दो बक्से आसानी से अन्य आकृतियों और ऑब्जेक्ट्स के साथ प्रतिस्थापित किया जा सकता। इस उदाहरण के और अधिक जटिल लेआउट को संभाल करने के लिए विस्तारित किया जा सकता।
| एक खेल पाश का निर्माण | HTML का विस्तार |