Bu yazımızda, jQuery ile pencere boyutlandırma olayından bahsedeceğiz, "resize()" pencere yeniden boyutlandırıldığında tetiklenen bir olaydır.
Bu olay tetikleyici, sayfa boyutuna göre şekillenecek bir durum söz konusuysa işinize yarayabilir.
Konu ile ilgili basit bir uygulama yapacağız, bu uygulamadaki amaç, pencere boyutlandırma olayının nasıl çalıştığını görmek.
Olay Fonksiyonları- Tarayıcı Olayları:
- .error() //Nesne hata verdiğinde çalışır.
- .resize() //Nesnenin eni ve boyu değiştirildiğinde çalışır.
- .scroll() //Nesne scroll edildiğinde çalışır.
Uygulama:
Farzedelim 960px genişliğinde bir sayfa tasarladınız, bu durumda pencere küçültüldüğünde oluşturduğunuz alanın durumu değişmez (Akışkan (Liquid) tasarım yapmadıysanız tabii). Fakat biz istiyoruz ki pencere küçültüldüğünde bu katmanımız (İsterseniz içindeki tüm katmanlar) bu olaya cevap versin (Responsive layout) ve ona göre şekil alsın.
Not: Responsive Layout tasarımın mantığı da benzerdir, fakat o uygulamalarda başka teknikler de kullanılmaktadır (O tekniklerle IE9 öncesi IE tarayıcılarda sonuç elde edemeyebilirsiniz fakat aşağıdaki yöntemle bunun üstesinden gelebilirsiniz).
Uygulama: Pencereyi küçültüğünüzde, birinci alanın genişliğinin değişmediğini, fakat ikinci alanın genişlik değerinin pencere küçülme oranında değiştiğini göreceksiniz.
"#report" id'li katmanda da pencerenin değişen genişlik değerleri yer alacaktır.
BİRİNCİ ALAN: Bu alan anasayfamız olsun (Normal şartlarda bunu sayfa dizayn ederken ana katmanınız olarak düşünüp değerinin 960px ve üzerinde olduğunu varsayıyoruz).
İKİNCİ ALAN: Bu da ikinci anasayfa alanımız, bu alan pencere küçüldükçe o oranda küçülecektir (Normal şartlarda bu sayfayı da dizayn ederken ana katmanınız olarak düşünüp değerinin 960px ve üzerinde olduğunu varsayıyoruz).
Pencere Genişlik:
CSS yapısı:
#anasayfa{
width:680px;
border:1px solid #ff0000;
margin-bottom:20px;
background:#ccc;
}
#anasayfa2{
width:680px;
border:1px solid #ff0000;
background:#ccc;
}
HTML yapısı:
<div id="anasayfa">
<p>BİRİNCİ ALAN: Bu alan anasayfamız olsun <mark>(Normal şartlarda bunu sayfa dizayn ederken ana katmanınız olarak düşünüp değerinin 960px ve üzerinde olduğunu varsayıyoruz)</mark>.</p>
</div>
<div id="anasayfa2">
<p>İKİNCİ ALAN: Bu da ikinci anasayfa alanımız, bu alan pencere küçüldükçe o oranda küçülecektir <mark>(Normal şartlarda bu sayfayı da dizayn ederken ana katmanınız olarak düşünüp değerinin 960px ve üzerinde olduğunu varsayıyoruz)</mark>.</p>
</div>
<div id="report"><strong>Pencere Genişlik:</strong><span></span></div>
JQuery yapısı:
<script type="text/javascript">
$(document).ready(function(){
//Pencerenin şu anki genişlik değeri
//IE9 öncesi IE Tarayıcılarda $(window).width() problem
//çıkardığı için 'body' seçtim duruma göre ayar yapmanız gerekebilir
var cur_width=parseInt($('body').width());
//Değişecek katmanımızın geçerli genişlik değeri
var cur_layer_width=parseInt($("#anasayfa").css('width'));
//Pencere boyutlandırılınca tetiklenecek olay
$(window).resize(function(){
//Değişen pencere genişlik değeri
var win_change=parseInt($('body').width());
//Pencere küçülme oranı
var rate=win_change/cur_width;
//Katmanın alacağı genişlik değeri
var layer_rate=parseInt((cur_layer_width)*rate);
//"#anasayfa2" id'li katmanımızın yeni genişlik(width) değeri
$("#anasayfa2").css('width',layer_rate);
//"#report" id'li alanda yer alacak
//değişen pencere genişlik değerleri
$("#report span").html($('body').width());
});
});
</script>
Açıklamalar:
Gerekli açıklamaları kodların üzerinde belirtmeye çalıştım, çok ekstra bir durum da olmadığı için ayrıntılı bir açıklama yapmadım, sadece bazı değerlere "parseInt()" uygulayarak tamsayı elde ettiğimize dikkat edebilirsiniz (Bazı değerlerin sonucu "px" olarak verilebilir Ör: 640px bu durumlarda "parseInt()" ile bu ibare içindeki "640" sayısını elde edebiliriz).
Kolay gelsin, görüşmek üzere...
