JQuery ile fluid grid oluşturmak
Okunma Sayısı : 113
Bir web sayfasına magazin/gazete görünümünde gird oluşturmak JQuery ile çok basit bir şekilde olmaktadır. Aşağıda kullanılan yöntem ve fonksiyonlar çok basit olması nedeniyle bir çok kişi tarafından rahatlıkla uygulanabilir. Bunları adımlayarak yapacak olursak:
1- Basit bir html sayfası oluşturalım:
<html>
<head>
<title>Fluid grid</title>
<script type="text/javascript" src="script/jquery-1.3.2.min.js"></script>
</head>
<body>
<div class="box"><p><span>01</span>01 Numaralı kutu...</p></div>
<div class="box alt"><p><span>02</span>02 Numaralı kutu...</p></div>
<div class="box"><p><span>03</span>03 Numaralı kutu...</p></div>
<div class="box alt"><p><span>04</span>04 Numaralı kutu...</p></div>
<div class="box"><p><span>05</span>05 Numaralı kutu...</p></div>
<div class="box alt"><p><span>06</span>06 Numaralı kutu...</p></div>
<div class="box"><p><span>07</span>07 Numaralı kutu...</p></div>
<div class="box alt"><p><span>08</span>08 Numaralı kutu...</p></div>
<div class="box"><p><span>09</span>09 Numaralı kutu...</p></div>
</body>
</html>
burada kullanılan divlerin sayısı artırılabilir ve içeriği makale olabilir, nesne olabilir, yazı olabilir.
2- Oluşturduğumuz html dosyamıza stil verelim:
<style type="text/css">
body {
position: relative;
width: 100%;
}
.box {
background-color: #F0F0F0;
color: #888;
font-family: Arial, Tahoma, serif;
font-size: 13px;
}
.box p {
padding: 10px;
}
.box span {
float: left;
font-size: 26px;
font-weight: bold;
}
div.alt {
background-color: #CCC;
}
</style>
sayfamıza stil verdikten sonra görünümü aşağıdaki şekilde olacaktır.
3- bu adımda ise Javascript işlemleri yapıyoruz:
<script type="text/javascript">
var myFluidGrid = {
COLNUMBER : 2, // Minimum sutun sayısı.
COLMARGIN : 10, // Yanındaki sutunla arasındaki mesafe
COLWIDTH : 240 // Butun sutunlara standart boyut veriyoruz
};
</script>
Gerekli özellikleride tanımladıktan sonra bütün kutuların üst pozisyonlarını hesaplamamız gerekiyor çünkü her kutunun boyu farklı olabilir içerdiği bilgiye göre, onun içinde aşağıdaki işlemleri yapıyoruz.
doLayout : function() {
var self = this;
var pointer = 0;
var arr = [];
var columns = Math.max(this.COLNUMBER, parseInt($('body').innerWidth() / (this.COLWIDTH + this.COLMARGIN)));
$('.box').css('position', 'absolute').css('width', this.COLWIDTH + 'px');
$('.box').each(function() {
var tempLeft = (pointer * (self.COLWIDTH + self.COLMARGIN));
$(this).css('left', tempLeft + 'px');
var tempTop = 0;
if (arr[pointer]) { tempTop = arr[pointer]; }
$(this).css('top', tempTop + 'px');
arr[pointer] = tempTop + $(this).outerHeight() + self.COLMARGIN;
pointer++;
if (pointer === columns) { pointer = 0; }
});
}
4- Son olarak JQuery ile gridlerimizi oluşturuyoruz:
$(window).ready(function() {
myFluidGrid.doLayout();
}).resize(function() {
myFluidGrid.doLayout();
});
Bütün bu işlemleri yaptıktan sonra sayfamızın görüntüsü aşağıdaki şekilde olacaktır.
Yapılan tüm işemleri bütün halinde aşağıda görebilirsiniz:
<html>
<head>
<title>Fluid grid</title>
<link rel="stylesheet" type="text/css" href="style/reset.css" />
<style type="text/css">
body {
position: relative;
width: 100%;
}
.box {
background-color: #F0F0F0;
color: #888;
font-family: Arial, Tahoma, serif;
font-size: 13px;
}
.box p {
padding: 10px;
}
.box span {
float: left;
font-size: 26px;
font-weight: bold;
}
div.alt {
background-color: #CCC;
}
</style>
<script type="text/javascript" src="script/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
var myFluidGrid = {
COLNUMBER : 2, // Minimum sutun sayısı.
COLMARGIN : 10, // Yanındaki sutunla arasındaki mesafe
COLWIDTH : 240 // Sutunlara standart boyut veriyoruz
doLayout : function() {
var self = this;
var pointer = 0;
var arr = [];
var columns = Math.max(this.COLNUMBER, parseInt($('body').innerWidth() / (this.COLWIDTH + this.COLMARGIN)));
$('.box').css('position', 'absolute').css('width', this.COLWIDTH + 'px');
$('.box').each(function() {
var tempLeft = (pointer * (self.COLWIDTH + self.COLMARGIN));
$(this).css('left', tempLeft + 'px');
var tempTop = 0;
if (arr[pointer]) { tempTop = arr[pointer]; }
$(this).css('top', tempTop + 'px');
arr[pointer] = tempTop + $(this).outerHeight() + self.COLMARGIN;
pointer++;
if (pointer === columns) { pointer = 0; }
});
}
};
$(window).ready(function() {
myFluidGrid.doLayout();
}).resize(function() {
myFluidGrid.doLayout();
});
</script>
</head>
<body>
<div class="box"><p><span>01</span>01 Numaralı kutu...</p></div>
<div class="box alt"><p><span>02</span>02 Numaralı kutu...</p></div>
<div class="box"><p><span>03</span>03 Numaralı kutu...</p></div>
<div class="box alt"><p><span>04</span>04 Numaralı kutu...</p></div>
<div class="box"><p><span>05</span>05 Numaralı kutu...</p></div>
<div class="box alt"><p><span>06</span>06 Numaralı kutu...</p></div>
<div class="box"><p><span>07</span>07 Numaralı kutu...</p></div>
<div class="box alt"><p><span>08</span>08 Numaralı kutu...</p></div>
<div class="box"><p><span>09</span>09 Numaralı kutu...</p></div>
</body>
</html>
