dialog dostarczana przez rozszerzenie page.dialog widżetu strony pozwala stylizować stronę jako okno dialogowe, jednak specjalna obsługa nawigacyjna zostanie usunięta. Można również rozważyć implementację okien dialogowych przy użyciu widżetów popup.Dowolna strona może być prezentowana jako modalne okno dialogowe przez dodanie atrybutu data-rel="dialog" do łącza zakotwiczenia strony. Po zastosowaniu atrybutu „dialog” framework dodaje style, aby dodać zaokrąglone rogi, marginesy wokół strony i ciemne tło, aby „okno dialogowe” wydawało się zawieszone nad stroną.
|
1
|
|
Możesz otworzyć okno dialogowe programowo, wywołując metodę $.mobile.changePage:
|
1
2
3
4
5
|
|
Transitions
Domyślnie, okno dialogowe będzie otwierane z przejściem „pop”. Tak jak w przypadku wszystkich stron, możesz określić dowolne przejście strony w oknie dialogowym, dodając atrybut data-transition do odnośnika. Aby nadać mu bardziej dialogowy charakter, zalecamy określenie przejścia „pop”, „slidedown” lub „flip”.
Możliwe wartości obejmują: fade, pop, flip, turn, flow, slidefade, slide, slideup, slidedown, none.
|
1
|
|
Zamykanie okien dialogowych
Kiedy dowolny odnośnik zostanie kliknięty w oknie dialogowym, framework automatycznie zamknie okno dialogowe i przejdzie do żądanej strony, tak jakby okno dialogowe było normalną stroną. Niemniej jednak, okna dialogowe mogą być również łączone w łańcuchy, jak wyjaśniono poniżej w sekcji „Łączenie dialogów”. Podobnie, odnośnik otwierający popup również pozostawi okno dialogowe na miejscu.
Jeśli okno dialogowe posiada nagłówek, framework doda przycisk zamykania po lewej stronie nagłówka. Możesz zmienić pozycję przez dodanie data-close-btn="right" do kontenera okna dialogowego. Jeśli nie chcesz przycisku zamykania w nagłówku lub dodajesz niestandardowy przycisk zamykania, możesz użyć data-close-btn="none".
Aby utworzyć przycisk „anuluj” w oknie dialogowym, po prostu połącz się ze stroną, która spowodowała otwarcie okna dialogowego i dodaj atrybut data-rel="back" do swojego linku. Ten wzorzec odsyłacza do poprzedniej strony jest również użyteczny w urządzeniach nie-JS.
W przypadku odsyłaczy generowanych przez JavaScript, możesz po prostu ustawić atrybut href na „#” i użyć atrybutu data-rel="back". Możesz również wywołać metodę close() okna dialogowego, aby programowo zamknąć okna dialogowe, na przykład: $( ".ui-dialog" ).dialog( "close" ).
Ustawianie tekstu przycisku zamykania
Podobnie jak w przypadku wtyczki strony, można ustawić tekst przycisku zamykania okna dialogowego za pośrednictwem opcji lub atrybutu danych. Opcja może być skonfigurowana dla wszystkich okien dialogowych przez powiązanie ze zdarzeniem mobileinit i ustawienie właściwości $.mobile.dialog.prototype.options.closeBtnText na wybrany przez siebie ciąg znaków, lub możesz umieścić atrybut danych data-close-btn-text, aby skonfigurować tekst z twojego znacznika.
Historia &Zachowanie przycisku wstecz
Ponieważ okna dialogowe są zwykle używane do wspierania akcji wewnątrz strony, framework nie zawiera okien dialogowych w śledzeniu historii stanu hash. Oznacza to, że okna dialogowe nie pojawią się w chronologii historii przeglądania, gdy kliknięty zostanie przycisk Wstecz. Na przykład, jeśli znajdujesz się na stronie, klikasz odnośnik otwierający okno dialogowe, zamykasz okno dialogowe, a następnie przechodzisz na inną stronę, jeśli w tym momencie klikniesz przycisk Wstecz w przeglądarce, wrócisz do pierwszej strony, a nie do okna dialogowego.
Łańcuchowanie okien dialogowych
Uwaga: Jeśli okno dialogowe otwiera inne okno dialogowe (łańcuchowanie), zamknięcie ostatniego z nich za pomocą odnośnika typu data-rel="back" zawsze spowoduje przejście do poprzedniego okna dialogowego, aż do osiągnięcia strony głównej typu data-role="page". Gwarantuje to spójną nawigację między oknami dialogowymi.
Stylizacja &tematyka
Dialogi mogą być stylizowane różnymi wzorami motywów, tak jak każda strona, przez dodanie atrybutów data-theme do kontenerów nagłówka, treści lub stopki.
Domyślnie okna dialogowe mają zaokrąglone rogi. Opcja narożników może być ustawiona na false przez dodanie data-corners="false" do kontenera okna dialogowego:
Dialogi wydają się unosić nad warstwą nakładki. Ta nakładka domyślnie przyjmuje kolor zawartości z wzornika 'a’, ale atrybut data-overlay-theme można dodać do strony wrappera, aby ustawić nakładkę na dowolną literę wzornika.
Dialogi mogą być również używane bardziej jak arkusz kontrolny, aby zaoferować wiele przycisków, jeśli po prostu usuniesz górny margines z wewnętrznego elementu kontenera okna dialogowego. Na przykład, jeśli strona okna dialogowego ma klasę my-dialog, możesz dodać ten CSS, aby przypiąć to okno dialogowe na górze: .ui-dialog.my-dialog .ui-dialog-contain { margin-top: 0 }, lub mógłbyś po prostu zastosować ten styl do wszystkich okien dialogowych z .ui-dialog .ui-dialog-contain { margin-top: 0 }.
Szerokość i marginesy okien dialogowych
Dla zachowania czytelności, okna dialogowe mają domyślne width wynoszące 92,5% i max-width wynoszące 500 pikseli. Istnieje również 10% górny margin, aby dać oknom dialogowym większy górny margines na większych ekranach, ale zwijać się do małego marginesu na smartfonach. Wewnętrzny kontener okna dialogowego jest przesunięty w kierunku top o 15px, aby ukryć stylizację narożnika, jeśli okno dialogowe jest używane jako arkusz kontrolny (zobacz powyżej). Aby nadpisać te style, dodaj następującą regułę nadpisywania CSS do swojego arkusza stylów i dostosuj ją w razie potrzeby:
|
1
2
3
4
5
6
7
8
|
|