Monday, July 18, 2011

jQuery Mobile Exercise: dialog

Any valid jQuery Mobile page can also be displayed as a dialog. To link to a page as dialog, simply insert data-rel="dialog" attribute in the link.

example:

jQuery Mobile dialog in OperaMobile for Android

<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Exercise</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.js">
</script>
</head>
<body>

<section id="page1" data-role="page">
<header data-role="header" data-position="fixed"><h1>jQuery Mobile Exercise</h1></header>
<div class="content" data-role="content">
<p>Hello jQuery Mobile!</p>
<p><a href="#page2" data-rel="dialog">Open Dialog</a></p>
</div>
<footer data-role="footer" data-position="fixed"><h1>http://icancode-4-web.blogspot.com/</h1></footer>
</section>

<section id="page2" data-role="page">
<header data-role="header" data-position="fixed"><h1>jQuery Mobile Exercise</h1></header>
<div class="content" data-role="content">
<p>I'm a Dialog!</p>
</div>


</body>
</html>

No comments:

Post a Comment