| İçindekiler |
|
| Oyun bir döngü oluşturma | HTML genişletme |
Duyarlı düzenleri
Bu öğreticide, JavaScript kullanarak duyarlı düzenleri oluşturmak gösterilmiştir. İki kutu kitaplığa ekleyebilirsiniz. Bir yeşil ve kırmızı bir tane yapın. Bu kutuları sadece örnektir. Şekilleri veya nesneleri kullanılabilir.
Kutuları düzenleyicisine ekleyin.
Sol ve sağ taraf dolduruyorlar kutuları yerleştir. Onları etrafına kenarlık bırakın.
Bu şimdi bir web sayfası sol ve sağ tarafta bulunan bir örnektir. Masaüstü web tarayıcısı veya telefon manzara modunda iyi bakacağız. Ne yazık ki, bu düzeni de portre modunda çalışmaz. Ya, iki kutu sığacak şekilde küçük veya genişletilmiş ekranı kaplayacak şekilde shrunk ve kutuları kenarları kesilmiş.
Bu durum duyarlı düzenleri nerede ihtiyaç vardır. Portre modunda, bir kutu diğer taşımanız gerekir. Bunu yapmak için JavaScript kullanarak kutuları hareket etmeliyiz. Bu dönme uzakta anlamına gelir 'Zaman çizelgesi kullanma' kutuları ve ayarı için bir 'Komut dosyası kimliği'.
Film sınırları dışında kutularını taşımak için klip film özellikleri kapatmanız gerekir.
Kutularını düzenlemek için en iyi yer 'Üzerinde yeniden boyutlandırma' film olay.
İhtiyacımız işlevleri GetLeft, GetTop, GetWidth ve GetHeight. Bu işlevler, web tarayıcı veya aygıt film koordinatlarını kullanarak sınırları verin. Küçük resim açıldığında, bu değerleri film sınırları döndürür. 'Hiçbiri' kullanıyorsanız, film ölçek, GetLeft ve GetTop her zaman 0 döndürür ve yok sayılabilir.
İlk iki kutu Yerleştir bir taraftaki doldurur ve diğer taraftaki doldurur sağlar.
BoxB.SetBounds(GetLeft()+(GetWidth()/2),GetTop(),GetWidth()/2,GetHeight());
Sonra bir kenarlık boyutu 10 ekleyeceksiniz. Bu değer 10 piksel cinsinden olmak zorunda değildir, film aynı ölçekte. Kullanım film ölçeği 'None' piksel cinsinden olması her şeyi.
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);
Son olarak web tarayıcı veya aygıt genişliği yüksekliği daha az olup olmadığını görmek için test edecek. Böyle olunca, kutuları dikey olarak yeniden düzenleyin.
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);
}
Şimdi görebilirsiniz oyuncu yeniden boyutlandırırsanız, iki kutu kendilerini otomatik olarak ayarlayacaktır. Bu iki kutu, kolayca diğer şekiller ve nesneler ile değiştirilebilir. Bu örnek daha karmaþýk sayfa düzenleri işlemek için genişletilebilir.
| Oyun bir döngü oluşturma | HTML genişletme |