mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-05-19 12:01:06 +00:00
Merge branch 'master' into fastclick
Resolved Conflicts: js/jquery.mobile.navbar.js
This commit is contained in:
Kin Blas
commit
1f2c7fd537
13 changed files with 290 additions and 260 deletions
|
|
@ -16,15 +16,14 @@
|
|||
<div data-role="page" data-theme="a">
|
||||
|
||||
<div data-role="header" data-theme="e">
|
||||
<h1>Purchase album?</h1>
|
||||
<h1>Purchase?</h1>
|
||||
</div><!-- /header -->
|
||||
|
||||
<div data-role="content">
|
||||
<a href="index.html" data-role="button" data-rel="back" data-theme="b">
|
||||
|
||||
<h4>This album costs $10.99 and includes 9 tracks.</h4>
|
||||
<p>Your download will begin immediately on your mobile device and all tracks will by added your your library next time you sync.</p>
|
||||
Purchase album
|
||||
</a>
|
||||
<a href="index.html" data-role="button" data-rel="back" data-theme="b">Purchase album</a>
|
||||
<a href="index.html" data-role="button" data-rel="back">No thanks</a>
|
||||
</div><!-- /content -->
|
||||
</div><!-- /page -->
|
||||
|
|
|
|||
|
|
@ -28,11 +28,8 @@
|
|||
</code>
|
||||
</p>
|
||||
|
||||
<a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Open dialog (Ajax)</a>
|
||||
<a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Open dialog</a>
|
||||
|
||||
<p>To load the dialog as a completely new page instead of pulling it in via Ajax, add <code>rel="external"</code> attribute, just like any standard link. This is useful when linking from a <a href="docs-pages.html">multi-page template</a> to a dialog that's not part of that HTML document. The dialog will by styled exactly like the Ajax version, but there won't be page transition.</p>
|
||||
|
||||
<a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" rel="external" data-transition="pop">Open dialog (rel=external)</a>
|
||||
|
||||
|
||||
<h2>Transitions</h2>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
<li data-role="list-divider">Links that will refresh the page</li>
|
||||
<li><a href="http://www.jquery.com">External domain</a></li>
|
||||
<li><a href="../../index.html" rel="external">Link with rel="external"</a></li>
|
||||
<li><a href="docs/pages/index.html" data-ajax="false">link with [data-ajax="false"]</a></li>
|
||||
<li><a href="index.html" data-ajax="false">link with [data-ajax="false"]</a></li>
|
||||
<li><a href="../../index.html" target="foo">Link with target="foo"</a></li>
|
||||
<li data-role="list-divider">Email links</li>
|
||||
<li><a href="mailto:jdoe@foo.com">Basic email: mailto:jdoe@foo.com</a></li>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
|
||||
<div data-role="page">
|
||||
|
||||
<div data-role="header" data-position="fixed">
|
||||
<div data-role="header" data-position="fixed" data-theme="b">
|
||||
<h1>Fixed toolbars</h1>
|
||||
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
|
||||
</div>
|
||||
|
|
@ -32,96 +32,83 @@
|
|||
|
||||
|
||||
|
||||
<h4>Here is some text to make the page very long</h4>
|
||||
<h3>Some text to make the page very long</h3>
|
||||
|
||||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
|
||||
|
||||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
|
||||
|
||||
|
||||
<h3>And an inset list</h3>
|
||||
|
||||
<ul data-role="listview" data-inset="true">
|
||||
<li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
|
||||
<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
|
||||
<li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li>
|
||||
<li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
|
||||
<li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
|
||||
</ul>
|
||||
|
||||
<br />
|
||||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
|
||||
|
||||
<h4>And an inset list</h4>
|
||||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
|
||||
|
||||
<ul data-role="listview" data-inset="true">
|
||||
<li>
|
||||
<img src="../lists/images/album-bb.jpg" />
|
||||
<h3><a href="index.html">Broken Bells</a></h3>
|
||||
<p>Broken Bells</p>
|
||||
<p class="ui-li-aside">$<strong>11.99</strong></p>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../lists/images/album-hc.jpg" />
|
||||
<h3><a href="index.html">Warning</a></h3>
|
||||
<p>Hot Chip</p>
|
||||
<p class="ui-li-aside">$<strong>12.99</strong></p>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../lists/images/album-p.jpg" />
|
||||
<h3><a href="index.html">Wolfgang Amadeus Phoenix</a></h3>
|
||||
<p>Phoenix</p>
|
||||
<p class="ui-li-aside">$<strong>11.99</strong></p>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../lists/images/album-ok.jpg" />
|
||||
<h3><a href="index.html">Of The Blue Colour Of The Sky</a></h3>
|
||||
<p>Ok Go</p>
|
||||
<p class="ui-li-aside">$<strong>10.99</strong></p>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../lists/images/album-ws.jpg" />
|
||||
<h3><a href="index.html">Elephant</a></h3>
|
||||
<p>The White Stripes</p>
|
||||
<p class="ui-li-aside">$<strong>9.99</strong></p>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../lists/images/album-rh.jpg" />
|
||||
<h3><a href="index.html">Kid A</a></h3>
|
||||
<p>Radiohead</p>
|
||||
<p class="ui-li-aside">$<strong>11.99</strong></p>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../lists/images/album-xx.jpg" />
|
||||
<h3><a href="index.html">XX</a></h3>
|
||||
<p>XX</p>
|
||||
<p class="ui-li-aside">$<strong>10.99</strong></p>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../lists/images/album-mg.jpg" />
|
||||
<h3><a href="index.html">Congratulations</a></h3>
|
||||
<p>MGMT</p>
|
||||
<p class="ui-li-aside">$<strong>12.99</strong></p>
|
||||
</li>
|
||||
|
||||
<h3>Embedded form</h3>
|
||||
|
||||
<form action="#" method="get">
|
||||
|
||||
<li>
|
||||
<img src="../lists/images/album-ag.jpg" />
|
||||
<h3><a href="index.html">Ashes Grammar</a></h3>
|
||||
<p>A Sunny Day in Glasgow</p>
|
||||
<p class="ui-li-aside">$<strong>11.99</strong></p>
|
||||
</li>
|
||||
<div data-role="fieldcontain">
|
||||
<label for="name">Text Input:</label>
|
||||
<input type="text" name="name" id="name" value="" />
|
||||
</div>
|
||||
|
||||
<li>
|
||||
<img src="../lists/images/album-k.jpg" />
|
||||
<h3><a href="index.html">Hot Fuss</a></h3>
|
||||
<p>Killers</p>
|
||||
<p class="ui-li-aside">$<strong>12.99</strong></p>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../lists/images/album-af.jpg" />
|
||||
<h3><a href="index.html">The Suburbs</a></h3>
|
||||
<p>Arcade Fire</p>
|
||||
<p class="ui-li-aside">$<strong>12.99</strong></p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
|
||||
|
||||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
|
||||
|
||||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
|
||||
<div data-role="fieldcontain">
|
||||
<label for="textarea">Textarea:</label>
|
||||
<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
|
||||
</div>
|
||||
|
||||
<div data-role="fieldcontain">
|
||||
<label for="slider2">Flip switch:</label>
|
||||
<select name="slider2" id="slider2" data-role="slider">
|
||||
<option value="off">Off</option>
|
||||
<option value="on">On</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div data-role="fieldcontain">
|
||||
<label for="slider">Slider:</label>
|
||||
<input type="range" name="slider" id="slider" value="0" min="0" max="100" />
|
||||
</div>
|
||||
|
||||
|
||||
<div data-role="fieldcontain">
|
||||
<label for="select-choice-1" class="select">Choose shipping method:</label>
|
||||
<select name="select-choice-1" id="select-choice-1">
|
||||
<option value="standard">Standard: 7 day</option>
|
||||
<option value="rush">Rush: 3 days</option>
|
||||
<option value="express">Express: next day</option>
|
||||
<option value="overnight">Overnight</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="ui-body ui-body-b">
|
||||
<fieldset class="ui-grid-a">
|
||||
<div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
|
||||
<div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<h3>A bit more text</h3>
|
||||
|
||||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div data-role="footer" data-position="fixed">
|
||||
<div data-role="footer" data-position="fixed" data-theme="a">
|
||||
<h1>Fixed Footer</h1>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
|
||||
<div data-role="content">
|
||||
|
||||
<p>This page is a demo of a persistent footer navigation bar. At the foot of the page, you'll see a persistent horizontal navigation bar. Click on any of the links, and you'll see the page content transition but the footer remain fixed: The footer sticks persistently even when transitioning to a new HTML page, because the footer on all four HTML pages has the same <code>data-id</code> attribute. </p>
|
||||
<p>This page is a demo of a persistent footer navigation bar. At the foot of the page, you'll see a persistent horizontal navigation bar. Click on any of the links, and you'll see the page content transition but the footer remain fixed: The footer sticks persistently even when transitioning to a new HTML page, because the footer on all four HTML pages has the same <code>data-id</code> attribute. <strong>Note:</strong> If you'd like an active button in your navbar to remain active when you return to it again, add a class of <code>ui-state-persist</code> in addition to <code>ui-btn-active</code></p>
|
||||
|
||||
|
||||
|
||||
|
|
@ -67,7 +67,7 @@
|
|||
<div data-role="footer" data-id="foo1" data-position="fixed">
|
||||
<div data-role="navbar">
|
||||
<ul>
|
||||
<li><a href="footer-persist-a.html" class="ui-btn-active">Friends</a></li>
|
||||
<li><a href="footer-persist-a.html" class="ui-btn-active ui-state-persist">Friends</a></li>
|
||||
<li><a href="footer-persist-b.html">Albums</a></li>
|
||||
<li><a href="footer-persist-c.html">Emails</a></li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -19,75 +19,77 @@
|
|||
</div>
|
||||
|
||||
<div data-role="content">
|
||||
<ul data-role="listview" data-split-icon="gear" data-split-theme="b">
|
||||
<li>
|
||||
<img src="../lists/images/album-bb.jpg" />
|
||||
<h3><a href="index.html">Broken Bells</a></h3>
|
||||
<p>Broken Bells</p>
|
||||
<a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../lists/images/album-hc.jpg" />
|
||||
<h3><a href="index.html">Warning</a></h3>
|
||||
<p>Hot Chip</p>
|
||||
<a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../lists/images/album-p.jpg" />
|
||||
<h3><a href="index.html">Wolfgang Amadeus Phoenix</a></h3>
|
||||
<p>Phoenix</p>
|
||||
<a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../lists/images/album-ok.jpg" />
|
||||
<h3><a href="index.html">Of The Blue Colour Of The Sky</a></h3>
|
||||
<p>Ok Go</p>
|
||||
<a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../lists/images/album-ws.jpg" />
|
||||
<h3><a href="index.html">Elephant</a></h3>
|
||||
<p>The White Stripes</p>
|
||||
<a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../lists/images/album-rh.jpg" />
|
||||
<h3><a href="index.html">Kid A</a></h3>
|
||||
<p>Radiohead</p>
|
||||
<a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../lists/images/album-xx.jpg" />
|
||||
<h3><a href="index.html">XX</a></h3>
|
||||
<p>XX</p>
|
||||
<a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../lists/images/album-mg.jpg" />
|
||||
<h3><a href="index.html">Congratulations</a></h3>
|
||||
<p>MGMT</p>
|
||||
<a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../lists/images/album-ag.jpg" />
|
||||
<h3><a href="index.html">Ashes Grammar</a></h3>
|
||||
<p>A Sunny Day in Glasgow</p>
|
||||
<a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="../lists/images/album-k.jpg" />
|
||||
<h3><a href="index.html">Hot Fuss</a></h3>
|
||||
<p>Killers</p>
|
||||
<a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../lists/images/album-af.jpg" />
|
||||
<h3><a href="index.html">The Suburbs</a></h3>
|
||||
<p>Arcade Fire</p>
|
||||
<a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul data-role="listview" data-split-icon="gear" data-split-theme="d">
|
||||
<li><a href="index.html">
|
||||
<img src="../lists/images/album-bb.jpg" />
|
||||
<h3>Broken Bells</h3>
|
||||
<p>Broken Bells</p>
|
||||
</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
|
||||
</a></li>
|
||||
<li><a href="index.html">
|
||||
|
||||
<img src="../lists/images/album-hc.jpg" />
|
||||
<h3>Warning</h3>
|
||||
<p>Hot Chip</p>
|
||||
|
||||
</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
|
||||
</a></li>
|
||||
<li><a href="index.html">
|
||||
<img src="../lists/images/album-p.jpg" />
|
||||
<h3>Wolfgang Amadeus Phoenix</h3>
|
||||
<p>Phoenix</p>
|
||||
</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
|
||||
</a></li>
|
||||
<li><a href="index.html">
|
||||
<img src="../lists/images/album-ok.jpg" />
|
||||
<h3>Of The Blue Colour Of The Sky</h3>
|
||||
<p>Ok Go</p>
|
||||
</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
|
||||
</a></li>
|
||||
<li><a href="index.html">
|
||||
<img src="../lists/images/album-ws.jpg" />
|
||||
<h3>Elephant</h3>
|
||||
<p>The White Stripes</p>
|
||||
</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
|
||||
</a></li>
|
||||
<li><a href="index.html">
|
||||
<img src="../lists/images/album-rh.jpg" />
|
||||
<h3>Kid A</h3>
|
||||
<p>Radiohead</p>
|
||||
</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
|
||||
</a></li>
|
||||
<li><a href="index.html">
|
||||
<img src="../lists/images/album-xx.jpg" />
|
||||
<h3>XX</h3>
|
||||
<p>XX</p>
|
||||
</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
|
||||
</a></li>
|
||||
<li><a href="index.html">
|
||||
<img src="../lists/images/album-mg.jpg" />
|
||||
<h3>Congratulations</h3>
|
||||
<p>MGMT</p>
|
||||
</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
|
||||
</a></li>
|
||||
<li><a href="index.html">
|
||||
<img src="../lists/images/album-ag.jpg" />
|
||||
<h3>Ashes Grammar</h3>
|
||||
<p>A Sunny Day in Glasgow</p>
|
||||
</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
|
||||
</a></li>
|
||||
|
||||
<li><a href="index.html">
|
||||
<img src="../lists/images/album-k.jpg" />
|
||||
<h3>Hot Fuss</h3>
|
||||
<p>Killers</p>
|
||||
</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
|
||||
</a></li>
|
||||
<li><a href="index.html">
|
||||
<img src="../lists/images/album-af.jpg" />
|
||||
<h3>The Suburbs</h3>
|
||||
<p>Arcade Fire</p>
|
||||
</a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
|
||||
</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
|
@ -96,7 +98,7 @@
|
|||
<div data-role="navbar">
|
||||
<ul>
|
||||
<li><a href="footer-persist-a.html">Friends</a></li>
|
||||
<li><a href="footer-persist-b.html" class="ui-btn-active">Albums</a></li>
|
||||
<li><a href="footer-persist-b.html" class="ui-btn-active ui-state-persist">Albums</a></li>
|
||||
<li><a href="footer-persist-c.html">Emails</a></li>
|
||||
</ul>
|
||||
</div><!-- /navbar -->
|
||||
|
|
|
|||
|
|
@ -20,59 +20,63 @@
|
|||
|
||||
<div data-role="content">
|
||||
<ul data-role="listview">
|
||||
<li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></li>
|
||||
<li>
|
||||
<h3><a href="index.html">Stephen Weber</a></h3>
|
||||
<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
|
||||
<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
|
||||
<p class="ui-li-aside"><strong>6:24</strong>PM</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3><a href="index.html">jQuery Team</a></h3>
|
||||
<p><strong>Boston Conference Planning</strong></p>
|
||||
<p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
|
||||
<p class="ui-li-aside"><strong>9:18</strong>AM</p>
|
||||
</li>
|
||||
<li data-role="list-divider">Thursday, October 7, 2010 <span class="ui-li-count">1</span></li>
|
||||
<li>
|
||||
<h3><a href="index.html">Avery Walker</a></h3>
|
||||
<p><strong>Re: Dinner Tonight</strong></p>
|
||||
<p>Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait! </p>
|
||||
<p class="ui-li-aside"><strong>4:48</strong>PM</p>
|
||||
</li>
|
||||
<li data-role="list-divider">Wednesday, October 6, 2010 <span class="ui-li-count">3</span></li>
|
||||
<li>
|
||||
<h3><a href="index.html">Amazon.com</a></h3>
|
||||
<p><strong>4-for-3 Books for Kids</strong></p>
|
||||
<p>As someone who has purchased children's books from our 4-for-3 Store, you may be interested in these featured books.</p>
|
||||
<p class="ui-li-aside"><strong>12:47</strong>PM</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3><a href="index.html">Mike Taylor</a></h3>
|
||||
<p><strong>Re: This weekend in Maine</strong></p>
|
||||
<p>Hey little buddy, sorry but I can't make it up to vacationland this weekend. Maybe next weekend?</p>
|
||||
<p class="ui-li-aside"><strong>6:24</strong>AM</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3><a href="index.html">Redfin</a></h3>
|
||||
<p><strong>Redfin listing updates for today</strong></p>
|
||||
<p>There are 3 updates for the home on your watchlist: 1 updated MLS listing and 2 homes under contract.</p>
|
||||
<p class="ui-li-aside"><strong>5:52</strong>AM</p>
|
||||
</li>
|
||||
<li data-role="list-divider">Tuesday, October 5, 2010 <span class="ui-li-count">3</span></li>
|
||||
<li>
|
||||
<h3><a href="index.html">Angela Smith</a></h3>
|
||||
<p><strong>Link Request</strong></p>
|
||||
<p>My name is Angela Smith, SEO Consultant. I've greatly enjoyed looking through your site and I was wondering if you'd be interested in providing a link</p>
|
||||
<li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></li>
|
||||
<li><a href="index.html">
|
||||
|
||||
<h3>Stephen Weber</h3>
|
||||
<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
|
||||
<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
|
||||
<p class="ui-li-aside"><strong>6:24</strong>PM</p>
|
||||
|
||||
</a></li>
|
||||
<li><a href="index.html">
|
||||
|
||||
<h3>jQuery Team</h3>
|
||||
<p><strong>Boston Conference Planning</strong></p>
|
||||
<p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
|
||||
<p class="ui-li-aside"><strong>9:18</strong>AM</p>
|
||||
|
||||
</a></li>
|
||||
<li data-role="list-divider">Thursday, October 7, 2010 <span class="ui-li-count">1</span></li>
|
||||
<li><a href="index.html">
|
||||
<h3>Avery Walker</h3>
|
||||
<p><strong>Re: Dinner Tonight</strong></p>
|
||||
<p>Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait! </p>
|
||||
<p class="ui-li-aside"><strong>4:48</strong>PM</p>
|
||||
</a></li>
|
||||
<li data-role="list-divider">Wednesday, October 6, 2010 <span class="ui-li-count">3</span></li>
|
||||
<li><a href="index.html">
|
||||
<h3>Amazon.com</h3>
|
||||
<p><strong>4-for-3 Books for Kids</strong></p>
|
||||
<p>As someone who has purchased children's books from our 4-for-3 Store, you may be interested in these featured books.</p>
|
||||
<p class="ui-li-aside"><strong>12:47</strong>PM</p>
|
||||
</a></li>
|
||||
<li><a href="index.html">
|
||||
<h3>Mike Taylor</h3>
|
||||
<p><strong>Re: This weekend in Maine</strong></p>
|
||||
<p>Hey little buddy, sorry but I can't make it up to vacationland this weekend. Maybe next weekend?</p>
|
||||
<p class="ui-li-aside"><strong>6:24</strong>AM</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3><a href="index.html">Mike Taylor</a></h3>
|
||||
<p><strong>This weekend in Maine</strong></p>
|
||||
<p>Sounds good, let me check into our plans.</p>
|
||||
<p class="ui-li-aside"><strong>6:24</strong>AM</p>
|
||||
</li>
|
||||
</ul>
|
||||
</a></li>
|
||||
<li><a href="index.html">
|
||||
<h3>Redfin</h3>
|
||||
<p><strong>Redfin listing updates for today</strong></p>
|
||||
<p>There are 3 updates for the home on your watchlist: 1 updated MLS listing and 2 homes under contract.</p>
|
||||
<p class="ui-li-aside"><strong>5:52</strong>AM</p>
|
||||
</a></li>
|
||||
<li data-role="list-divider">Tuesday, October 5, 2010 <span class="ui-li-count">3</span></li>
|
||||
<li><a href="index.html">
|
||||
<h3>Angela Smith</h3>
|
||||
<p><strong>Link Request</strong></p>
|
||||
<p>My name is Angela Smith, SEO Consultant. I've greatly enjoyed looking through your site and I was wondering if you'd be interested in providing a link</p>
|
||||
<p class="ui-li-aside"><strong>6:24</strong>AM</p>
|
||||
</a></li>
|
||||
<li><a href="index.html">
|
||||
<h3>Mike Taylor</h3>
|
||||
<p><strong>This weekend in Maine</strong></p>
|
||||
<p>Sounds good, let me check into our plans.</p>
|
||||
<p class="ui-li-aside"><strong>6:24</strong>AM</p>
|
||||
</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div data-role="footer" data-id="foo1" data-position="fixed">
|
||||
|
|
@ -80,7 +84,7 @@
|
|||
<ul>
|
||||
<li><a href="footer-persist-a.html">Friends</a></li>
|
||||
<li><a href="footer-persist-b.html">Albums</a></li>
|
||||
<li><a href="footer-persist-c.html" class="ui-btn-active">Emails</a></li>
|
||||
<li><a href="footer-persist-c.html" class="ui-btn-active ui-state-persist">Emails</a></li>
|
||||
</ul>
|
||||
</div><!-- /navbar -->
|
||||
</div><!-- /footer -->
|
||||
|
|
|
|||
|
|
@ -104,34 +104,34 @@ $.fixedToolbars = (function(){
|
|||
//before page is shown, check for duplicate footer
|
||||
$('.ui-page').live('pagebeforeshow', function(event, ui){
|
||||
var page = $(event.target),
|
||||
footer = page.find( ":jqmData(role='footer'):not(.ui-sticky-footer)" ),
|
||||
id = footer.jqmData('id');
|
||||
stickyFooter = null;
|
||||
if (id)
|
||||
{
|
||||
stickyFooter = $( ".ui-footer:jqmData(id='" + id + "').ui-sticky-footer" );
|
||||
if (stickyFooter.length == 0) {
|
||||
// No sticky footer exists for this data-id. We'll use this
|
||||
// footer as the sticky footer for the group and then create
|
||||
// a placeholder footer for the page.
|
||||
stickyFooter = footer;
|
||||
footer = stickyFooter.clone(); // footer placeholder
|
||||
stickyFooter.addClass('ui-sticky-footer').before(footer);
|
||||
}
|
||||
footer.addClass('ui-footer-duplicate');
|
||||
stickyFooter.appendTo($.mobile.pageContainer).css('top',0);
|
||||
setTop(stickyFooter);
|
||||
footer = page.find( ":jqmData(role='footer')" ),
|
||||
id = footer.data('id'),
|
||||
prevPage = ui.prevPage;
|
||||
|
||||
prevFooter = prevPage && prevPage.find( ":jqmData(role='footer')" );
|
||||
var prevFooterMatches = prevFooter.jqmData( "id" ) === id;
|
||||
|
||||
if( prevFooterMatches ){
|
||||
stickyFooter = footer;
|
||||
setTop( stickyFooter.removeClass("fade").appendTo( $.mobile.pageContainer ) );
|
||||
}
|
||||
});
|
||||
|
||||
//after page is shown, append footer to new page
|
||||
$('.ui-page').live('pageshow', function(event, ui){
|
||||
if( stickyFooter && stickyFooter.length ){
|
||||
stickyFooter.appendTo(event.target).css('top',0);
|
||||
}
|
||||
$.fixedToolbars.show(true, this);
|
||||
});
|
||||
var $this = $(this);
|
||||
|
||||
if( stickyFooter && stickyFooter.length ){
|
||||
|
||||
setTimeout(function(){
|
||||
setTop( stickyFooter.appendTo( $this ) );
|
||||
stickyFooter = null;
|
||||
},400);
|
||||
}
|
||||
|
||||
$.fixedToolbars.show(true, this);
|
||||
});
|
||||
|
||||
|
||||
// element.getBoundingClientRect() is broken in iOS 3.2.1 on the iPad. The
|
||||
// coordinates inside of the rect it returns don't have the page scroll position
|
||||
|
|
|
|||
|
|
@ -33,8 +33,8 @@ $.widget( "mobile.navbar", $.mobile.widget, {
|
|||
});
|
||||
|
||||
$navbar.delegate("a", "vclick",function(event){
|
||||
$navbtns.removeClass( "ui-btn-active" );
|
||||
$( this ).addClass( "ui-btn-active" );
|
||||
$navbtns.not( ".ui-state-persist" ).removeClass( $.mobile.activeBtnClass );
|
||||
$( this ).addClass( $.mobile.activeBtnClass );
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -105,13 +105,13 @@
|
|||
},
|
||||
|
||||
// addNew is used whenever a new page is added
|
||||
addNew: function( url, transition ){
|
||||
addNew: function( url, transition, storedTo ){
|
||||
//if there's forward history, wipe it
|
||||
if( urlHistory.getNext() ){
|
||||
urlHistory.clearForward();
|
||||
}
|
||||
|
||||
urlHistory.stack.push( {url : url, transition: transition } );
|
||||
urlHistory.stack.push( {url : url, transition: transition, page: storedTo } );
|
||||
|
||||
urlHistory.activeIndex = urlHistory.stack.length - 1;
|
||||
},
|
||||
|
|
@ -402,7 +402,7 @@
|
|||
|
||||
//add page to history stack if it's not back or forward
|
||||
if( !back && !forward ){
|
||||
urlHistory.addNew( url, transition );
|
||||
urlHistory.addNew( url, transition, to );
|
||||
}
|
||||
|
||||
removeActiveLinkClass();
|
||||
|
|
@ -764,20 +764,29 @@
|
|||
return;
|
||||
}
|
||||
|
||||
// special case for dialogs requires heading back or forward until we find a non dialog page
|
||||
// special case for dialogs
|
||||
if( urlHistory.stack.length > 1 &&
|
||||
to.indexOf( dialogHashKey ) > -1 &&
|
||||
!$.mobile.activePage.is( ".ui-dialog" ) ){
|
||||
to.indexOf( dialogHashKey ) > -1 ){
|
||||
|
||||
//determine if we're heading forward or backward and continue accordingly past
|
||||
//the current dialog
|
||||
urlHistory.directHashChange({
|
||||
currentUrl: to,
|
||||
isBack: function(){ window.history.back(); },
|
||||
isForward: function(){ window.history.forward(); }
|
||||
});
|
||||
// If current active page is not a dialog skip the dialog and continue
|
||||
// in the same direction
|
||||
if(!$.mobile.activePage.is( ".ui-dialog" )) {
|
||||
//determine if we're heading forward or backward and continue accordingly past
|
||||
//the current dialog
|
||||
urlHistory.directHashChange({
|
||||
currentUrl: to,
|
||||
isBack: function(){ window.history.back(); },
|
||||
isForward: function(){ window.history.forward(); }
|
||||
});
|
||||
|
||||
return;
|
||||
// prevent changepage
|
||||
return;
|
||||
} else {
|
||||
var setTo = function(){ to = $.mobile.urlHistory.getActive().page; };
|
||||
// if the current active page is a dialog and we're navigating
|
||||
// to a dialog use the dialog objected saved in the stack
|
||||
urlHistory.directHashChange({ currentUrl: to, isBack: setTo, isForward: setTo });
|
||||
}
|
||||
}
|
||||
|
||||
//if to is defined, load it
|
||||
|
|
|
|||
|
|
@ -130,5 +130,20 @@
|
|||
<div id="skip-dialog-second" data-nstest-role="page">
|
||||
<a href="#" data-nstest-rel="back">Go Back</a>
|
||||
</div>
|
||||
|
||||
<div id="nested-dialog-page" data-nstest-role="page">
|
||||
<div data-nstest-role="content">
|
||||
<a href="#nested-dialog-first">Dialog</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="nested-dialog-first" data-nstest-role="dialog">
|
||||
<div data-nstest-role="content">
|
||||
<a href="#nested-dialog-second">Dialog 2</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="nested-dialog-second" data-nstest-role="dialog">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -295,5 +295,27 @@
|
|||
start();
|
||||
}], 1000);
|
||||
});
|
||||
|
||||
asyncTest( "going back from a dialog triggered from a dialog should result in the first dialog ", function(){
|
||||
$.mobile.urlHistory.activeIndex = 0;
|
||||
$.mobile.urlHistory.stack = [];
|
||||
$.testHelper.openPage("#nested-dialog-page");
|
||||
|
||||
$.testHelper.sequence([
|
||||
// transition to the dialog
|
||||
function(){ $("#nested-dialog-page a").click(); },
|
||||
|
||||
// transition to the second dialog
|
||||
function(){ $("#nested-dialog-first a").click(); },
|
||||
|
||||
// transition to back to the first dialog
|
||||
function(){ window.history.back(); },
|
||||
|
||||
// make sure we're on first dialog
|
||||
function(){
|
||||
same($(".ui-page-active")[0], $("#nested-dialog-first")[0], "should be the first dialog");
|
||||
start();
|
||||
}], 1000);
|
||||
});
|
||||
})(jQuery);
|
||||
|
||||
|
|
|
|||
|
|
@ -77,7 +77,6 @@
|
|||
font-weight: bold;
|
||||
color: #fff;
|
||||
text-shadow: 0 -1px 1px #000;
|
||||
text-decoration: none;
|
||||
background-image: -moz-linear-gradient(top,
|
||||
#555555,
|
||||
#333333);
|
||||
|
|
@ -95,7 +94,6 @@
|
|||
font-weight: bold;
|
||||
color: #fff;
|
||||
text-shadow: 0 -1px 1px #000;
|
||||
text-decoration: none;
|
||||
background-image: -moz-linear-gradient(top,
|
||||
#666666,
|
||||
#444444);
|
||||
|
|
@ -128,6 +126,7 @@
|
|||
.ui-btn-hover-a,
|
||||
.ui-btn-down-a {
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -197,7 +196,6 @@
|
|||
font-weight: bold;
|
||||
color: #fff;
|
||||
text-shadow: 0 -1px 1px #145072;
|
||||
text-decoration: none;
|
||||
background-image: -moz-linear-gradient(top,
|
||||
#4e89c5,
|
||||
#2567ab);
|
||||
|
|
@ -218,7 +216,6 @@
|
|||
background-image: -moz-linear-gradient(top,
|
||||
#72b0d4,
|
||||
#4b88b6);
|
||||
text-decoration: none;
|
||||
background-image: -webkit-gradient(linear,left top,left bottom,
|
||||
color-stop(0, #72b0d4),
|
||||
color-stop(1, #4b88b6));
|
||||
|
|
@ -248,6 +245,7 @@
|
|||
.ui-btn-hover-b,
|
||||
.ui-btn-down-b {
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -309,7 +307,6 @@
|
|||
font-weight: bold;
|
||||
color: #444;
|
||||
text-shadow: 0 1px 1px #f6f6f6;
|
||||
text-decoration: none;
|
||||
background-image: -moz-linear-gradient(top,
|
||||
#fefefe,
|
||||
#eeeeee);
|
||||
|
|
@ -327,7 +324,6 @@
|
|||
background: #dadada;
|
||||
font-weight: bold;
|
||||
color: #101010;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 1px 1px #fff;
|
||||
background-image: -moz-linear-gradient(top,
|
||||
#ededed,
|
||||
|
|
@ -361,6 +357,7 @@
|
|||
.ui-btn-hover-c,
|
||||
.ui-btn-down-c {
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -419,7 +416,6 @@
|
|||
background: #fff;
|
||||
font-weight: bold;
|
||||
color: #444;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 1px 1px #fff;
|
||||
}
|
||||
.ui-btn-up-d a.ui-link-inherit {
|
||||
|
|
@ -432,7 +428,6 @@
|
|||
color: #222;
|
||||
cursor: pointer;
|
||||
text-shadow: 0 1px 1px #fff;
|
||||
text-decoration: none;
|
||||
background-image: -moz-linear-gradient(top,
|
||||
#fdfdfd,
|
||||
#eeeeee);
|
||||
|
|
@ -476,6 +471,7 @@
|
|||
.ui-btn-hover-d,
|
||||
.ui-btn-down-d {
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -542,7 +538,6 @@
|
|||
font-weight: bold;
|
||||
color: #333;
|
||||
text-shadow: 0 1px 1px #fe3;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
background-image: -moz-linear-gradient(top,
|
||||
#fceda7,
|
||||
|
|
@ -560,7 +555,6 @@
|
|||
background: #fbe26f;
|
||||
font-weight: bold;
|
||||
color: #111;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 1px 1px #fff;
|
||||
background-image: -moz-linear-gradient(top,
|
||||
#fcf0b5,
|
||||
|
|
@ -595,6 +589,7 @@
|
|||
.ui-btn-hover-e,
|
||||
.ui-btn-down-e {
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue