jQuery Mobile网络应用程序的启动画面

时间:2012-11-21 10:09:15

标签: jquery jquery-mobile

我正在尝试基于jQuery Mobile和ASP.Net MVC为网站做一个闪屏。我的问题是我无法真正改变导航结构,因为所有控制器都用在站点的桌面版本中。该站点的移动端只有单独的* .Mobile.cshtml视图,并且必须遵循与桌面站点相同的导航约定。

我要做的是在“主页”页面中创建一个这样的jQuery移动“页面”:

@if (ViewBag.ShowSplash!= null && ViewBag.ShowSplash == true) 
{
    <div data-role="page" data-theme="a" id="splash">
        <div id="splash_container">
            <img src="@Url.Content("~/Content/images/splash_logo.png")" />
        </div>
    </div>
    <script>
        // once we display splash screen, give it 4 seconds and load main container
        $(document).on('pageinit', '#splash', function () {
            var hideSplash = function () {
                $.mobile.changePage($("#container"));
            };
            setTimeout(hideSplash, 4000);
        });
    </script>
}

在控制器中设置ViewBag.ShowSplash的位置,检查第一次加载时是否设置了cookie。 我面临的问题是,每当我回到主屏幕时,即使设置了cookie并且控制器中的ViewBag.ShowSplash为空,启动画面也会不断返回。我猜JQM正在缓存所有页面,#splash无限期地卡在那里。

要修复JQM缓存,我将删除#splash容器,如下所示:

// Once main container is loaded, remove splash page-container so we can't come back to that thing again. Ever.
$(document).on('pageshow', '#container', function () {
    $('#splash').remove();
});

这种方式适用于飞溅,但会破坏其他功能,例如导航。

我想知道是否有更简单的方法在JQM中进行启动画面,如果没有,是否有办法告诉JQM永远不会回到某个页面?

0 个答案:

没有答案