Jquery Mobil Ders-8 Grid Sistemi
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

Jquery Mobil Ders-8 Grid Sistemi

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(5581)
RAPOR ET
Jquery mobil eğitim serimize devam ediyoruz.Bu derste grid yani ızgara sistemini anlatacağım.Grid sistemi bize 2-3-4-5 li olmak üzere yan yana alanlar sağlıyor.Grid sisteminde a,b,c,d olmak üzere 4 tane sistem var.
ui-grid-a=2
ui-grid-b=3
ui-grid-c=4
ui-grid-d=5


Kullanımları dive ui-grid-a calssını veriyoruz ve içine div ekleyip classlarına ui-block-a ,b,c şeklinde vererek ilerliyoruz.Kaça kadar gidebildiklerini yukarıda yazdım.Aşağıda daha iyi anlarsınız.

İndir : http://ustaderslik.com/dosya/Jquery%20Mobil%20Ders-8%20Grid%20Sistemi.zip

1-ui-grid-a


<div class="ui-grid-a">
<div class="ui-block-a"> <div class="alan">Alan-1</div> </div>
<div class="ui-block-b"> <div class="alan">Alan-2</div> </div>
</div>


1-ui-grid-b


<div class="ui-grid-b">
<div class="ui-block-a"> <div class="alan">Alan-1</div> </div>
<div class="ui-block-b"> <div class="alan">Alan-2</div> </div>
<div class="ui-block-c"> <div class="alan">Alan-3</div> </div>
</div>


1-ui-grid-c


<div class="ui-grid-c">
<div class="ui-block-a"> <div class="alan">Alan-1</div> </div>
<div class="ui-block-b"> <div class="alan">Alan-2</div> </div>
<div class="ui-block-c"> <div class="alan">Alan-3</div> </div>
<div class="ui-block-d"> <div class="alan">Alan-4</div> </div>
</div>


1-ui-grid-d


<div class="ui-grid-d">
<div class="ui-block-a"> <div class="alan">Alan-1</div> </div>
<div class="ui-block-b"> <div class="alan">Alan-2</div> </div>
<div class="ui-block-c"> <div class="alan">Alan-3</div> </div>
<div class="ui-block-d"> <div class="alan">Alan-4</div> </div>
<div class="ui-block-e"> <div class="alan">Alan-5</div> </div>
</div>


Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.2.min.js"></script>
<style type="text/css">
.ana{width:960px;margin:auto;}
.alan{background:#f1f1f1;padding:15px;text-align:center;border:1px solid #ddd;}
</style>
</head>
<body>

<div class="ana">

<div class="ui-grid-a">
<div class="ui-block-a"> <div class="alan">Alan-1</div> </div>
<div class="ui-block-b"> <div class="alan">Alan-2</div> </div>
</div>

<div class="ui-grid-b">
<div class="ui-block-a"> <div class="alan">Alan-1</div> </div>
<div class="ui-block-b"> <div class="alan">Alan-2</div> </div>
<div class="ui-block-c"> <div class="alan">Alan-3</div> </div>
</div>

<div class="ui-grid-c">
<div class="ui-block-a"> <div class="alan">Alan-1</div> </div>
<div class="ui-block-b"> <div class="alan">Alan-2</div> </div>
<div class="ui-block-c"> <div class="alan">Alan-3</div> </div>
<div class="ui-block-d"> <div class="alan">Alan-4</div> </div>
</div>

<div class="ui-grid-d">
<div class="ui-block-a"> <div class="alan">Alan-1</div> </div>
<div class="ui-block-b"> <div class="alan">Alan-2</div> </div>
<div class="ui-block-c"> <div class="alan">Alan-3</div> </div>
<div class="ui-block-d"> <div class="alan">Alan-4</div> </div>
<div class="ui-block-e"> <div class="alan">Alan-5</div> </div>
</div>

<br /><br />

<div class="ui-grid-d">
<div class="ui-block-a"> <div class="alan">Alan-1</div> </div>
<div class="ui-block-b"> <div class="alan">Alan-2</div> </div>
<div class="ui-block-c"> <div class="alan">Alan-3</div> </div>
<div class="ui-block-d"> <div class="alan">Alan-4</div> </div>
<div class="ui-block-e"> <div class="alan">Alan-5</div> </div>
<div class="ui-block-a"> <div class="alan">Alan-1</div> </div>
<div class="ui-block-b"> <div class="alan">Alan-2</div> </div>
<div class="ui-block-c"> <div class="alan">Alan-3</div> </div>
<div class="ui-block-d"> <div class="alan">Alan-4</div> </div>
<div class="ui-block-e"> <div class="alan">Alan-5</div> </div>
<div class="ui-block-a"> <div class="alan">Alan-1</div> </div>
<div class="ui-block-b"> <div class="alan">Alan-2</div> </div>
<div class="ui-block-c"> <div class="alan">Alan-3</div> </div>
<div class="ui-block-d"> <div class="alan">Alan-4</div> </div>
<div class="ui-block-e"> <div class="alan">Alan-5</div> </div>
</div>

</div>

</body>
</html>

Görüntüsü :
http://ustaderslik.com/resim/ders/ffyhjghb.png
Gördüğünüz gibi grid sistemi bu şekilde.Grid ile kendinize alanlar sağladıktan sonra içine istediğiniz şeyi koyabilirsiniz.En sonda tekrar eden blocklar şeklinde de kullanabilirsiniz.



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol