Conrado Saud Programador

Escrevo neste blog, códigos e teorias de programação que desenvolvo e são úteis para mim. Pelo mesmo, espero que seja útil para você. Todo conteúdo aqui é público e gratuito.

contato@conradosaud.com.br

Conheça meu trabalho

Como deixar uma tela em Fullscreen utilizando JQuery e layout modulado

Escrito por Conrado Saud

contato@conradosaud.com.br

As vezes, para algumas aplicações, precisamos manter uma tela limpa e que tome conta de todo o navegador, deixando-a assim como Fullscreen.
A necessidade desta função em uma aplicação vem de vários motivos, mas um deles por exemplo, são para sistemas que possuem algum tipo de tela em que seus clientes costumam mante-la aberta separadamente em um monitor de TV, como por exemplo, um painel de monitoramentos.
Para isto, vou oferecer o código que mantem a tela em Fullscreen e também um exemplo de utilidade com Jquery para limpar layouts e deixar tudo melhor.

Vamos começar com um layout simples com cabeçalho, menu lateral esquerdo e menu central. Desejamos que o menu central seja o foco da atenção, então todos os outros menus devem ser escondidos, e quando isso acontecer, vamos colocar a tela em Fullscreen para que fique completo.
Segue o layout:

Cabecalho

Painel de produção



Segue também o código html deste pequeno layout:



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

Quando você clica no botão Entrar no Modo TV, perceba que todo Layout é escondido. Ótimo, temos 80% do código funcionando, mas para termos um modo TV nato, precisamos deixar tudo Fullscreen. Infelizmente não há como fazer o Layout de exemplo ficar em Fullscreen por causa que ele está moldado dentro deste artigo, mas posso dar um ótimo exemplo com este artigo quando você clica neste botão:


Legal, não é? Percaba que o Fullscreen nada mais é do que a tecla F11 entrando em execução (teste agora). Então vamos por partes.

Primeiramente, segue o código Jquery de como esconder os Layouts do exemplo ao clicar no botão:


$( 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();
			
		}
	});
});
		

Ótimo. O segredo está em remodular as classes. Neste exemplo utilizei apenas colunas do tipo médio, mas sempre que for entrar no Modo Tv, tenha certeza de que todas as colunas estarão com o tamanho máximo (12).
Feito isso, teremos o Layout no centro da tela, mas para colocá-lo em Fullscreen será necessário outro código.
Segue o código para deixar qualquer página em Fullscreen:



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();
	}
}
		

Utilizando-o, a página entrar em modo Fullscreen. Esse comando funciona no Google Chrome, nas útlimas versões do Mozila Firefox, Safari e Opera. Com nosso amado Internet Explorer funciona apenas na versão 11 ou superior.
No exemplo citado do Layout, você pode encaixar essa função tanto ao final do if quanto do else.

Importante: tome sempre muito cuidado quando utilizar essa remodulação de Layout. Quando fizer isto, esteja atento a todas as rotas de escape do usuário para que o mesmo não saia do Layout sem que o mesmo se remodule para a versão original.
Este artigo lhe ajudou? Você pode retribuir o favor curtindo minha página no Facebook:
Tags: html, css, javascript, jquery, fullscreen, tv

Voltar ao início
Publicado em   17/04/2017

Topo

Faça um comentário a respeito deste artigo!