Jquery Mobil Ders-6 Listeler - Listview
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

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

Jquery Mobil Ders-6 Listeler - Listview

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(1814)
RAPOR ET
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ü :
http://ustaderslik.com/resim/ders/j8ynhj5h4j.png



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