Jquery Mobil Ders-5 Collapsible
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-5 Collapsible

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

Örneklerin birinde içerik olarak liste yaptık.Daha anlatmadım onu sonraki derslerde anlatacağım onu.



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