JQuery Mobile實現滑動螢幕切換頁面
阿新 • • 發佈：2019-01-10
完整示例程式碼：
<!doctype html> <html> <head> <title>Multipage example</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div class="ui-page" data-role="page" id="page1" data-title="page1" data-next="page2"> <div data-role="header"> <h1>Page 1</h1> </div> <div role="main" class="ui-content"> <a href="#page2" data-transition="slide" class="ui-btn ui-corner-all ui-btn-inline">Go To Page 2</a> </div> </div> <div class="ui-page" data-role="page" id="page2" data-title="page2" data-prev="page1"> <div data-role="header"> <h1>Page 2</h1> </div> <div role="main" class="ui-content"> <a href="#page1" data-rel="back" data-transition="slide" class="ui-btn ui-corner-all ui-btn-inline">Go Back To Page 1</a> </div> </div> <script> $(document).on("swipeleft", ".ui-page", function () { var thePage = $(this), next = thePage.jqmData("next"); if (next) { $(":mobile-pagecontainer").pagecontainer("change", "#" + next, {transition: "slide"}); } }); $(document).on("swiperight", ".ui-page", function () { var thePage = $(this), prev = thePage.jqmData("prev"); if (prev) { $(":mobile-pagecontainer").pagecontainer("change", "#" + prev, {transition: "slide", reverse: true}); } }); </script> </body> </html>