2010-10-11 21:35:29 +00:00
<!DOCTYPE html>
< html >
< head >
2010-10-11 21:49:12 +00:00
< title > jQuery Mobile Docs - Pages< / title >
2010-10-13 16:45:10 +00:00
< link rel = "stylesheet" media = "only all" href = "../../themes/default" / >
2010-10-11 23:44:14 +00:00
< script type = "text/javascript" src = "../../js/all" > < / script >
2010-10-11 21:35:29 +00:00
< / head >
< body >
< div data-role = "page" >
< div data-role = "header" >
2010-10-11 21:49:12 +00:00
< h1 > Dialogs< / h1 >
2010-10-11 21:35:29 +00:00
< / div > <!-- /header -->
2010-10-12 21:23:48 +00:00
< div data-role = "content" class = "ui-body" >
2010-10-11 21:35:29 +00:00
2010-10-13 16:06:04 +00:00
< p > Any page can be presented as a dialog by adding the < code > data-rel="dialog"< / code > attribute to the page you're linking to. The framework will add styles to make the page look like a modal dialog by adding rounded corners and margins around the page along with a dark background behind the "dialog".< / p >
< p >
< code >
< a href=" foo.html" data-rel=" dialog" > Open dialog< /a>
< / code >
< / p >
2010-10-11 21:35:29 +00:00
2010-10-13 16:06:04 +00:00
< a href = "dialog.html" data-role = "button" data-inline = "true" data-rel = "dialog" data-transition = "pop" > Open dialog< / a >
< h2 > Transitions< / h2 >
< p > The dialog will still open with the standard slide transition so to make it feel more dialog-like. You can specify any page transition you want on the dialog by adding the < code > data-transition< / code > attribute to the link. We recommend adding a transition of pop, slideup or flip for dialogs.< / p >
2010-10-11 21:35:29 +00:00
2010-10-12 21:23:48 +00:00
< code >
2010-10-11 21:35:29 +00:00
< a href=" foo.html" data-rel=" dialog" data-transition=" pop" > Open dialog< /a>
2010-10-12 21:23:48 +00:00
< / code >
2010-10-11 21:35:29 +00:00
2010-10-12 21:23:48 +00:00
< div >
2010-10-13 16:06:04 +00:00
< a href = "dialog.html" data-role = "button" data-inline = "true" data-rel = "dialog" data-transition = "pop" > data-transition="pop"< / a >
< a href = "dialog.html" data-role = "button" data-inline = "true" data-rel = "dialog" data-transition = "slideup" > data-transition="slideup"< / a >
< a href = "dialog.html" data-role = "button" data-inline = "true" data-rel = "dialog" data-transition = "flip" > data-transition="flip"< / a >
2010-10-12 21:23:48 +00:00
< / div >
2010-10-11 21:35:29 +00:00
2010-10-13 16:06:04 +00:00
< h2 > Styling< / h2 >
< p > Dialogs can be styled with different themes, just like any page. Here is a different dialog design:< / p >
< a href = "dialog-alt.html" data-role = "button" data-inline = "true" data-rel = "dialog" data-transition = "pop" > Alternate swatch colors< / a >
< p > By removing the header, dialogs can be can used to offer multiple buttons, more like a control sheet< / p >
< a href = "dialog-buttons.html" data-role = "button" data-inline = "true" data-rel = "dialog" data-transition = "slideup" > Share photos...< / a >
2010-10-11 21:35:29 +00:00
< / div > <!-- /content -->
< / div > <!-- /page -->
< / body >
< / html >
