Crie Janelas para HTML5 com Javascript

Criar “Janelas” no DOM é algo sensacional, principalmente para desejar criar sistemas online, terminal online ou até mesmo um protótipo de sistema operacional! 😃

E fazer isso agora ficou mais simples ainda com Winbox.js .

Winbox.js

WinBox é um gerenciador de janelas HTML5 moderno para a web. Desempenho leve e excelente, sem dependências, totalmente personalizável, gratuito e de código aberto!

Para utilizá-lo existem inúmeras formas, como:

Via npm

npm install winbox

Importando o módulo via CDN:

<script type="module">
  import WinBox from "https://unpkg.com/winbox@0.1.8/src/js/winbox.js";
</script>

Ou fazendo download no site.

Falando em site, lá você encontrará diversos exemplos de uso e demo de janelas!

E qual a forma mais básica de implementar?

Simples! Eu fiz um exemplo bem básico de utilização e basta você copiar o código, abrir um arquivo [html]: vim index.html e colar!

Abra o arquivo no navegador: gio open index.html e pronto!

Exemplo de código:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Janelas com Javascript</title>
  <script src="https://rawcdn.githack.com/nextapps-de/winbox/0.1.8/dist/winbox.bundle.js"></script>
<style> #content { display:none; padding: 10px; }</style>
</head>
<body>
 <div id="content">
    <h1>Terminal Root</h1>
    <h3>Um pouco de muito sobre C++, Sistemas Operacionais, Programação e Desenvolvimento Web.</h3>
    <p>Consectetur nulla sequi distinctio enim accusantium? Architecto incidunt accusantium aut fugit commodi Autem et saepe aliquid alias hic. Atque in neque tempore animi earum? At maiores ullam quaerat aliquam mollitia</p>
    <p>Elit non vel non quisquam repellendus, consectetur Perspiciatis laboriosam nulla dolor optio vero? Odit placeat nisi pariatur incidunt est Architecto nisi libero sit fugit vitae iusto? Ut quas necessitatibus non</p>
    <h3>Acesse: <a href="https://terminalroot.com.br/">https://terminalroot.com.br/</a></h3>
</div>

<button onclick="OpenWindow()">Abrir janela</button>
<script>

  function OpenWindow(){
    document.getElementById("content").style.display = "block"; 
    var node = document.getElementById("content");

    new WinBox("Mount DOM", {
        mount: node.cloneNode(true)
    });
    document.getElementById("content").style.display = "none"; 
  }

</script>
</body>
</html>