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，有“两种全屏模式”；

通过F11触发
通过脚本触发

通过脚本触发的全屏屏幕是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>    
}

单击全屏按钮后，导航栏应使用幻灯片动画快速隐藏自己。

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

1 个答案: