Overhang.js - Um plugin jQuery para mensagens de notificação suspensa

Quão chato é o caixas de alerta padrão JS? Eles se sentem como uma relíquia de uma era primitiva do desenvolvimento web.

Hoje em dia, podemos fazer mensagens de notificação discretas que compartilham a mesma informação, mas não interrompa a experiência do usuário. E é exatamente isso que você pode fazer com overhang.js.

Este plugin jQuery livre pode adicionar barras de notificação personalizadas que desce do topo da tela. Eles estão posicionado via CSS e animado com JavaScript, para que eles possam descer de um ponto fixo no topo independentemente do tamanho da página.

Você pode criar mensagens que fechar automaticamente após um certo tempo, ou outros que requer entrada do usuário.

As mensagens podem retransmitir sucesso, falha, erro ou notificações simples com informações sobre o usuário ou a página. As mensagens também podem tem seus próprios botões sim / não fazer perguntas aos usuários como um alerta de prompt do JavaScript.

Há até uma opção para criar prompts que drop down com um campo de entrada. Isso seria perfeito para um formulário de e-mail opt-in.

Overhang.js suporta todos os principais navegadores suportados pelo jQuery e também é powered by jQuery UI para os recursos animados.

Juntamente com as bibliotecas de jQuery e jQuery UI, você também precisará incluir um arquivo CSS personalizado com o plugin. Você pode sempre mesclar isso com a folha de estilo do seu site para reduzir solicitações HTTP.

Toda ligação feita para o saliência () método pode pegue qualquer número de parâmetros. Esses são chamado “opções” e eles te dão controle total sobre cada caixa de notificação.

Você pode mudar o velocidade da animação, duração, facilitando, e tamanho da caixa / cor, juntamente com outros recursos de design.

Aqui está um snippet de amostra demonstrando como crie uma caixa de confirmação:

 // Alguma confirmação $ ("body"). Overhang (type: "confirm", simMensagem: "Sim, por favor!", NoMessage: "Não, obrigado."); 

Você pode ver isso é bem simples e isso não requer muito código jQuery.

Para baixe uma cópia do plugin, você pode visitar o repo no GitHub, onde você também pode navegar pelos arquivos de origem diretamente. Ou, se você quiser veja mais exemplos ao vivo de cabeça para o site Overhang.js.