jQuery Mobile
johnbender.github.com/presentation-mobile-bakeoff
z, ? | toggle help (this) |
space, → | next slide |
shift-space, ← | previous slide |
d | toggle debug mode |
## <ret> | go to slide # |
c, t | table of contents (vi) |
f | toggle footer |
r | reload slides |
n | toggle notes |
p | run preshow |
johnbender.github.com/presentation-mobile-bakeoff
jquerymobile.com/demos/1.0
jquerymobile.com/demos/1.0
www.jqmgallery.com
jquerymobile.com/gbs/
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="jquery.mobile.css"/> <script src="jquery-1.6.4.min.js"></script> <script src="jquery.mobile.js"></script> </head> <body> <div id="first" data-role="page"> <div data-role="header"> <h1>Sample</h1> </div> <div data-role="content"> <ul data-role="listview"> <li> First List Item </li> <li> Second List Item </li> <li><a href="#embedded">Link</a></li> </ul> </div> </div> <div id="embedded" data-role="page"> <div data-role="header"> <a href="#" data-rel="back">Back</a> <h1>Embedded</h1> </div> </div> </body> </html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="jquery.mobile.css"/>
<script src="jquery-1.6.4.min.js"></script>
<script src="jquery.mobile.js"></script>
</head>
<body>
<div id="first" data-role="page">
<div data-role="header">
<h1>Sample</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li> First List Item </li>
<li> Second List Item </li>
<li><a href="#embedded">Link</a></li>
</ul>
</div>
</div>
<div id="embedded" data-role="page">
<div data-role="header">
<a href="#" data-rel="back">Back</a>
<h1>Embedded</h1>
</div>
</div>
</body>
</html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="jquery.mobile.css"/> <script src="jquery-1.6.4.min.js"></script> <script src="jquery.mobile.js"></script> </head> <body> <div id="first" data-role="page"> <div data-role="header"> <h1>Sample</h1> </div> <div data-role="content"> <ul data-role="listview"> <li> First List Item </li> <li> Second List Item </li> <li><a href="#embedded">Link</a></li> </ul> </div> </div> <div id="embedded" data-role="page"> <div data-role="header"> <a href="#" data-rel="back">Back</a> <h1>Embedded</h1> </div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="jquery.mobile.css"/> <script src="jquery-1.6.4.min.js"></script> <script src="jquery.mobile.js"></script> </head> <body> <div id="first" data-role="page"> <div data-role="header"> <h1>Sample</h1> </div> <div data-role="content"> <ul data-role="listview"> <li> First List Item </li> <li> Second List Item </li> <li><a href="#embedded">Link</a></li> </ul> </div> </div> <div id="embedded" data-role="page"> <div data-role="header"> <a href="#" data-rel="back">Back</a> <h1>Embedded</h1> </div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="jquery.mobile.css"/> <script src="jquery-1.6.4.min.js"></script> <script src="jquery.mobile.js"></script> </head> <body> <div id="first" data-role="page"> <div data-role="header"> <h1>Sample</h1> </div> <div data-role="content"> <ul data-role="listview"> <li> First List Item </li> <li> Second List Item </li> <li><a href="#embedded">Link</a></li> </ul> </div> </div> <div id="embedded" data-role="page"> <div data-role="header"> <a href="#" data-rel="back">Back</a> <h1>Embedded</h1> </div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="jquery.mobile.css"/> <script src="jquery-1.6.4.min.js"></script> <script src="jquery.mobile.js"></script> </head> <body> <div id="first" data-role="page"> <div data-role="header"> <h1>Sample</h1> </div> <div data-role="content"> <ul data-role="listview"> <li> First List Item </li> <li> Second List Item </li> <li><a href="#embedded">Link</a></li> </ul> </div> </div> <div id="embedded" data-role="page"> <div data-role="header"> <a href="#" data-rel="back">Back</a> <h1>Embedded</h1> </div> </div> </body> </html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="first" data-role="page">
<div data-role="header">
<h1>Sample</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li> First List Item </li>
<li> Second List Item </li>
<li><a href="#embedded">Link</a></li>
</ul>
</div>
</div>
<div id="embedded" data-role="page">
<div data-role="header">
<a href="#" data-rel="back">Back</a>
<h1>Embedded</h1>
</div>
</div>
</body>
</html>
but it's webkit
never forget gizmodo
after replaceState
www.w3.org/TR/wai-aria/