Jquery mobil derslerimize devam ediyoruz.Bu derste
listview yani listeleri işleyeceğiz.Bu listeler ul veya ol olabilir.Ol listelerde kendi otomatik sayı numarası veriyor.Anlatırken genel ul diyeceğim ama bunların hepsi ollarda da kullanılır.
İndir : http://ustaderslik.com/dosya/Jquery%20Mobil%20Ders-6%20Listeler%20-%20Listview.zip
1-Liste ekleme
Il-li veya ol-li ile listelerimizi koyduktan sonra ol veya ul a
data-role="listview" verirseniz liste olur o.Li lerin içinde a tagını kullanırsanız sağda ikon çıkar.Örnek :
<ul data-role="listview">
<li>Alan-1</li>
<li>Alan-2</li>
<li>Alan-3</li>
</ul>
2-Kenarlar ve Ovallik
Listelerin sağında ve solunda otomatik kenarları yani borderı yoktur.Ul a
data-inset="true" vererek border gelmesini ve oval olmasını sağlayabiliriz.Örnek :
<ul data-role="listview" data-inset="true">
<li><a href="#">Alan-1</a></li>
<li><a href="#">Alan-2</a></li>
<li><a href="#">Alan-3</a></li>
</ul>
3-Arama kutusu
Listelerin en üstüne bir arama kutusu getirerek liste içinde arama yaptırabiliriz.Bunun için ula
data-filter="true" vermemiz yeter.Arama kutusundaki yazıyı değiştirmek için
data-filter-placeholder="metin" ula vermemiz gerek.Örnek :
<ol data-role="listview" data-filter="true" data-filter-placeholder="alan-1 yazın..." >
<li><a href="#">Alan-1</a></li>
<li><a href="#">Alan-2</a></li>
<li><a href="#">Alan-3</a></li>
</ol>
4-Otomatik tamamlama
Üste arama kutusunu koydurduk.Ek bir parametre daha ekleyerek tüm listeyi gizleyip sadece arama kutusunun gözükmesini sağlayabiliriz.Bunun için ula
data-filter-reveal="true" vermemiz yeterli.Bu şekilde listedeki bir isim tam yazıldığında o gözükecek.Örnek :
<ol data-role="listview" data-filter="true" data-filter-placeholder="alan-1 yazın..." data-filter-reveal="true">
<li><a href="#">Alan-1</a></li>
<li><a href="#">Alan-2</a></li>
<li><a href="#">Alan-3</a></li>
</ol>
5-Başlık
Lilerden basılarına
data-role="list-divider" vererek onların başlık olmasını sağlayabilirsiniz.Bu başlıkların temasını değiştirmek için ise ula
data-divider-theme="tema_ismi" vermemiz yeterli.Örnek :
<ul data-role="listview" data-divider-theme="b">
<li data-role="list-divider">Başlık</li>
<li><a href="#">Alan-2</a></li>
<li><a href="#">Alan-3</a></li>
</ul>
6-Miktar ekleme
Lilerin içinde
<span class="ui-li-count">Miktar</span> koyarak sağda iconun yanında ister bir yazı veya bir sayı gösterebilirsiniz.Bu genelde içerik sayısı için kullanılır.Örnek :
<ul data-role="listview">
<li><a href="#">Alan-1</a></li>
<li><a href="#">Alan-2 <span class="ui-li-count">15</span> </a></li>
<li><a href="#">Alan-3</a></li>
<li><a href="#">Balan-4 <span class="ui-li-count">155</span> </a></li>
</ul>
7-Büyük listeler
Listelerin içine bir tane resim,h tagları içinde metin ve p,span gibi inline içinde bir metin girerseniz kendisi otomatik şekil alacak.Güzel görünümlü büyük bir liste olacak.Örnek :
<ul data-role="listview" data-split-icon="delete" data-split-theme="b">
<li><a href="#"><img src="images/a.png" /><h1>Alan-1</h1><span>Açıklama-1</span></a></li>
<li><a href="#"><img src="images/a.png" /><h1>Alan-2</h1><span>Açıklama-2</span></a></li>
<li><a href="#"><img src="images/a.png" /><h1>Alan-3</h1><span>Açıklama-3</span></a></li>
</ul>
8-Diğerleri
Data-icon ile icon atayabiliriz.Li lere
data-theme ile temalarını değiştirebiliriz.Liler içinde
form elemanlarını koyup düzenli şekilde görünmesini sağlayabilirsiniz.Geçen derste gördüğümüz
collapsible ler içinde bu listeleri kullanabilirsiniz.
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/index.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;}
</style>
</head>
<body>
<div class="ana">
<ul data-role="listview">
<li>Alan-1</li>
<li>Alan-2</li>
<li>Alan-3</li>
</ul>
<br />
<ul data-role="listview" data-inset="true">
<li><a href="#">Alan-1</a></li>
<li><a href="#">Alan-2</a></li>
<li><a href="#">Alan-3</a></li>
</ul>
<br />
<ol data-role="listview" data-filter="true" data-filter-placeholder="alan-1 yazın..." data-filter-reveal="true">
<li><a href="#">Alan-1</a></li>
<li><a href="#">Alan-2</a></li>
<li><a href="#">Alan-3</a></li>
</ol>
<br />
<ul data-role="listview" data-divider-theme="b">
<li data-role="list-divider">Başlık</li>
<li><a href="#">Alan-2</a></li>
<li><a href="#">Alan-3</a></li>
</ul>
<br />
<ul data-role="listview">
<li data-icon="home"><a href="#">Alan-1</a></li>
<li><a href="#">Alan-2 <span class="ui-li-count">15</span> </a></li>
<li data-icon="gear"><a href="#">Alan-3</a></li>
<li><a href="#">Balan-4 <span class="ui-li-count">155</span> </a></li>
</ul>
<br />
<ul data-role="listview" data-split-icon="delete" data-split-theme="b">
<li><a href="#"><img src="images/a.png" /><h1>Alan-1</h1><span>Açıklama-1</span></a></li>
<li><a href="#"><img src="images/a.png" /><h1>Alan-2</h1><span>Açıklama-2</span></a></li>
<li><a href="#"><img src="images/a.png" /><h1>Alan-3</h1><span>Açıklama-3</span></a></li>
</ul>
</div>
</body>
</html>
Görüntüsü :
UstaDerslik
