jQuery Komórka pop-upy
Pop-upy są podobne do okien dialogowych, że oboje nakładka częścią strony. Pole listy może być przydatne, gdy chcesz zobaczyć mały tekst, zdjęcia, mapy oraz inne materiały.
Aby utworzyć okienko, start z <a> elementu i <div> elementu. Dodawanie data-rel="popup" atrybutu do <a> , a data-role="popup" atrybut <div> . Następnie należy określić identyfikator dla <div> i ustaw href z <a> pasujące do określonego identyfikatora. Zawartość wewnątrz <div> jest rzeczywista zawartość, która pojawi się, gdy użytkownik kliknie na link.
Uwaga: okienko <div> musi znajdować się w tej samej stronie co link.
Przykład
< 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> Spróbuj sam " Jeśli chcesz trochę zaokrąglona i marginesy w oknie popup, należy dodać "ui-content" klasę <div> :
zamknięcie pop-upy
Domyślnie wyskakujące okna mogą być zamknięte albo klikając nieszablonowo podręcznego lub po naciśnięciu "Esc" klucz. Jeśli nie chcesz popup być zamykane, klikając pola karnego można dodać data-dismissible="false" atrybutu popup (naprawdę nie zalecane). Można również dodać przycisk zamykania na okienko, umieszczone w prawo lub w lewo. Aby to zrobić, dodać link przycisk z data-rel="back" przypisać do zbiornika podręcznego, a następnie umieść przycisk według klas CSS.
| Opis | Przykład |
|---|---|
| Prawy przycisk zamykania | Spróbuj |
| Lewy przycisk zamykania | Spróbuj |
| Undismissible Popup | Spróbuj |
Pozycjonowanie pop-upy
Domyślnie wyskakujące okienka pojawi się bezpośrednio nad elementem kliknięciu. Aby kontrolować pozycję popup, należy użyć danych-pozycji-przypisania na link, który jest używany, aby otworzyć okienko.
Istnieją trzy sposoby pozycjonowania okienko:
| wartość atrybutu | Opis |
|---|---|
| data-position-to="window" | Popup będzie wyświetlane centralnie w oknie |
| data-position-to="#myId" | Podręczne jest umieszczone na elemencie z określonym ID |
| data-position-to="origin" | Zaniedbanie. Popup jest umieszczony bezpośrednio nad elementem klikniętego |
Przykład
<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> Spróbuj sam " przejścia
Domyślnie, pop-upy nie mają żadnych skutków przejściowych dodaje się do nich. Można użyć dowolnego z efektów, które wprowadziliśmy w rozdziale "Transitions". Wystarczy zastosować danych Transition = "wartość" atrybut na link, który otwiera okienko:
Demonstracja wszystkich dostępnych efektów przejścia
<a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="fade" >Fade</a> Spróbuj sam " Strzałki popup
Aby dodać strzałkę na granicy popup, należy użyć atrybutu danych strzałki i określ wartość "l" (left), "t" (top), "r" (right) lub "b" (bottom) :
Przykład
<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> Spróbuj sam " popup Dialogi
Możesz dodać standardowych znaczników dialogowe do okienka popup (nagłówek, treść i stopki znaczników):
Przykład
<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> Spróbuj sam " popup Zdjęcia
Można również wyświetlać obrazy w okienko:
Przykład
<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> Spróbuj sam " Uwaga: pop-upy nie są idealne, gdy masz cały zestaw obrazów, które mają być wyświetlane (jak album ze 500 obrazów). Jednakże, na kilka obrazów, które powinny być postrzegane większe - są idealne.
Nakładka Popup
Można kontrolować kolor tła za popup (sama strona) z data-overlay-theme atrybutu.
Domyślnie nakładka jest przezroczysta. Użyj data-overlay-theme="a" , aby dodać lekkie nakładki i danych overlay-theme = "b", aby dodać ciemne nakładki:
Przykład
<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> Spróbuj sam " Efekt nakładka jest często stosowany na zdjęciach popup:
Przykład
<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> Spróbuj sam " Uwaga: Dowiesz się również jak korzystać z pop-upów w formach i widokach list w późniejszych rozdziałach.