我正在尝试基于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永远不会回到某个页面?