dialog oferită de extensia page.dialog a widgetului de pagină vă permite să stilizați o pagină ca un dialog, însă manipularea specială de navigare va fi eliminată. De asemenea, puteți lua în considerare implementarea dialogurilor folosind widget-uri popup. Care pagină poate fi prezentată ca un dialog modal prin adăugarea atributului data-rel="dialog" la legătura de ancorare a paginii. Când atributul „dialog” este aplicat, framework-ul adaugă stiluri pentru a adăuga colțuri rotunjite, margini în jurul paginii și un fundal întunecat pentru a face ca „dialogul” să pară suspendat deasupra paginii.
|
1
|
|
Puteți deschide un dialog în mod programatic prin apelarea funcției $.mobil.metoda changePage:
|
1
2
3
4
4
5
|
|
Transitions
În mod implicit, dialogul se va deschide cu o tranziție „pop”. La fel ca în cazul tuturor paginilor, puteți specifica orice tranziție de pagină doriți pe dialog prin adăugarea atributului data-transition la link. Pentru a-l face să se simtă mai mult ca un dialog, vă recomandăm să specificați o tranziție de tip „pop”, „slidedown” sau „flip”.
Valorile posibile includ: fade, pop, flip, flip, turn, flow, slidefade, slide, slideup, slidedown, none.
|
1
|
|
Închiderea dialogurilor
Când se face clic pe orice link în cadrul unui dialog, cadrul va închide automat dialogul și va face tranziția la pagina solicitată, ca și cum dialogul ar fi o pagină normală. Cu toate acestea, dialogurile pot fi, de asemenea, înlănțuite, după cum se explică mai jos la „Chaining Dialogs”. În mod similar, un link care deschide o fereastră pop-up va lăsa, de asemenea, dialogul pe loc.
Dacă dialogul are un antet, cadrul va adăuga un buton de închidere în partea stângă a antetului. Puteți schimba poziția adăugând data-close-btn="right" la containerul dialogului. Dacă nu doriți un buton de închidere în antet sau adăugați un buton de închidere personalizat, puteți utiliza data-close-btn="none".
Pentru a crea un buton de „anulare” într-un dialog, trebuie doar să creați un link către pagina care a declanșat deschiderea dialogului și să adăugați atributul data-rel="back" la linkul dvs. Acest model de trimitere la pagina anterioară este utilizabil și în dispozitivele non-JS.
Pentru legăturile generate de JavaScript, puteți pur și simplu să setați atributul href la „#” și să utilizați atributul data-rel="back". De asemenea, puteți apela metoda close() a dialogului pentru a închide în mod programatic dialogurile, de exemplu: $( ".ui-dialog" ).dialog( "close" ).
Setarea textului butonului de închidere
La fel ca în cazul plugin-ului de pagină, puteți seta textul butonului de închidere al unui dialog prin intermediul unei opțiuni sau al unui atribut de date. Opțiunea poate fi configurată pentru toate dialogurile prin legarea la evenimentul mobileinit și setarea proprietății $.mobile.dialog.prototype.options.closeBtnText la un șir de caractere la alegere, sau puteți plasa atributul de date data-close-btn-text pentru a configura textul din marcajul dumneavoastră.
Istoric & Comportamentul butonului de revenire
Din moment ce dialogurile sunt utilizate de obicei pentru a susține acțiuni în cadrul unei pagini, cadrul nu include dialogurile în urmărirea istoricului stării hash. Acest lucru înseamnă că dialogurile nu vor apărea în cronologia istoricului de navigare atunci când se face clic pe butonul Înapoi. De exemplu, dacă vă aflați pe o pagină, faceți clic pe un link pentru a deschide un dialog, închideți dialogul, apoi navigați pe o altă pagină, dacă ați face clic pe butonul Back al browserului în acel moment veți naviga înapoi la prima pagină, nu la dialog.
Chaining Dialogs
Rețineți: Dacă un dialog deschide un alt dialog (înlănțuire), închiderea ultimului dialog cu un link de tip data-rel="back" va naviga întotdeauna la dialogul anterior până când se ajunge la pagina-rădăcină de tip data-role="page". Acest lucru garantează o navigare consecventă între dialoguri.
Stilizare & temă
Dialogurile pot fi stilizate cu diferite mostre de temă, la fel ca orice pagină, prin adăugarea de atribute data-theme la containerele de antet, conținut sau subsol.
În mod implicit, dialogurile au colțuri rotunjite. Opțiunea colțuri poate fi setată la false adăugând data-corners="false" la containerul dialogului:
Dialogurile par să plutească deasupra unui strat de suprapunere. Acest strat de suprapunere adoptă în mod implicit culoarea de conținut swatch ‘a’, dar atributul data-overlay-theme poate fi adăugat la învelișul paginii pentru a seta stratul de suprapunere la orice literă swatch.
Dialogurile pot fi, de asemenea, utilizate mai mult ca o foaie de control pentru a oferi mai multe butoane dacă pur și simplu eliminați marja superioară din elementul container intern al dialogului. De exemplu, dacă pagina dvs. de dialog are clasa my-dialog, ați putea adăuga acest CSS pentru a fixa acel dialog în partea de sus: , sau ați putea aplica pur și simplu acest stil la toate dialogurile cu .ui-dialog .ui-dialog-contain { margin-top: 0 }.
Lățimea și marginile dialogului
Pentru ușurința de citire, dialogurile au un width implicit de 92,5% și un max-width de 500 pixeli. Există, de asemenea, o margin superioară de 10% pentru a oferi dialogurilor o marjă superioară mai mare pe ecrane mai mari, dar care se reduce la o marjă mică pe smartphone-uri. Containerul interior al dialogului este deplasat spre top cu 15px pentru a ascunde stilizarea colțurilor în cazul în care un dialog este utilizat ca foaie de control (a se vedea mai sus). Pentru a suprascrie aceste stiluri, adăugați următoarea regulă de suprascriere CSS la foaia dvs. de stil și modificați-o după cum este necesar:
|
1
2
3
4
5
6
7
8
|
|