2012-08-13 34 views
0

我还没有做过任何事情,应该让它使用LOADING这个词来使屏幕变成动画,但是当我在屏幕上滑动手指时,我得到了一个底部工具栏/页脚,它显示一句话:jQuery Mobile在底部有一个意想不到的动画

装载

这里是我的代码,你会看到在什么也没有显示加载。

JS文件

$(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>&copy; 2012 SITE</h4> 
</div> 
</html> 
+0

我猜它必须在jmobile-animate.js或app.js文件中,尝试在这些文件中搜索单词'loading'? – Timm 2012-08-13 14:32:48

回答

0

我看到你已经包含了jQuery的移动js.So我假设你真的需要一些jQuery的移动功能,虽然我没有看到任何jQuery的移动特定属性像data-role="page",data-role="content“等在你的代码。随着jQuery的移动js,你必须inclide jquery mobile css也是如此。你所看到的“正在加载”的文本是来自jquery mobile的加载消息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。

刚刚注意到了代码中的另一件事。页脚div在body tag之外。如果这是无意的,请将其添加到body标签中。

0

更换

<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="http://code.jquery.com/jquery-1.8.0.js"></script> 
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.js"></script>