Jquery Mobil Ders-16 Diyalog
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-16 Diyalog

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