upper-box - componente para jQuery

Para nós desenvolvedores existem scripts, códigos, métodos, estruturas que carregamos conosco ano após ano. Utilizamos essas “soluções empacotadas” em determinados momentos, muitas vezes salvando nossas horas de descanso.

A muito tempo atrás, em um sistema web que o foco era visualização de documentos, o cliente solicitou que o menu fosse retrátil. Ou seja, o menu superior da aplicação tinha que desaparecer se não estivesse sendo utilizado e aparecer quando o cursor do mouse se aproximasse dele. Para suprir isso criei uma função Javascript (utilizando CSS), e ficou bem bacana, simples e bastante útil. Esse script eu carrego comigo desde lá.

Precisei disso novamente alguns dias atrás, mas dessa vez fiz diferente. Tornei o script genérico de modo que posso utilizar mais facilmente em qualquer aplicação web que tenha jQuery, e ainda coloquei em um repositório no Github (repositório GIT).

Sei que ainda é bastante primitivo, mas essa é uma das intenções de colocar em um repositório publico. Quem quiser usar e acoplar funcionalidades e otimizações, será muito bem vindo. Pra quem não quer nem tocar no repositório, segue o link pra download (versão mais recente). Veja um exemplo do seu funcionamento aqui.

Pra explicar “o que”, “como”, “onde” vou transcrever o README do repositório no Github abaixo.

upper-box

API javascript que transforma qualquer elemento de seu HTML (uma div, por exemplo) em uma caixa móvel posicionada na parte de cima da tela.
Para utilizá-lo é necessário estar com o jQuery adicionado ao documento.

O que acontece?

O elemento upper-box vai virar uma caixa “invisível” na parte de cima da tela.
Quando o usuário se aproxima com o mouse da parte superior da tela (body), o elemento ira rolar, abrindo e exibindo seu conteúdo.

Como usar?

Primeiro inclua os arquivos jQuery e upper-box no seu html, desta forma:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="upper-box.js"></script>

Seu uso é bem simples, basta adicionar “upper-box” ao class do elemento que vai virar upper-box.

Exemplo:

<div id='div1' class='divClass'>
 <h2>Olá,</h2>
 <p>Esta div não é um <b>upper-box</b>!</p>
</div>

<div id='div2' class='divClass upper-box'>
 <p>Esta div será um <b>upper-box</b>!</p>
 <p>Simples, não?!</p>
</div>

Quais navegadores?

O upper-box foi testado em Firefox, Safari e Internet Explorer 7.