如何使用jquerymobile在Web应用程序上添加全屏欢迎图像

时间:2011-06-13 16:02:25

标签: jquery-mobile

我认为它存在于jQTouch中,但如何为使用jQueryMobile开发的iPhone Web应用程序添加全屏欢迎图像?

该应用是一款全屏网页应用,已添加到iPhone主屏幕中。

3 个答案:

答案 0 :(得分:16)

这只是一个概念,但您可以尝试这样的事情:

直播示例:http://jsfiddle.net/yzvWy/14/

JS

$(function() {
  setTimeout(hideSplash, 2000);
});

function hideSplash() {
  $.mobile.changePage("#home", "fade");
}

HTML

<div data-role="page" data-theme="b" id="splash" style="background-color: #fff;"> 
    <div class="splash">
        <img src="http://jquerymobile.com/demos/1.0a4.1/docs/_assets/images/jquery-logo.png" alt="splash" />
    </div>
</div>
<div data-role="page" data-theme="b" id="home"> 
    <div data-role="content">
        <div data-role="content"> 
            <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b"> 
                <li data-role="list-divider">Overview</li> 
                <li><a href="docs/about/intro.html">Intro to jQuery Mobile</a></li> 
                <li><a href="docs/about/features.html">Features</a></li> 
                <li><a href="docs/about/accessibility.html">Accessibility</a></li> 
                <li><a href="docs/about/platforms.html">Supported platforms</a></li> 
            </ul> 
        </div>
    </div>
</div>

答案 1 :(得分:3)

iOS有其用于在应用加载时显示闪现的属性内容。我还没有使用它(我不需要它),但是他们说这是可以做到的:

<link rel="apple-touch-startup-image" href="img/splash.png" />

您可能也想要这样:

<link rel="apple-touch-icon" href="./apple-touch-icon.png" />

请点击此处了解更多信息: http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/

答案 2 :(得分:0)

感谢您的帮助。这与Jquery Mobile目前的稳定版本不兼容,因为它还不支持1.7。我设法将它与另一个解决方案结合起来并提出:

$ (function(){
setTimeout(function(){
    $.mobile.changePage("#home", "fade");
}, 3000);
});

谢谢!