contato@conradosaud.com.br
Conheça meu trabalhocontato@conradosaud.com.br
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Exemplo modo TV</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 box" id="cabecalho">
<div class="text-center">
<h2>Cabecalho</h2>
<h3><strong>Painel de produção</strong></h3>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 box" id="menuEsquerda">
<h3>Menu Esquerda</h3>
<ul>
<li><a href="#">Produto</a></li>
<li><a href="#">Estoque</a></li>
<li><a href="#">Fornecedor</a></li>
<li><a href="#">Relatórios</a></li>
</ul>
</div>
<div class="col-md-8 col-md-offset-1 box" id="menuCentral">
<h3>Menu Centro</h3>
<h4><strong>Painel de Monitoramento</strong></h4>
<p class="lead">Monitoramento de Saída de Produtos</p>
<br>
<table class="table table-striped">
<tr>
<td>
<strong>Produto</strong>
</td>
<td>
<strong>Qnt. Saída</strong>
</td>
<td>
<strong>Veículo</strong>
</td>
<td>
<strong>Horário</strong>
</td>
</tr>
<tr>
<td>
1239
</td>
<td>
15
</td>
<td>
HDID-4129
</td>
<td>
14:22
</td>
</tr>
<tr>
<td>
6987A
</td>
<td>
55
</td>
<td>
DISAO-2891
</td>
<td>
14:25
</td>
</tr>
<tr>
<td>
16290
</td>
<td>
35
</td>
<td>
DWJQ-0544
</td>
<td>
15:33
</td>
</tr>
</table>
<div class="text-center">
<button class="btn btn-success" id="btnModoTV">Entrar no Modo TV</button>
</div>
</div>
</div>
</div>
<style>
.container{
background-color: black;
padding: 30px;
}
.box{
background-color: white;
border-radius: 8px;
box-shadow: 0px 3px 5px black;
}
#cabecalho{
margin-bottom: 30px;
margin-top: 20px;
}
#cabecalho, #menuEsquerda, #menuCentral{
padding: 15px;
}
</style>
</body>
</html>
$( document ).ready(function() {
var modoTv = false;
$("#btnModoTV").click(function(){
if(modoTv == false){
$("#cabecalho").hide();
$("#menuEsquerda").hide();
$("#menuCentral").hide(); //esconde para remodular as classes
$("#menuCentral").removeClass("col-md-8 col-md-offset-1");
$("#menuCentral").addClass("col-md-12");
$("#menuCentral").fadeIn(1500); //reaparece com estilo ^_~
$("#btnModoTV").text("Sair do Modo TV");
modoTv = true;
entrarFullScreen();
}else{
$("#cabecalho").show();
$("#menuEsquerda").show();
$("#menuCentral").hide();
$("#menuCentral").removeClass("col-md-12");
$("#menuCentral").addClass("col-md-8 col-md-offset-1");
$("#menuCentral").show();
$("#btnModoTV").text("Entrar no Modo TV");
modoTv = false;
sairFullScreen();
}
});
});
function entrarFullScreen(){
if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
}
}
function sairFullScreen(){
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
Faça um comentário a respeito deste artigo!