Jquery Mobil Ders-15 Panel
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-15 Panel

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