RobinNixon
74 lines
3.4 KiB
HTML
74 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Page Transitions</title>
|
|
<link rel="stylesheet" href="jquery.mobile-1.4.5.min.css">
|
|
<script src="jquery-2.2.4.min.js"></script>
|
|
<script src="jquery.mobile-1.4.5.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div data-role="page">
|
|
<div data-role="header">
|
|
<h1>jQuery Mobile Page Transitions</h1>
|
|
</div>
|
|
<div data-role="content"><table>
|
|
<tr><th><h3>fade</h3></th>
|
|
<td><a href="page-template.html" data-rel="dialog"
|
|
data-transition="fade" data-role='button'>dialog</a></td>
|
|
<td><a href="page-template.html" data-transition="fade"
|
|
data-role='button'>page</a></td>
|
|
</tr><tr><th><h3>pop</h3></th>
|
|
<td><a href="page-template.html" data-rel="dialog"
|
|
data-transition="pop" data-role='button'>dialog</a></td>
|
|
<td><a href="page-template.html" data-transition="pop"
|
|
data-role='button'>page</a></td>
|
|
</tr><tr><th><h3>flip</h3></th>
|
|
<td><a href="page-template.html" data-rel="dialog"
|
|
data-transition="flip" data-role='button'>dialog</a></td>
|
|
<td><a href="page-template.html" data-transition="flip"
|
|
data-role='button'>page</a></td>
|
|
</tr><tr><th><h3>turn</h3></th>
|
|
<td><a href="page-template.html" data-rel="dialog"
|
|
data-transition="turn" data-role='button'>dialog</a></td>
|
|
<td><a href="page-template.html" data-transition="turn"
|
|
data-role='button'>page</a></td>
|
|
</tr><tr><th><h3>flow</h3></th>
|
|
<td><a href="page-template.html" data-rel="dialog"
|
|
data-transition="flow" data-role='button'>dialog</a></td>
|
|
<td><a href="page-template.html" data-transition="flow"
|
|
data-role='button'>page</a></td>
|
|
</tr><tr><th><h3>slidefade</h3></th>
|
|
<td><a href="page-template.html" data-rel="dialog"
|
|
data-transition="slidefade" data-role='button'>dialog</a></td>
|
|
<td><a href="page-template.html" data-transition="slidefade"
|
|
data-role='button'>page</a></td>
|
|
</tr><tr><th><h3>slide</h3></th>
|
|
<td><a href="page-template.html" data-rel="dialog"
|
|
data-transition="slide" data-role='button'>dialog</a></td>
|
|
<td><a href="page-template.html" data-transition="slide"
|
|
data-role='button'>page</a></td>
|
|
</tr><tr><th><h3>slideup</h3></th>
|
|
<td><a href="page-template.html" data-rel="dialog"
|
|
data-transition="slideup" data-role='button'>dialog</a></td>
|
|
<td><a href="page-template.html" data-transition="slideup"
|
|
data-role='button'>page</a></td>
|
|
</tr><tr><th><h3>slidedown</h3></th>
|
|
<td><a href="page-template.html" data-rel="dialog"
|
|
data-transition="slidedown" data-role='button'>dialog</a></td>
|
|
<td><a href="page-template.html" data-transition="slidedown"
|
|
data-role='button'>page</a></td>
|
|
</tr><tr><th><h3>none</h3></th>
|
|
<td><a href="page-template.html" data-rel="dialog"
|
|
data-transition="none" data-role='button'>dialog</a></td>
|
|
<td><a href="page-template.html" data-transition="none"
|
|
data-role='button'>page</a></td></tr></table>
|
|
</div>
|
|
<div data-role="footer">
|
|
<h4><a href="http://tinyurl.com/jqm-trans">Official Demo</a></h4>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|