在Jquery移动Android应用程序中闪屏

时间:2013-11-21 05:36:45

标签: android jquery html jquery-ui jquery-mobile

我有一个在我的网站上使用jquery mobile的Android应用程序。我的应用程序中有几页,当我加载新页面时,我想在我的应用程序上放置一个闪屏。或正在加载页面时。关于如何制作闪屏的任何建议?我是jquery mobile的新手,所以我需要建议。我尝试过使用“$ .mobile.showPageLoadingMsg()”,但它没有覆盖我想要的那个只显示一条消息,我想要的是一个整体,图像填满整个页面。当页面准备就绪时,启动应该淡出并显示正在加载的页面

这个小提琴是“$ .mobile.showPageLoadingMsg()”的一个例子:http://jsfiddle.net/pmatseykanets/Nvrhb/

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

    <script>

    function doWork(){
        //Append a lot of paragraphs
        for (var i = 0; i < 10000; i++) {
            $("div[data-role=content]").append("<p>This is some long string</p>");
        }
        $("div[data-role=content]").trigger("refresh");
        $.mobile.loading('hide');
    }

    $(document).on("pageinit", "#page1", function(){

        $("#btn1").click(function(){

            $.mobile.loading('show', {theme:"e", text:"Please wait...", textonly:true, textVisible: true});

            //Do something lengthy here
            setTimeout(function(){
                doWork();
            }, 50);

        });
    });

    </script>
</head>
<body>
    <div data-role="page" id="page1">
        <div data-role="header">
            <h1>Header</h1>
        </div>

        <div data-role="content">
            <a id="btn1" href="#" data-role="button" data-transition="flip">Do work</a>
        </div>

        <div data-role="footer" data-position="fixed">
            <h1>Footer</h1>
        </div>
    </div>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

如果您使用phonegap(使用jquery mobile和javascript建立应用程序),那么您只需在主要活动中添加以下内容。

public class MainActivity extends DroidGap {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.setIntegerProperty("splashscreen", R.drawable.splashscreen);
        super.loadUrl("file:///android_asset/www/index.html", 5000);
    }
}

只需在您的/ drawable文件夹中添加启动页面图像..

希望它对你有用..