Jquery mobil derslerimize devam ediyoruz.Bu derste
collapsibleyi işleyeceğiz.Collapsibler details tagına benzer.Bir başlık vardır ona tıklayınca içerik gözükür.Örneği inceleyince daha iyi anlarsınız.Şimdi başlayalım.
İndir : http://ustaderslik.com/dosya/Jquery%20Mobil%20Ders-5%20Collapsible.zip
1-Ekleme
Collapsible eklemek için dive
data-role="collapsible" vermemiz yeter.Div içine h ile baslığı belirtiriz.Geri kalanlar ise içerik olur.Örnek :
<div data-role="collapsible">
<h2>Başlık</h2>
İçerik
</div>
Görüntüsü :
Başlığa tıkladığımızda içerik yazısı gözüküyor.Tekrar tıklayınca gizleniyor.
2-Otomatik açık olması
Normalde içerik gizlidir.Biz tıklayınca açılır.Otomatik açık getirmek için dive
data-collapsed="false" vermemiz yeter.Örnek :
<div data-role="collapsible" data-collapsed="false">
<h2>Başlık</h2>
İçerik
</div>
3-Kenarları yok etme
Normalde collapsible 4 tarafında border yani çerçeve var.Sağ ve soldakileri yok edebiliriz.Bunun için dive
data-inset="false" vermemiz yeter.Örnek :
<div data-role="collapsible" data-inset="false">
<h1>Başlık-2</h1>
<div>İçerik</div>
</div>
4-Ovalliği yok etme
Normalde collapsiblenin kenarları ovaldir.Bu ovalliği kaldırmak için dive
data-corners="false" vermemiz yeter.
<div data-role="collapsible" data-corners="false">
<h1>Başlık-3</h1>
<div>İçerik</div>
</div>
5-İcon değiştirme
Collapsible kapalı iken + açık iken - iconu var.Bunu değiştirebiliriz.Kapalı halindeki iconu değiştirmek için data-
collapsed-icon="icon_ismi" açık halini değiştirmek için
data-expanded-icon="icon_ismi" kullanırız.Örnek :
<div data-role="collapsible" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">
<h3>Menü-2</h3>
<p>İçerik-2</p>
</div>
6-Takım yapma
3 tane collapsible eklediğimizi düğünelim.Bunların hepsini div içine alıp,dive de
data-role="collapsibleset" verdiğimizde bunlar takım olur.Yani bir tane açtığımızda diğer açık olanlar kapanır.Ayrıca collapsibleset verdiğiiz divlerde
data-theme="tema" vererek tüm collapsibllelerin temasını değiştirebilir.
data-content-theme="tema" ilede tüm içeriklerin temasını kolaylıkla değiştirebiliriz.Örnek :
<div data-role="collapsibleset">
<div data-role="collapsible">
<h3>Menü-1</h3>
<p>İçerik-1</p>
</div>
<div data-role="collapsible">
<h3>Menü-2</h3>
<p>İçerik-2</p>
</div>
<div data-role="collapsible" >
<h3>Menü-3</h3>
<p>İçerik-3</p>
</div>
</div>
Diğer derslerde gördüğümüz data-iconpos ile iconun pozisyonunu değiştirebiliriz.Yada data-theme ile tek tek tema değiştirebiliriz.data-mini ile daha ufak hala getirebiliriz collapsibleleri.
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;}
</style>
</head>
<body>
<div class="ana">
<div data-role="collapsible" >
<h2>Başlık</h2>
İçerik
</div>
<div data-role="collapsible" data-inset="false">
<h1>Başlık-2</h1>
<div>İçerik</div>
</div>
<div data-role="collapsible" data-corners="false">
<h1>Başlık-3</h1>
<div>İçerik</div>
</div>
<div data-role="collapsible" data-collapsed="false">
<h4>Başlık-4</h4>
<ul data-role="listview">
<li><a href="#">liste-1</a></li>
<li><a href="#">Liste-2</a></li>
<li><a href="#">Liste-3</a></li>
</ul>
</div>
<div data-role="collapsibleset" data-theme="b" data-content-theme="a">
<div data-role="collapsible" data-iconpos="right">
<h3>Menü-1</h3>
<p>İçerik-1</p>
</div>
<div data-role="collapsible" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">
<h3>Menü-2</h3>
<p>İçerik-2</p>
</div>
<div data-role="collapsible" >
<h3>Menü-3</h3>
<p>İçerik-3</p>
</div>
</div>
</div>
</body>
</html>
Görüntüsü :
Örneklerin birinde içerik olarak liste yaptık.Daha anlatmadım onu sonraki derslerde anlatacağım onu.
UstaDerslik
