Criando uma barra de ações com Jquery e CSS
Quem utiliza os mais diferentes sites ou serviços na internet já tiveram a oportunidade de ver barras de ferramentas que flutuam, algumas nos trazem várias opções diferentes, normalmente estas barras são fixas e não ocupam espaço no resto da página.
Vou mostrar agora como criamos uma barra de ferramentas fixa com Jquery e CSS, como exemplo vou utilizar ela como uma barra de opções de salvar ou cancelar que poderia funcionar em qualquer site que tenha interação com o usuário. A vantagem desta barra é que alem de não ocupar espaço no restante do layout fica bem visível ao usuário independentemente dele movimentar a página.
O HTML é bem simples, criamos somente uma DIV que será a nossa barra, adicionei a ela dois botões em CSS3 que eu mostrei como criar em Criando botões em CSS3, estes botões vão ser as ações que podemos fazer, neste caso coloquei duas opções, Salvar e Cancelar. Como a ideia é somente mostrar como pode ser feito uma barra dessas os botões só vão esconder a barra quando clicados.
/* CSS DA BARRA DE AÇÕES */
#barra {
border-top:1px solid #ccc;
background:#000;
padding:10px 20px;
position:fixed;
bottom:0;
left:0;
z-index:2000;
width:100%;
}
O Css acima fixamos nossa barra embaixo, definimos o Z-INDEX bem alto para que a barra fique por cima dos elementos da página e posicionamos a barra embaixo e a esquerda utilizando Bottom e LEFT.
Agora é a parte mais divertida, vamos fazer isso funcionar, a barra em si já funciona se você fizer um teste vai ver que ela já aparece por cima da página, mas precisamos de uma ajudinha do Jquery para dar o efeito desejado.
Primeiro escondemos a barra com a função HIDE, o efeito fica melhor se esta função for colocada fora do document ready de preferência depois da barra, pois assim a página não precisa ser inteiramente carregada para nossa barra sumir.
/*JQUERY*/
$j(document).ready(function() {
$j('#barra').hide(); // Escondendo a Barra
$j('input').keyup(function() { /Adicionamos a função aos elementos input
var opacidade = 0.8;
$j('#barra').fadeTo(200,opacidade); //Definimos a opacidade da barra
$j('#barra').slideDown(); //Fazendo a animação da barra
});
$j('.botao1,.botao2').click(function() { //Adicionamos a função aos botões
$j('#barra').slideUp();
});
});
A Função KEYUP define que quando o usuário adicionar qualquer coisa dentro dos campos de cadastro, nossa barra apareça e no caso de nosso exemplo de as opções de gravar ou cancelar suas alterações. Depois utilizamos a opção FADETO do Jquery para definir uma opacidade e dar um efeito mais legal a nossa barra de ações, e por fim definimos a animação que a barra vai fazer quando for aparecer para o usuário.
Depois defini uma simples função de CLICK, que vai esconder nossa barra novamente, mas que pode facilmente ser alterada por uma função que grave seus dados no banco de dados.
Conclusão
Depois do javascript definimos completamos a missão de criar nossa barrinha de ações muito útil, mas não precisamos parar por ai há várias outras funcionalidades para este tipo de efeito. De a sua idéia.