Gridster

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>

 

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2021-04-06 tarihinde yayınlandı,Toplam 1662 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(Yorum yapılmamış)
Yükleniyor...