我目前正在使用jquery移动v1.4.2 . . . .的移动应用程序几乎所有的功能都完成了。现在我想为所有的页面添加过渡效果…
问题:在jquery移动v1.4.2 (doc)告诉使用pageContainer而不是pagechange和pageload,我不知道如何加载外部页面(另一个HTML文件)的过渡效果。我没有找到必须的例子在谷歌和任何参考链接是赞赏的。
Thanks in advance
-
你可以很容易地使用以下代码强制默认转换:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script> $(document).bind("mobileinit", function () { $.mobile.defaultPageTransition = 'slide'; }); </script> <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
不要忘记一件事,mobileinit事件必须在jQuery Mobile之前初始化,就像我的例子一样。
-
关于你的第二个问题,你可以这样做:
$( ":mobile-pagecontainer" ).pagecontainer( "load", "second.html", { role: "page" } );
的例子:
index . html
<!DOCTYPE html> <html> <head> <title>jQM Complex Demo</title> <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script> $(document).bind("mobileinit", function(){ $.mobile.defaultPageTransition = "slide"; }); </script> <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> <script> $(document).on('pagecreate', '#index', function(){ $( ":mobile-pagecontainer" ).pagecontainer( "load", "second.html", { role: "page" } ); }); </script> </head> <body> <div data-role="page" id="index" data-theme="a" > <div data-role="header"> <h3> First Page </h3> <a href="#second" class="ui-btn-right">Next</a> </div> <div data-role="content"> </div> <div data-role="footer" data-position="fixed"> </div> </div> </body> </html>
second.html
<div data-role="page" id="second" data-theme="a" > <div data-role="header"> <h3> Second Page </h3> <a href="#index" class="ui-btn-left">Back</a> </div> <div data-role="content"> </div> <div data-role="footer" data-position="fixed"> </div> </div>