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});
                  }
            });

});

网页文件

<!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>

我看到你已经包含了jquery mobile js。所以我假设你真的需要一些jquery移动功能，尽管我在你的代码中没有看到任何jquery移动特定的属性，如data-role="page",data-role="content"等。除了jquery移动js，你还必须包括jquery移动css。您看到的"正在加载"的文本来自jquery移动加载消息div.It 该消息最初通过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 移动功能，则可以删除 jquery mobile js 的脚本标记。

刚刚注意到代码中的另一件事。页脚div 位于正文标记之外。如果这是无意的，请将其添加到正文标签中。

替换

<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>

相关内容

最新更新

热门标签：