Gridster

Gridster web sitenizdeki çerçevelere grid düzeni sağlamakla beraber bu çerçeveler sürükle bırak özelliği sayesinde yer değiştirebilme özelliği de ekliyor. Gridster’in eksik kalan yanı yer değiştirdiğiniz elemanların otomatik olarak boyut değiştirememeleridir. Aynı yap-boz şeklinde bir elemanı tutup diğer elemanın yerine koyabiliyorsunuz. Javier Sánchez’in yapmış olduğu bir çalışma

Kullanım

• Head  etiketleri arasına eklenmesi  gereken bölümler.

Js ve stil dosyaları : 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="jquery.gridster.min.js" type="text/javascript" charset="utf-8"></script>
<link href="jquery.gridster.css" rel="stylesheet" type="text/css" media="all">

JavaScript : 

	<script type="text/javascript">
  var gridster;

  $(function(){

    gridster = $(".gridster ul").gridster({
        widget_margins: [10, 10],
        widget_base_dimensions: [140, 140],
        min_cols: 6
    }).data('gridster');

  });
</script>

•  Body  etiketleri  arasına eklenmesi gereken bölüm.

Html :

	<div class="gridster">
		<ul>
			<li data-row="1" data-col="1" data-sizex="2" data-sizey="1"></li>
			<li data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li>
			<li data-row="3" data-col="2" data-sizex="2" data-sizey="1"></li>
			<li data-row="1" data-col="2" data-sizex="2" data-sizey="2"></li>
			<li class="try" data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li>
			<li data-row="2" data-col="4" data-sizex="2" data-sizey="1"></li>
			<li data-row="3" data-col="4" data-sizex="1" data-sizey="1"></li>
			<li data-row="1" data-col="5" data-sizex="1" data-sizey="1"></li>
			<li data-row="3" data-col="5" data-sizex="1" data-sizey="1"></li>
			<li data-row="1" data-col="6" data-sizex="1" data-sizey="1"></li>
			<li data-row="2" data-col="6" data-sizex="1" data-sizey="2"></li>
		</ul>
	</div>