Jquery mobil derslerimize devam ediyoruz.Bu derste
popup özelliğini anlatacam.Popuplar 2 kısımdan oluşur.Biri link biri içerik.Linke tıkladığımızda içerik kısmı açılır.Popuplar içine istediğiniz şeyi koyabilirsiniz.İster menü ister resim ister şıklı sorular vs.
İndir :
http://ustaderslik.com/dosya/Jquery%20Mobil%20Ders-9%20Popup.zip
1-Popup ekleme
Popup eklemek için a tag ve bir div ekliyoruz sayfamıza.a tagının hrefine divin idini başında "#" ekleyerek yazıyoruz ve a tagına
data-rel="popup" veriyoruz.Dive isede
data-role="popup" veriyoruz.Bu şekilde bunu popup yaptık çağırılmadan gözükmeyecektir.a tagına tıkladığımızda artık popup gözükecektir.Örnek :
<a href="#p1" data-rel="popup">Popupu aç</a>
<div data-role="popup" id="p1">
Bu popup penceresi...
</div>
2-Animasyon
Popupun açılış animasyonunu değiştirebiliriz.Bunun için linke
data-transition="animasyon_ismi" vermemiz gerek.Animasyonlarımız ise şunlar :
fade,pop,flip,turn,flow,slidefade,slide,slideup,slidedown
Animasyonlarımız bunlar.
3-Pozisyon
Popupun açılacağı pozisyonu değiştirebiliriz.Normalde linkin yanında açılır.Linke
data-position-to="pozisyon" vererek değiştirebiliriz.window ve origin olmak üzere 2 tane var.Window tam ekranın ortasında açar.Origin ise linkin orada.
4-Arkaplan
Popup açıldığında arkaplanın hafif kararıp kitlenmesini istiyorsak popup kısmıda
data-overlay-theme="tema_ismi" vererek yapabiliriz.Tema olarak b yazarsanız kararır a verirseniz hafif kararır.
5-Tıklamayı kapatma
Popupun arkaplanına tıklayarak kapatmak için
popupa data-dismissible="false" vermemiz yeterli.Bu şekilde arkaplana tıklanınca kapanmayacak.Kapatmayı engeledikten sonra kapatma butonu eklemek için popup içine
<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-left"></a>
ekleyin.ui-btn-left okun konumunu belirler ui-btn-right yaparak kapatma butonunu sağada koyabilirsiniz.
6-Gölge
Popupun standart olarak gölgesi mevcuttur.Bazen güzel durmuyor.Kapatmak isterseniz popupa
data-shadow="false" vermemiz yeterli.
7-Ok
Popupun okunu açmak isterseniz popupa
data-arrow="true" vererek açabiliriz.Bu şekilde tıkladığımız konuma göre popupta ok çıkacaktır.
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">
<a href="#p1" data-role="button" data-inline="true" data-icon="comment" data-rel="popup" data-transition="pop">Popupu aç</a>
<a href="#p2" data-role="button" data-inline="true" data-icon="grid" data-rel="popup" data-position-to="window" data-transition="turn">Resimli popupu aç</a>
<a href="#p3" data-role="button" data-inline="true" data-icon="bullets" data-rel="popup" data-transition="slideup">Menü popupu aç</a>
<div data-role="popup" id="p1" class="ui-content" data-overlay-theme="b" data-arrow="true">
<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right"></a>
Bu popup penceresi...
</div>
<div data-role="popup" id="p2" data-overlay-theme="b" data-dismissible="false" >
<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-left"></a>
<img src="resim.jpg" width="500" height="300" />
</div>
<div data-role="popup" id="p3" data-shadow="false" data-theme="b">
<div data-role="collapsibleset">
<div data-role="collapsible">
<h1>Menüyü Göster</h1>
<ul data-role="listview">
<li>Buton-1</li>
<li>Buton-2</li>
<li>Buton-2</li>
</ul>
</div>
<div data-role="collapsible">
<h1>Menüyü 2 Göster</h1>
<ul data-role="listview">
<li>Buton-1</li>
<li>Buton-2</li>
<li>Buton-2</li>
</ul>
</div>
<div data-role="collapsible">
<h1>Menüyü 3 Göster</h1>
<ul data-role="listview">
<li>Buton-1</li>
<li>Buton-2</li>
<li>Buton-2</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Görüntüsü :
UstaDerslik
