Jquery Mobil derslerimize devam ediyoruz.Bu derste
paneli anlatacağım.Panel sayfanın sağından veya solundan çıkarak sayfayı ittirerek veya üzerine açılan ek bir kısım oluyor.Örneği inceleyince daha iyi anlarsınız.Şimdi komutlara geçelim.
İndir : http://ustaderslik.com/dosya/Jquery%20Mobil%20Ders-15%20Panel.zip
1-Panel ekleme
Öncelikle page-main yapılarını kullanarak bir sayfa oluşturuyoruz.Daha önce anlatmıştım.Daha sonra pagenin dışına bir div oluşturup
data-role="panel" vererek panelimizi oluşturuyoruz.Bu panele bir id veriyoruz.Page-main kısmında main içine bir a tagı oluşturup hrefine panelimizin idini yazıyoruz.Bu şekilde artık bağladık.
<a href="#panel">Paneli aç</a>
<div data-role="panel" id="panel">
</div>
Birde javascript işlemimiz mevcut.Js alanımıza
<script type="text/javascript">
$(function(){
$( "body>[data-role='panel']" ).panel();
})
</script>
Tüm panellere erişerek panel özelliğimizi veriyoruz.Şuan tam çalışmaya bilir,bir kaç parametre daha vermemiz gerek onları şimdi anlatacağım.
2-Animasyon
2 çeşit panel açılma animasyonumuz mevcut.Biri sayfa üzerine doğru olan
overlay diğeri ise sayfayı ittirerek olan
push .Animasyonu vermek için panele
data-display="animasyon_ismi" vermemiz gerekli.Açılış animasyonları kapatmak için panele
data-animate="false" verebiliriz.
3-Kapatma
Sayfanın her hangi bir yerine tıklayınca panel kapanır.Bunu engellemek için panele
data-dismissible="false" vermemiz yeterli.Paneli kapat butonu yapmak için ise panelin için a tagı ekleyip
data-rel="close" vermemiz gerek.
<a href="#" data-rel="close">Paneli kapat</a>
4-Pozisyon
Panelin sağdamı yoksa soldamı olacağını belirleyebiliyoruz.Bunun için panele
data-position="pozisyon" vermemiz gerek.Sol için left sağ için right.
5-Tema
Panele tema vermemiz gerek,yoksa arka plan transparan olur.Bunun için panele
data-theme="tema_ismi" vermemiz gerek.
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>
<script type="text/javascript">
$(function(){
$( "body>[data-role='panel']" ).panel();
})
</script>
</head>
<body>
<div data-role="page">
<div role="main" class="ui-content jqm-content">
<a href="#panel" data-role="button" data-inline="true">Panel 1 aç</a>
<a href="#panel2" data-role="button" data-inline="true">Panel 2 aç</a>
<a href="#panel3" data-role="button" data-inline="true">Panel 3 aç</a>
</div>
</div>
<!-- Paneller -->
<div data-role="panel" id="panel" data-position="left" data-display="push" data-theme="b" data-dismissible="false" >
<h3>Burası Panel-1</h3>
<p>Paneli kapatmak için buton tıkla.</p>
<a href="#" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-a ui-btn-inline">Paneli kapat</a>
</div>
<div data-role="panel" id="panel2" data-position="left" data-display="overlay" data-theme="a">
<h3>Burası Panel-2</h3>
<p>Paneli kapatmak için buton tıkla.</p>
<a href="#" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-a ui-btn-inline">Paneli kapat</a>
</div>
<div data-role="panel" id="panel3" data-position="right" data-display="push" data-theme="b" data-dismissible="false" data-animate="false">
<h3>Burası Panel-3</h3>
<p>Paneli kapatmak için buton tıkla.</p>
<a href="#" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-a ui-btn-inline">Paneli kapat</a>
</div>
</body>
</html>
Görüntüsü :
UstaDerslik
