mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-16 22:10:25 +00:00
d5cbcf755b
Edited the PHP combiner and .htaccess logic to accommodate this change, as well as allowing manifest files to use a "../" when referencing files, which will be handy when adding themes that don't include structural files yet. Modified all HTML files to point to /themes/default for their theme.
55 lines
No EOL
2.3 KiB
HTML
Executable file
55 lines
No EOL
2.3 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 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>
|
|
|
|
<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>
|
|
|
|
<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">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>
|
|
|
|
|
|
</div><!-- /content -->
|
|
</div><!-- /page -->
|
|
|
|
</body>
|
|
</html> |