Jquery Mobil Ders-9 Popup
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

Jquery Mobil Ders-9 Popup

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




askmask
askmask 10 Yıl Önce Cevaplandı
Merhaba hocam ben uyarı popup yapmaya çalışıyorum Javascriptin alert(); uyarısı tarzında yani bir forma ekleyecem eğer formda işlemi sil dersem bana bu ileti silinecek diye bir yarı cıksın tama deyince silinsin hayır deyince silinmesin şeklinde bunu javascript şeklinde kolayca yapıyorum ama daha görsel birsey yapmaya çalışıyorum aşağıdaki resimde bir örneğini gösterdim bunu nasıl yapabilirim acaba ?
Teşekkürler.
http://www.chat.gen.tr/wp-content/uploads/2015/01/silinecek.jpg
cArleone
cArleone 10 Yıl Önce Cevaplandı
jquery modal plugin diye arasan bir çok plugin çıkar.bunların tasarımını değiştirerek kullanabilirsin.En popülerlerinden biri SweetAlert dır.bunu kullanabilirsin.

Kendim yapacam diyorsan.Buradan http://ustaderslik.com/konu/Jquery_ile_Objeyi__Ortalamak obje ortalamayı öğrenebilirsin.Ortaladığın obje içine metin ve buton koyarak kendi alertını oluşturabilirsin.



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