在mobile.changepage上需要刷新页面的外部HTML文件
我已经为这个问题寻找了很多天的解决方案。 第一个启动页有超时持续时间,然后它加载带有链接列表的主页。链接正在显示,但是图标(很棒的图标)没有加载,我在每个li上设置的转换也没有加载。 加载页面后,如果我刷新页面,所有具有过渡效果的内容都会正常工作。我正在使用animate.css制作列表动画 有人能解决这个问题吗 启动页面代码在mobile.changepage上需要刷新页面的外部HTML文件,html,jquery-mobile,refresh,external,Html,Jquery Mobile,Refresh,External,我已经为这个问题寻找了很多天的解决方案。 第一个启动页有超时持续时间,然后它加载带有链接列表的主页。链接正在显示,但是图标(很棒的图标)没有加载,我在每个li上设置的转换也没有加载。 加载页面后,如果我刷新页面,所有具有过渡效果的内容都会正常工作。我正在使用animate.css制作列表动画 有人能解决这个问题吗 启动页面代码 <!DOCTYPE html> <html> <head> <title>Splash</title
<!DOCTYPE html>
<html>
<head>
<title>Splash</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="_assets/css/jqm-demos.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/myapp.css">
<link rel="shortcut icon" href="favicon.ico">
<script src="js/jquery.js"></script>
<script src="_assets/js/index.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on('pageinit','#splash',function(){
// the .on() method does require jQuery 1.7 + but this will allow you to have the contained code only run when the #splash page is initialized.
setTimeout(function(){
//$.mobile.pageContainer.pagecontainer("change", "home.html", {transition: "animated fadeOut"});
$.mobile.changePage("home.html", "animated fadeOut");
}, 4000);
});
</script>
</head>
<body>
<div data-role="page" id="splash">
<div data-role="content">
<img src="images/uos_logo.svg" alt="startup image" style="width: 100%; height: 100%" />
</div>
</div>
<!-- /page -->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="_assets/css/jqm-demos.css">
<link rel="stylesheet" href="css/myapp.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="shortcut icon" href="favicon.ico">
<script src="js/jquery.js"></script>
<script src="_assets/js/index.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="content">
<ul id="myTabs" class="animated slideInUp">
<li class="clr1"><a href="#"><i class="fa fa-angle-right"></i> 1</a></li>
<li class="clr2"><a href="#"><i class="fa fa-angle-right"></i> 2</a></li>
<li class="clr3"><a href="#"><i class="fa fa-angle-right"></i> 3</a></li>
<li class="clr4"><a href="#"><i class="fa fa-angle-right"></i> 4</a></li>
<li class="clr5"><a href="#"><i class="fa fa-angle-right"></i> 5</a></li>
<li class="clr6"><a href="#"><i class="fa fa-angle-right"></i> 6</a></li>
<li class="clr7"><a href="#"><i class="fa fa-angle-right"></i> 7</a></li>
<li class="clr6"><a href="#"><i class="fa fa-angle-right"></i> 8</a></li>
<li class="clr5"><a href="#"><i class="fa fa-angle-right"></i> 9</a></li>
<li class="clr4"><a href="#"><i class="fa fa-angle-right"></i> 10</a></li>
<li class="clr3"><a href="#"><i class="fa fa-angle-right"></i> 11</a></li>
<li class="clr2"><a href="#"><i class="fa fa-angle-right"></i> 12</a></li>
<li class="clr1"><a href="#"><i class="fa fa-angle-right"></i> 13</a></li>
<li class="clr2"><a href="#"><i class="fa fa-angle-right"></i> 14</a></li>
<li class="clr3"><a href="#"><i class="fa fa-angle-right"></i> 15</a></li>
<li class="clr4"><a href="#"><i class="fa fa-angle-right"></i> 16</a></li>
</ul>
</div>
</div>
<!-- /page -->
<script type="text/javascript">
$('ul#myTabs li').each(function(i){
var t = $(this);
setTimeout(function(){ t.addClass('animated slideInUp'); }, (i+1) * 120);
});
</script>
</body>
</html>
飞溅
$(document).on('pageinit','#splash',function(){
//.on()方法确实需要jQuery 1.7+,但这将允许您仅在初始化启动页时运行包含的代码。
setTimeout(函数(){
//$.mobile.pageContainer.pageContainer(“更改”、“home.html”、{transition:“动画淡出”});
$.mobile.changePage(“home.html”,“动画淡出”);
}, 4000);
});
主页代码
<!DOCTYPE html>
<html>
<head>
<title>Splash</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="_assets/css/jqm-demos.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/myapp.css">
<link rel="shortcut icon" href="favicon.ico">
<script src="js/jquery.js"></script>
<script src="_assets/js/index.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on('pageinit','#splash',function(){
// the .on() method does require jQuery 1.7 + but this will allow you to have the contained code only run when the #splash page is initialized.
setTimeout(function(){
//$.mobile.pageContainer.pagecontainer("change", "home.html", {transition: "animated fadeOut"});
$.mobile.changePage("home.html", "animated fadeOut");
}, 4000);
});
</script>
</head>
<body>
<div data-role="page" id="splash">
<div data-role="content">
<img src="images/uos_logo.svg" alt="startup image" style="width: 100%; height: 100%" />
</div>
</div>
<!-- /page -->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="_assets/css/jqm-demos.css">
<link rel="stylesheet" href="css/myapp.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="shortcut icon" href="favicon.ico">
<script src="js/jquery.js"></script>
<script src="_assets/js/index.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="content">
<ul id="myTabs" class="animated slideInUp">
<li class="clr1"><a href="#"><i class="fa fa-angle-right"></i> 1</a></li>
<li class="clr2"><a href="#"><i class="fa fa-angle-right"></i> 2</a></li>
<li class="clr3"><a href="#"><i class="fa fa-angle-right"></i> 3</a></li>
<li class="clr4"><a href="#"><i class="fa fa-angle-right"></i> 4</a></li>
<li class="clr5"><a href="#"><i class="fa fa-angle-right"></i> 5</a></li>
<li class="clr6"><a href="#"><i class="fa fa-angle-right"></i> 6</a></li>
<li class="clr7"><a href="#"><i class="fa fa-angle-right"></i> 7</a></li>
<li class="clr6"><a href="#"><i class="fa fa-angle-right"></i> 8</a></li>
<li class="clr5"><a href="#"><i class="fa fa-angle-right"></i> 9</a></li>
<li class="clr4"><a href="#"><i class="fa fa-angle-right"></i> 10</a></li>
<li class="clr3"><a href="#"><i class="fa fa-angle-right"></i> 11</a></li>
<li class="clr2"><a href="#"><i class="fa fa-angle-right"></i> 12</a></li>
<li class="clr1"><a href="#"><i class="fa fa-angle-right"></i> 13</a></li>
<li class="clr2"><a href="#"><i class="fa fa-angle-right"></i> 14</a></li>
<li class="clr3"><a href="#"><i class="fa fa-angle-right"></i> 15</a></li>
<li class="clr4"><a href="#"><i class="fa fa-angle-right"></i> 16</a></li>
</ul>
</div>
</div>
<!-- /page -->
<script type="text/javascript">
$('ul#myTabs li').each(function(i){
var t = $(this);
setTimeout(function(){ t.addClass('animated slideInUp'); }, (i+1) * 120);
});
</script>
</body>
</html>
家
$('ul#myTabs li')。每个(功能(i){
var t=$(本);
setTimeout(函数(){t.addClass('animated slideInUp');},(i+1)*120);
});
默认情况下,jQM通过AJAX将页面加载到当前DOM中,并且只获取数据为role=“page”的第一个DIV。因此,第二页中的任何脚本/css都不会加载
由于您的意图是用第一页完全替换splash,所以您可以使用
location.assign("home.html");
如果您真的希望进行良好的转换,只需将启动页作为单独的data role=“page”div包含在第一页中,或者将所有来自主页的脚本包含在data role=“page”div中,以便将它们加载到dom中。默认情况下,jQM通过AJAX将页面加载到当前dom中,并且仅使用data role=“page”获取第一个div。因此,第二页中的任何脚本/css都不会加载 由于您的意图是用第一页完全替换splash,所以您可以使用
location.assign("home.html");
如果你真的想要很好的转换,只需将启动页作为单独的data role=“page”div包含在第一页中,或者将所有来自主页的脚本都包含在data role=“page”div中,这样它们就可以加载到dom中。谢谢,这真的很有帮助。谢谢,这真的很有帮助。