jQuery Mobile在底部有一个意外的动画
我没有做过任何事情,可以让它在加载单词时使屏幕动画化,但当我在屏幕上向上滑动手指时,我会看到一个底部工具栏/页脚,显示单词: 装载 这是我的代码,在那里你看不到任何显示加载的内容 JS文件jQuery Mobile在底部有一个意外的动画,jquery,jquery-mobile,jquery-animate,Jquery,Jquery Mobile,Jquery Animate,我没有做过任何事情,可以让它在加载单词时使屏幕动画化,但当我在屏幕上向上滑动手指时,我会看到一个底部工具栏/页脚,显示单词: 装载 这是我的代码,在那里你看不到任何显示加载的内容 JS文件 $(document).bind("mobileinit", function(){ //$.mobile.pushStateEnabled = true; //$.mobile.hidePageLoadingMsg(); }); $(function(){
$(document).bind("mobileinit", function(){
//$.mobile.pushStateEnabled = true;
//$.mobile.hidePageLoadingMsg();
});
$(function(){
var menuStatus;
$("#content").animate({
marginLeft: "165px",
}, 300, function(){menuStatus = true});
// Show menu
$("a.showMenu").click(function(){
if(menuStatus != true){
$(".ui-page-active").animate({
marginLeft: "165px",
}, 300, function(){menuStatus = true});
return false;
} else {
$(".ui-page-active").animate({
marginLeft: "0px",
}, 300, function(){menuStatus = false});
return false;
}
});
$('#menu, #content').live("swipeleft", function(){
if (menuStatus){
$("#content").animate({
marginLeft: "0px",
}, 300, function(){menuStatus = false});
}
});
$('#content').live("swiperight", function(){
if (!menuStatus){
$("#content").animate({
marginLeft: "165px",
}, 300, function(){menuStatus = true});
}
});
});
HTML文件
<!DOCTYPE html>
<html>
<head>
<title>SITE</title>
<link rel="stylesheet" href="css/main.css" />
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="js/jmobile-animate.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="cordova-2.0.0.js"></script>
</head>
<body>
<div id="menu">
<ul>
<li class="active"><a href="#home" class="contentLink">Dashboard <span class="icon"></span></a></li>
<li><a href="#page1" class="contentLink">Subpage 1 <span class="icon"></span></a></li>
<li><a href="#page2" class="contentLink">Subpage 2 <span class="icon"></span></a></li>
<li><a href="#page3" class="contentLink">Subpage 3 <span class="icon"></span></a></li>
</ul>
</div>
<div id="content">
<div class="hbg"><img src="images/small-logo.png" style="display:block;margin:2px auto 0 auto;"/></div>
</div>
</body>
<div data-role="footer" id="footer">
<h4>© 2012 SITE</h4>
</div>
</html>
场地
&抄袭;2012站点
更换
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
与
我看到您已经包含了jquery mobile js。因此我假设您确实需要一些jquery mobile功能,尽管我在代码中没有看到任何jquery mobile特定的属性,如
data role=“page”、data role=“content
”等。除了jquery mobile js之外,您还必须包含jquery mobile css。“加载”您看到的文本来自jquery mobile loading message div。它最初通过css隐藏,并将在调用$.mobile.showPageLoadingMsg(
)时显示
在加载main.css之前添加此行
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
或者,如果不需要jquery mobile功能,可以删除jquery mobile js的脚本标记
刚刚注意到代码中的另一件事。footer div在body标记之外。如果这是无意的,请将其添加到body标记内。我猜它一定在jmobile-animate.js或app.js文件中,请尝试在这些文件中搜索“加载”一词?
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />