Added prefetch attr and fixed theme tags in markup for dialogs

This commit is contained in:
toddparker 2011-08-26 16:53:26 -04:00
parent 0346cbe439
commit cd5cb16fe1
5 changed files with 8 additions and 8 deletions

View file

@ -14,7 +14,7 @@
<body>
<div data-role="page">
<div data-role="header" data-theme="e" data-position="inline">
<div data-role="header" data-theme="e">
<h1>Dialog</h1>
</div>

View file

@ -15,7 +15,7 @@
<div data-role="page">
<div data-role="header" data-theme="d" data-position="inline">
<div data-role="header" data-theme="d">
<h1>Dialog</h1>
</div>

View file

@ -31,7 +31,7 @@
</code>
</p>
<a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Open dialog</a>
<a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop" data-prefetch>Open dialog</a>
@ -61,11 +61,11 @@
<h2>Styling &amp; theming</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>
<a href="dialog-alt.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop" data-prefetch>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="slidedown">Share photos...</a>
<a href="dialog-buttons.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="slidedown" data-prefetch>Share photos...</a>
</div><!--/content-primary -->

View file

@ -33,7 +33,7 @@
</code></code>
<p>
<a href="transition-success.html" data-role="button" data-rel="dialog" data-transition="slide">slide</a>
<a href="transition-success.html" data-role="button" data-rel="dialog" data-transition="slide" data-prefetch>slide</a>
<a href="transition-success.html" data-role="button" data-rel="dialog" data-transition="slideup">slideup</a>
<a href="transition-success.html" data-role="button" data-rel="dialog" data-transition="slidedown">slidedown</a>
<a href="transition-success.html" data-role="button" data-rel="dialog" data-transition="pop">pop</a>

View file

@ -13,13 +13,13 @@
</head>
<body>
<div data-role="page" data-theme="e">
<div data-role="page">
<div data-role="header" data-theme="e">
<h1>Ta-da!</h1>
</div><!-- /header -->
<div data-role="content">
<div data-role="content" data-theme="e">
<p>That was an animated page transition effect that we added with a <code>data-transition</code> attribute on the link.</p>
<p>Since it uses CSS transforms, this should be hardware accelerated on many mobile devices.</p>
<p>What do you think?</p>