Jquery mobil serimize devam ediyoruz.Bu derste
diyalog sistemini anlatacağım.Diyalog bir butana tıklanınca ekranın ortasında açılan pencere.Şimdi kodlarımıza geçelim.
İndir : http://ustaderslik.com/dosya/Jquery%20Mobil%20Ders-16%20Diyalog.zip
1-Diyalog ekleme
Diyaloglarımız 2 kısımdan oluşur.Birincisi link şeklindeki buton diğeri ise diyalog penceresi verilerini taşıyan kısım.Daha önce page-header-main yapısını anlatmıştım.Sitemizin temel yapılarını oluşturan kısımlar.Sayfamıza istediğimiz kadar page koyabiliriz.Ama sadece ilk koyduğumuz gözükür.Bir diyalog eklerken önce page oluşturup buna
data-dialog="true" vererek bu page diyalog yapıyoruz.Daha sonra içine header ile diyalog ismini main ile de diyalog içeriğini girerek diyalog penceremizi tamamlıyoruz.Bunu açmak için diyalog pagemize id verip bu idi bir linkin hrefine veriyoruz.Örnek bir diyalog penceresi.
<div data-role="page" data-dialog="true" id="d2">
<div data-role="header" data-theme="a"> <h1>UstaDerslik.com</h1> </div>
<div role="main" class="ui-content">
<h1>Başlık</h1>
<p>Burası diyalog2...</p>
</div>
</div>
2-Animasyon
Diyalog penceresinin bazı açılış animasyonları var.Bunlar :
fade,pop,flip,turn,flow,slidefade,slide,slideup,slidedown.Animasyonu link kısmında linke
data-transition="animasyon_ismi" şeklinde veriyoruz.Örnek :
<a href="#d1" class="ui-btn ui-btn-inline" data-transition="flip">Diyalog</a>
3-Kapatma
Normalde kendi otomatik olarak diyalog penceresinin soluna bir kapatma tuşu koyuyor.Bunun yerini
data-close-btn="pozisyon" u diyalog pagesine atayarak değiştire biliyoruz.Left ve right olarak 2 pozisyon oluyor.Yada diyalog pagesine
data-close-btn="none" vererek headerdaki butonu kaldırabiliyoruz.Kendi butonumuzu oluşturmak için a tagından bir butonu oluşturup buna
data-rel="back" vererek kendi kapatma butonumuzu oluşturabiliriz.
Önemli başka birşey kalmadı.Diğer derslerde öğrendiğimiz şeyleri bunda da uygulayabiliriz.Tema,icon,listeler vs.
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>
</head>
<body>
<div data-role="page">
<div role="main" class="ui-content">
<a href="#d1" class="ui-btn ui-corner-all ui-icon-comment ui-btn-icon-left ui-btn-inline" data-transition="flip">Diyalog-1</a>
<a href="#d2" class="ui-btn ui-corner-all ui-icon-grid ui-btn-icon-left ui-btn-inline" data-transition="slidedown">Diyalog-2</a>
</div>
</div>
<!-- Diyalog1 -->
<div data-role="page" data-dialog="true" id="d1" data-close-btn="right">
<div data-role="header" data-theme="b"> <h1>UstaDerslik.com</h1> </div>
<div role="main" class="ui-content">
<h1>Başlık</h1>
<p>Burası diyalog...</p>
<a href="dialog/index.html" data-rel="back" class="ui-btn ui-shadow ui-btn-a ui-btn-inline"> Evet </a>
<a href="dialog/index.html" data-rel="back" class="ui-btn ui-shadow ui-btn-b ui-btn-inline"> Hayır </a>
</div>
</div>
<!-- Diyalog2 -->
<div data-role="page" data-dialog="true" id="d2" data-close-btn="none">
<div data-role="header" data-theme="a"> <h1>UstaDerslik.com</h1> </div>
<div role="main" class="ui-content">
<h1>Başlık</h1>
<p>Burası diyalog2...</p>
<a href="dialog/index.html" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-a">Kapat</a>
</div>
</div>
</body>
</html>
Görüntüsü :
UstaDerslik
