这里直接给出四个html，可以轮番切换
一、index.html
<!DOCTYPE html> <html> <head> <title>Splashscreen Example</title> <script type="text/javascript" charset="utf-8" src="cordova.js"></script> <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.css" /> <script type="text/javascript" charset="utf-8" src="js/jquery-1.11.2.min.js"></script> <script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.4.5.min.js"></script> <script type="text/javascript" charset="utf-8" src="js/swap_page.js"></script> <script> $(function() { $( "[data-role='navbar']" ).navbar(); $( "[data-role='header'], [data-role='footer']" ).toolbar(); }); // Update the contents of the toolbars </script> </head> <body> <div data-role="header" data-position="fixed" data-theme="a"> <a href="../toolbar/" data-rel="back" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a> <h1>Info</h1> <a href="#add-form" data-icon="gear" data-iconpos="notext" class="ui-link ui-btn-right ui-btn ui-icon-gear ui-btn-icon-notext ui-shadow ui-corner-all" data-role="button" role="button">Add</a> </div><!-- /header --> <div data-role="page" data-title="Info" id="index" class="jqm-demos" data-dom-cache="true" data-theme="a" data-prev="page-d" data-next="page-b"> <div data-role="panel" data-position="right" data-position-fixed="true" data-display="overlay" data-theme="a" id="add-form"> <form class="userform"> <h2>Login</h2> <label for="name">Username:</label> <input type="text" name="name" id="name" value="" data-clear-btn="true" data-mini="true"> <label for="password">Password:</label> <input type="password" name="password" id="password" value="" data-clear-btn="true" autocomplete="off" data-mini="true"> <div class="ui-grid-a"> <div class="ui-block-a"><a href="#" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-b ui-mini">Cancel</a></div> <div class="ui-block-b"><a href="#" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-a ui-mini">Save</a></div> </div> </form> </div> <div role="main" class="ui-content jqm-content jqm-fullwidth"> <h1>Persistent toolbars</h1> <p>These pages are a demo of a persistent <a href="http://www.baidu.com" data-ajax="false">Baidu</a> in a fixed footer toolbar. Click on any of the links in the footer, and you'll see the page content transition. Both the persistent header and footer on these pages remain in place during the animation to a new HTML page.</p> <p>With the new external toolbars no extra effort is required to now have persistent toolbars. Simply place them outside of the page container on each page they will be loaded on the first page and persist on subsequent pages. The toolbars still need to be placed on each page to account for refresh however they will be ignored if not within a page container.</p> <p>Typically, the persistent toolbar technique will be combined with fixed positioning.</p> <h2>Updating toolbar contents</h2> <p>Because the same toolbar is used on every page, you might want to update the content. In this demo we show how to change the heading in the header and set the nav button of the page currently in view to the active state.</p> <div data-demo-js="true"></div> <h2>Improving page load with persistent toolbars</h2> <p>By combining this technique with a little bit of server side logic you can reduce the file size for each page load significantly by not sending anything except the actual page container back when the request is from ajax. this not only reduces file size but makes the actual processing of the page quicker also. To see an example of this technique see <a href="../toolbar-fixed-persistent-optimized/" data-ajax="false">Ajax optimized persistent toolbars</a></p> <h3>A note about transitions</h3> <p>By Removing the toolbars from the page container they are no longer part of the page transition which dramaticly improves the performance of complex 3D page transitions over the older style of persistent toolbars.</p> </div><!-- /content --> </div><!-- /page --> <div data-role="footer" data-position="fixed" data-theme="a"> <div data-role="navbar"> <ul> <li><a href="index.html" data-prefetch="true">Info</a></li> <li><a href="page-b.html" data-prefetch="true">Friends</a></li> <li><a href="page-c.html" data-prefetch="true">Albums</a></li> <li><a href="page-d.html" data-prefetch="true">Emails</a></li> </ul> </div><!-- /navbar --> </div><!-- /footer --> </body> </html>二、page-b.html
<!DOCTYPE html> <html> <head> <title>Splashscreen Example</title> <script type="text/javascript" charset="utf-8" src="cordova.js"></script> <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.css" /> <script type="text/javascript" charset="utf-8" src="js/jquery-1.11.2.min.js"></script> <script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.4.5.min.js"></script> <script type="text/javascript" charset="utf-8" src="js/swap_page.js"></script> <script> $(function() { $( "[data-role='navbar']" ).navbar(); $( "[data-role='header'], [data-role='footer']" ).toolbar(); }); // Update the contents of the toolbars </script> </head> <body> <div data-role="page" data-title="Friends" id="page-b" class="jqm-demos" data-dom-cache="true" data-theme="a" data-prev="index" data-next="page-c"> <div data-role="panel" data-position="right" data-position-fixed="true" data-display="overlay" data-theme="a" id="add-form"> <h1>hahaha</h1> <p>哈哈哈啊哈哈</p> </div> <div class="ui-content" role="main"> <ul data-role="listview" data-theme="a" data-dividertheme="e" data-filter="true" data-filter-theme="a" data-filter-placeholder="Search friends..."> <li data-role="list-divider">A</li> <li><a href="#">Adam Kinkaid</a></li> <li><a href="#">Alex Wickerham</a></li> <li><a href="#">Avery Johnson</a></li> <li data-role="list-divider">B</li> <li><a href="#">Bob Cabot</a></li> <li data-role="list-divider">C</li> <li><a href="#">Caleb Booth</a></li> <li><a href="#">Christopher Adams</a></li> <li><a href="#">Culver James</a></li> <li data-role="list-divider">D</li> <li><a href="#">David Walsh</a></li> <li><a href="#">Drake Alfred</a></li> <li data-role="list-divider">E</li> <li><a href="#">Elizabeth Bacon</a></li> <li><a href="#">Emery Parker</a></li> <li><a href="#">Enid Voldon</a></li> <li data-role="list-divider">F</li> <li><a href="#">Francis Wall</a></li> <li data-role="list-divider">G</li> <li><a href="#">Graham Smith</a></li> <li><a href="#">Greta Peete</a></li> <li data-role="list-divider">H</li> <li><a href="#">Harvey Walls</a></li> <li data-role="list-divider">M</li> <li><a href="#">Mike Farnsworth</a></li> <li><a href="#">Murray Vanderbuilt</a></li> <li data-role="list-divider">N</li> <li><a href="#">Nathan Williams</a></li> <li data-role="list-divider">P</li> <li><a href="#">Paul Baker</a></li> <li><a href="#">Pete Mason</a></li> <li data-role="list-divider">R</li> <li><a href="#">Rod Tarker</a></li> <li data-role="list-divider">S</li> <li><a href="#">Sawyer Wakefield</a></li> </ul> </div><!-- /content --> </div><!-- /page --> </body> </html>三、page-c.html
<!DOCTYPE html> <html> <head> <title>Splashscreen Example</title> <script type="text/javascript" charset="utf-8" src="cordova.js"></script> <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.css" /> <script type="text/javascript" charset="utf-8" src="js/jquery-1.11.2.min.js"></script> <script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.4.5.min.js"></script> <script type="text/javascript" charset="utf-8" src="js/swap_page.js"></script> <script> $(function() { $( "[data-role='navbar']" ).navbar(); $( "[data-role='header'], [data-role='footer']" ).toolbar(); }); </script> </head> <body> <div data-role="page" data-title="Albums" id="page-c" class="jqm-demos" data-dom-cache="true" data-theme="a" data-prev="page-b" data-next="page-d"> <div data-role="panel" data-position="right" data-position-fixed="true" data-display="overlay" data-theme="a" id="add-form"> <h1>hahaha</h1> <p>哈哈哈啊哈哈</p> </div> <div class="ui-content" role="main"> <ul data-role="listview" data-split-icon="gear" data-split-theme="a" data-inset="false"> <li><a href="#"> <img src="img/1.jpg"> <h2>Broken Bells</h2> <p>Broken Bells</p></a> <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a> </li> <li><a href="#"> <img src="img/2.jpg"> <h2>Warning</h2> <p>Hot Chip</p></a> <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a> </li> <li><a href="#"> <img src="img/3.jpg"> <h2>Wolfgang Amadeus Phoenix</h2> <p>Phoenix</p></a> <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a> </li> <li><a href="#"> <img src="img/1.jpg"> <h3>Of The Blue Colour Of The Sky</h3> <p>Ok Go</p> <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a> </a></li> <li><a href="#"> <img src="img/3.jpg"> <h3>Elephant</h3> <p>The White Stripes</p> <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a> </a></li> <li><a href="#"> <img src="img/2.jpg"> <h3>Kid A</h3> <p>Radiohead</p> <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a> </a></li> <li><a href="#"> <img src="img/3.jpg"> <h3>XX</h3> <p>XX</p> <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a> </a></li> <li><a href="#"> <img src="img/1.jpg"> <h3>Congratulations</h3> <p>MGMT</p> <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a> </a></li> <li><a href="#"> <img src="img/1.jpg"> <h3>Ashes Grammar</h3> <p>A Sunny Day in Glasgow</p> <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a> </a></li> <li><a href="index.html"> <img src="img/1.jpg"> <h3>Hot Fuss</h3> <p>Killers</p> <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a> </a></li> <li><a href="#"> <img src="img/1.jpg"> <h3>The Suburbs</h3> <p>Arcade Fire</p> <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a> </a></li> </ul> <div data-role="popup" id="purchase" data-overlay-theme="b" class="ui-content" style="max-width:340px; padding-bottom:2em;"> <h3>Purchase Album?</h3> <p>Your download will begin immediately on your mobile device when you purchase.</p> <a href="#" class="ui-btn ui-btn-b ui-btn-inline ui-mini ui-corner-all ui-shadow ui-btn-icon-left ui-icon-check" data-rel="back">Buy: $10.99</a> <a href="#" class="ui-btn ui-btn-inline ui-mini ui-corner-all ui-shadow" data-rel="back">Cancel</a> </div> </div><!-- /content --> </div><!-- /page --> </body> </html>四、page-d.html
<!DOCTYPE html> <html> <head> <title>Splashscreen Example</title> <script type="text/javascript" charset="utf-8" src="cordova.js"></script> <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.css" /> <script type="text/javascript" charset="utf-8" src="js/jquery-1.11.2.min.js"></script> <script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.4.5.min.js"></script> <script type="text/javascript" charset="utf-8" src="js/swap_page.js"></script> <script> $(function() { $( "[data-role='navbar']" ).navbar(); $( "[data-role='header'], [data-role='footer']" ).toolbar(); }); // Update the contents of the toolbars </script> </head> <body> <div data-role="page" data-title="Emails" id="page-d" class="jqm-demos" data-dom-cache="true" data-theme="a" data-prev="page-c" data-next="index"> <div data-role="panel" data-position="right" data-position-fixed="true" data-display="overlay" data-theme="a" id="add-form"> <form class="userform"> <h2>Login</h2> <label for="name">Username:</label> <input type="text" name="name" id="name" value="" data-clear-btn="true" data-mini="true"> <label for="password">Password:</label> <input type="password" name="password" id="password" value="" data-clear-btn="true" autocomplete="off" data-mini="true"> <div class="ui-grid-a"> <div class="ui-block-a"><a href="#" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-b ui-mini">Cancel</a></div> <div class="ui-block-b"><a href="#" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-a ui-mini">Save</a></div> </div> </form> </div> <div class="ui-content" role="main"> <ul data-role="listview" data-theme="a" data-dividertheme="a" data-filter="true" data-filter-theme="a" data-filter-placeholder="Search messages..."> <li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></li> <li><a href="#"> <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="#"> <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="#"> <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="#"> <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="#"> <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> </a></li> <li><a href="#"> <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><!-- /content --> </div><!-- /page --> </body> </html>五、swap-page.js的js代码
$( document ).on( "swipeleft", ".ui-page", function( event ) { var next = $( this ).jqmData( "next" ); $( ":mobile-pagecontainer" ).pagecontainer( "change", next+".html", { transition:"slide"} ); }); $( document ).on( "swiperight", ".ui-page", function( event ) { var prev = $( this ).jqmData( "prev" ); $( ":mobile-pagecontainer" ).pagecontainer( "change", prev+".html", { transition:"slide", reverse:"true"} ); }); $( document ).on( "pagecontainerchange", function() { var current = $( ".ui-page-active" ).jqmData( "title" ); $( "[data-role='header'] h1" ).text( current ); $( "[data-role='navbar'] a.ui-btn-active" ).removeClass( "ui-btn-active" ); $( "[data-role='navbar'] a" ).each(function() { if ( $( this ).text() === current ) { $( this ).addClass( "ui-btn-active" ); } }); });六、其他的js就不写了
利用上面给出的代码就可以实现上述四个页面的滑动互相切换，虽然可以实现，但是据测试效果并不是特别的完美。
1763
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
