ASP.Net MVC 在全屏模式下使导航栏消失

Question

我不确定这是否可能，但对于我使用 Kendo UI 和 ASP.Net MVC 创建的仪表板来说，这将是一件非常酷的事情。

所以基本上我想做的是当用户点击“F11”进入全屏模式时，我希望我的导航栏折叠，然后在用户退出全屏模式时重新打开。

导航栏

我只是简单地将导航栏包括在内，这样每个人都可以看到它当前的设置方式。它几乎是为 MVC 生成的默认值。

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            @Html.ActionLink("Home", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <!--My nav bar items-->
            </ul>
            @Html.Partial("_LoginPartial")
        </div>
    </div>
</div>

我是这方面的初学者，所以我什至不知道从哪里开始。如果它更容易，我真的只需要在一个页面上执行此操作。我有一个仪表板屏幕，我想将其设置在电视上并保持全屏模式。

任何指点或帮助将不胜感激。

谢谢！

Answer 1

CSS 中有一个:fullscreen 伪类，可以检测全屏并应用特定的 CSS。你可以阅读更多关于它的信息here。

不幸的是，按 F11 不会触发该类，因为根据 this，有“2 种全屏类型”；

1. 通过 F11 触发
2. 通过脚本触发

通过脚本触发的全屏是 CSS 可以检测到的。所以这就是我尝试过的方法；

首先，我在导航栏中添加了一个 ID，以便我可以在我的 css 中引用它。另一种方法是使用类。

<div id="myNavbar" class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                ...
            </div>
            <div class="navbar-collapse collapse">
                ...
            </div>
        </div>
</div>

其次，我添加了这个Site.css，这个可以在Your Project > Content > Site.css找到。在 CSS 中，每当页面处于全屏状态时，我们都会将导航栏高度降低到 0px。

        #myNavbar {
            transition: 0.4s;
        }

        html:fullscreen #myNavbar {
            min-height: 0px !important;
            height: 0px !important;
            overflow: hidden;
        }

        html:-moz-full-screen #myNavbar {
            min-height: 0px !important;
            height: 0px !important;
            overflow: hidden;
        }

        html:-webkit-full-screen #myNavbar {
            min-height: 0px !important;
            height: 0px !important;
            overflow: hidden;
        }

第三，我添加了一个按钮（您可以将其放在页面上的任何位置），它将以编程方式触发全屏。

<button id="full-screen-toggle" class="btn btn-lg btn-info">Go Fullscreen</button>

然后我添加了当我们单击按钮时要调用的脚本。将此添加到您放置按钮的页面中。

@section scripts
{
    <script>
        document.getElementById('full-screen-toggle').addEventListener('click', function () {
            var doc = document.documentElement;

            if (doc.requestFullscreen) {
                doc.requestFullscreen();
            } else if (doc.webkitRequestFullscreen) {
                doc.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
            } else if (doc.mozRequestFullScreen) {
                doc.mozRequestFullScreen();
            }

            return false;
        }, false);
    </script>    
}

单击全屏按钮后，导航栏应通过幻灯片动画快速隐藏。