kam*_*esh 0 html jquery html5 jquery-mobile cordova
我目前正在使用jquery mobile v1.4.2开发移动应用程序....几乎所有功能都已完成.现在我想为所有页面添加过渡效果......
问题:在jquery中,移动版v1.4.2(doc)告诉使用pageContainer而不是pagechange和pageload,我不知道如何加载具有过渡效果的外部页面(另一个HTML文件).我没有找到必须在google和任何参考链接表示赞赏.
提前致谢
您可以使用以下代码轻松强制进行默认转换:
<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>
不要忘记一件事,必须在jQuery Mobile之前初始化mobileinit事件,就像在我的例子中一样.
关于你的第二个问题,你会这样做:
$( ":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>