Ali @mintik
6 Nisan 2021 2:01

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>

 

Bu Yazıyı Paylaş

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

ÜYE GİRİŞİ

Arkadaş ekleme, özel mesaj, kişisel yazı paylaşmak için siteye giriş yapın

Şifremi unuttum? Kayıt Ol!
  • Ali:

    Pardon Yuyyu olacaktı...

  • Ali:

    Tamam yuyu da olsun :)...

  • Arkadaşlık Uygulaması:

    Yuyyu Online Arkadaşlık Sitesi – Sohbet Et ve Yeni İnsanlarla Tanış Yuy...

  • Ali:

    Üşenmeden web arşivi linkini arayıp bulmuşsun teşekkürler :)...

  • ibrahim:

    türkiyeden de bırakan olmuş oyunu. dünya geneli de bırakan epey olmuş. wi...

  • Araç çubuğuna atla