Jquery Mobil Ders-5 Collapsible

Anasayfa

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>