mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-17 06:20:26 +00:00
55 lines
No EOL
2.4 KiB
HTML
Executable file
55 lines
No EOL
2.4 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>jQuery Mobile Docs - Pages</title>
|
|
<link rel="stylesheet" media="only all" href="../../themes/default" />
|
|
<script type="text/javascript" src="../../js/all"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div data-role="page">
|
|
|
|
<div data-role="header">
|
|
<h1>Dialogs</h1>
|
|
</div><!-- /header -->
|
|
|
|
<div data-role="content" class="ui-body">
|
|
|
|
<p>Any page can be presented as a modal dialog by adding the <code>data-rel="dialog"</code> attribute to the page anchor link. When the "dialog" attribute is applied, the framework adds styles to add rounded corners, margins around the page and a dark background to make the "dialog" appear to be suspended above the page.</p>
|
|
<p>
|
|
<code>
|
|
<a href="foo.html" data-rel="dialog">Open dialog</a>
|
|
</code>
|
|
</p>
|
|
|
|
<a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Open dialog</a>
|
|
|
|
|
|
|
|
<h2>Transitions</h2>
|
|
<p>Since the dialog is a standard "page", it will open with the standard slide transition that's applied to all pages. And like all pages, you can specify any page transition you want on the dialog by adding the <code>data-transition</code> attribute to the link. To make it feel more dialog-like, we recommend specifying a transition of "pop", "slideup" or "flip".</p>
|
|
|
|
<code>
|
|
<a href="foo.html" data-rel="dialog" data-transition="pop">Open dialog</a>
|
|
</code>
|
|
|
|
<div>
|
|
<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>
|
|
</div>
|
|
|
|
<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">An alternate color scheme</a>
|
|
|
|
|
|
<p>And dialogs can be can used more like a control sheet to offer multiple buttons by removing the header:</p>
|
|
<a href="dialog-buttons.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="slideup">Share photos...</a>
|
|
|
|
|
|
</div><!-- /content -->
|
|
</div><!-- /page -->
|
|
|
|
</body>
|
|
</html> |