分类导航

jQuery 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jquery-mobile – 用javascript jquery移动启动画面，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我正在寻求避免在启动画面中使用它,因为它不适用于所有设备和其他原因：

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

所以我试图使用它,它可以正常工作,直到它滑入新页面,然后再次像启动屏幕一样处理(例如,当计时器到期时它变为空白 – 在这种情况下为4秒).如何停止/限制此行为,以便changePage仅包含在启动页面中？

<body>
 <div data-role="page" id="splash"> 
  <div class="splash">
    <img src="startup.jpg" alt="startup image" />

<script type='text/javascript'>//<![CDATA[ 
            $(window).load(function(){
            $(function() {
                setTimeout(hideSplash,4000);
                        });

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


            });//]]>  
        </script>

  </div>
 </div>

 <div data-role="page" id="home"> 
   <div data-role="header" data-BACkbtn="false">
    <h1></h1>
   </div>
   <div data-role="content">

   </div>
 </div>
</body>

解决方法

这里好主意是我的想法.使用单页而不是多页(多个data-role = pagE).对于index.html或index.PHP或其他什么.把你的启动页面.我之所以会这样解释原因.

<head>
    <!-- First include all jquery stuff -->
    <script src="app.js"></script><!-- external script because we can just include it in every page -->
</head>
<body>
    <div data-role="page" id="splash"> 
        <div class="splash">
            <img src="startup.jpg" alt="startup image" />
        </div>
    </div>
</body>

$(document).on('pageinit','#splash',function(){ // the .on() method does require jQuery 1.7 + but this will allow you to have the contained code only run when the #splash page is initialized.
    setTimeout(function(){
        $.mobile.changePage("home.html","fade");
    },4000);
});

好的,所以我这样做是因为我们说你有导航菜单,你想把人们送回主页.您不必再次显示启动页面.你可以链接到home.html.分割你的页面有助于保持dom更精简.我希望这有帮助.