jQuery Mobile Popup'lar
Popup'lar ikisi de bindirme sayfanın bir parçası ki, iletişim kutuları benzer. Eğer küçük yazı, fotoğraf, harita ya da diğer içeriği görüntülemek istediğinizde bir pop-up kutusu yararlı olabilir.
Bir açılır pencere oluşturmak için, bir ile başlar <a> elementlerle bir <div> elemanı. Ekle data-rel="popup" özniteliği <a> ve data-role="popup" için öznitelik <div> . Sonra bir kimliğini belirtmesi <div> ve set href ait <a> belirtilen id eşleşecek. Içerik içeride <div> Bir kullanıcı linke tıkladığında açılır gerçek içeriğidir.
Not: Açılır <div> bağlantı olarak aynı sayfa içinde olmalıdır.
Örnek
< a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline
ui-corner-all">Show Popup</a>
< div data-role="popup" id="myPopup" >
<p>This
is a simple popup.</p>
</div> Kendin dene " Eğer pop-up kutusunda bazı ekstra dolgu ve marj istiyorsanız eklemek "ui-content" sınıfı için <div> :
Açılır Pencereler Kapanış
Varsayılan olarak, pop-up açılan kutunun dışında tıklayarak veya basarak ya kapatılabilir "Esc" tuşuna. Açılır kutunun dışında tıklayarak kapanabilir olmak istemiyorsanız, ekleyebilir data-dismissible="false" pop-up'a niteliği (not really recommended) . Ayrıca yerleştirilen Sağ ya da sol, pop-up penceresine bir kapatma düğmesi ekleyebilirsiniz. Bunu yapmak için, bir buton bağlantı eklemek data-rel="back" pop-up kaba öznitelik, ve CSS sınıfları tarafından düğmeye yerleştirin.
| Açıklama | Örnek |
|---|---|
| Sağ kapatma düğmesi | Dene |
| Sol kapatma düğmesi | Dene |
| Undismissible Popup | Dene |
Konumlandırma Popup'lar
Varsayılan olarak, pop-up tıklanan öğenin üzerine doğrudan görünür. Popup pozisyonunu kontrol etmek için, kullanmak data-position-to açılır pencere açmak için kullanılan linke bağlıyor.
pop-up konumlandırma üç yolu vardır:
| Özellik değeri | Açıklama |
|---|---|
| data-position-to="window" | Popup penceresi içinde ortalanmış bir şekilde görünür |
| data-position-to="#myId" | Pop-up belirtilen bir #id ile eleman üzerinde konumlandırılır |
| data-position-to="origin" | Varsayılan. Pop-up tıklanan eleman üzerinden doğrudan konumlandırılır |
Örnek
<a href="#myPopup1" data-rel="popup" class="ui-btn" data-position-to="window" >Window</a>
<a href="#myPopup2" data-rel="popup"
class="ui-btn" data-position-to="#demo"> id="demo"</a>
<a href="#myPopup3"
data-rel="popup" class="ui-btn" data-position-to="origin" >Origin</a> Kendin dene " Geçişler
Varsayılan olarak, pop-up onlara eklenen herhangi bir geçiş etkisi yoktur. Sence tanıtılan bu etkilerin herhangi birini kullanabilirsiniz "Transitions" bölümünde. Sadece uygulamak data-transition=" value " pop-up açılır bağlantıya niteliğini:
Tüm mevcut geçiş etkileri bir gösteri
<a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="fade" >Fade</a> Kendin dene " Popup Oklar
Kullanmak, Popup sınırına bir ok eklemek için data-arrow niteliğini ve değer belirtin "l" (left) , "t" (top) , "r" (right) veya "b" (bottom) :
Örnek
<a href="#myPopup" data-rel="popup" class="ui-btn">Open
Popup</a>
<div data-role="popup" id="myPopup" class="ui-content"
data-arrow="l" >
<p>There
is an arrow on my LEFT border.</p>
</div> Kendin dene " Popup İletişim Kutuları
Bir pop-up (başlık, içerik ve altbilgi biçimlendirme) içine standart iletişim işaretleme ekleyebilirsiniz:
Örnek
<a href="#myPopupDialog" data-rel="popup" class="ui-btn">Open Dialog
Popup</a>
<div data-role="popup" id="myPopupDialog">
<div
data-role="header"><h1>Header Text..</h1></div>
<div
data-role="main" class="ui-content"><p>Some text..</p><a href="#">some
links..</a>
<div data-role="footer"><h1>Footer Text..</h1></div>
</div> Kendin dene " Popup Resimleri
Ayrıca açılan pencerede görüntüleri gösterebilir:
Örnek
<a href="#myPopup" data-rel="popup" data-position-to="window">
<img src="skaret.jpg"
alt="Skaret View" style="width:200px;"></a>
<div data-role="popup"
id="myPopup">
<img src="skaret.jpg"
style="width:800px;height:400px;" alt="Skaret View">
</div> Kendin dene " Not: görüntülemek istediğiniz resimlerin bir bütün set olduğunda Popup'lar ideal olmayan (like an album with 500 images) . Ancak, daha büyük izlenebilir gereken görüntülerin birkaç - onlar mükemmel.
Popup Yerleşimi
Sen pop-up arkasında arka plan rengini kontrol edebilirsiniz (the page itself) ile data-overlay-theme özniteliği.
Varsayılan olarak bindirme şeffaftır. Kullan data-overlay-theme="a" karanlık paylaşımı eklemek için hafif bir bindirme ve veri bindirme-tema = "b" eklemek için:
Örnek
<a href="#myPopup" data-rel="popup">Show Popup</a>
<div data-role="popup" id="myPopup"
data-overlay-theme="b" >
<p>I
have a dark background behind me.</p>
</div> Kendin dene " bindirme etkisi genellikle pop-up fotoğraflarda kullanılır:
Örnek
<a href="#myPopup" data-rel="popup" data-position-to="window">
<img src="skaret.jpg"
alt="Skaret View" style="width:200px;"></a>
<div data-role="popup"
id="myPopup"
data-overlay-theme="b" >
<img src="skaret.jpg"
style="width:800px;height:400px;" alt="Skaret View">
</div> Kendin dene " Not: Ayrıca ileriki bölümlerde formları ve liste görünümlerinde pop-up kullanmayı öğreneceksiniz.