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 伪 class 可以检测全屏并应用特定的 CSS。您可以阅读更多相关信息 here.

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

通过 F11 触发
通过脚本触发

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

首先，我在我的导航栏中添加了一个 ID，这样我就可以在我的 css 上引用它。另一种方法是使用 classes.

<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 中，只要页面处于全屏状态，我们就会将导航栏高度降低到 0 像素。

        #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>    
}

点击全屏按钮后，导航栏应该会快速隐藏并显示幻灯片动画。

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

ASP.Net MVC Make navigation bar disappear when in full screen mode

javascript

asp.net-mvc

kendo-ui

kendo-asp.net-mvc