Nesse artigo vamos aprender como apresentar mensagens de notificação em nossas paginas web, diferente da maneira convencional.
Quem não se lembra do famoso window.Altert('Hello World'). Pois é nesse caso aqui vamos fazer alguma coisa diferente.
Para esse artigo vamos utilizar o plugin jquery, que podemos obter no link abaixo:
https://github.com/akquinet/jquery-toastmessage-plugin
Abaixo segue exemplo das mensagens
Agora para que quebrar a cabeça se eu já fiz isso,segue o código fonte.
Para funcionar basta salvar o codigo como HTML e fazer o download do link acima no mesmo diretório, caso fiquem com alguma duvida de como fazer funcionar mandem e-mail.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>IF Consulters Solutions</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="jquery.toastmessage.js" type="text/javascript"></script>
<link href="jquery.toastmessage.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function showSuccessToast() {
$().toastmessage('showSuccessToast', "Dialogo Exibido com Sucesso...");
}
function showStickySuccessToast() {
$().toastmessage('showToast', {
text: 'Dialogo Exibido com Sucesso - Dialogo Fixo',
sticky: true,
position: 'top-right',
type: 'success',
closeText: '',
close: function () {
console.log("toast is closed ...");
}
});
}
function showNoticeToast() {
$().toastmessage('showNoticeToast', "Notice Dialog ");
}
function showStickyNoticeToast() {
$().toastmessage('showToast', {
text: 'Notice Dialog Fixo',
sticky: true,
position: 'top-left',
type: 'notice',
closeText: '',
close: function () { console.log("toast is closed ..."); }
});
}
function showWarningToast() {
$().toastmessage('showWarningToast', "Warning Dialog ");
}
function showStickyWarningToast() {
$().toastmessage('showToast', {
text: 'Warning Dialog Fixo',
sticky: true,
position: 'middle-right',
type: 'warning',
closeText: '',
close: function () {
console.log("toast is closed ...");
}
});
}
function showErrorToast() {
$().toastmessage('showErrorToast', "Error Dialog ...");
}
function showStickyErrorToast() {
$().toastmessage('showToast', {
text: 'Error Dialog Fixo',
sticky: true,
position: 'center',
type: 'error',
closeText: '',
close: function () {
console.log("toast is closed ...");
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<p>
<span class="description">Dialogo de Sucesso</span> <a href="javascript:showSuccessToast();"> Temporario </a>|<a href="javascript:showStickySuccessToast();"> Fixo </a>
</p>
<p>
<span class="description">Dialogo de Informação</span> <a href="javascript:showNoticeToast();"> Temporario </a>|<a
href="javascript:showStickyNoticeToast();"> Fixo </a>
</p>
<p>
<span class="description">Dialogo de Atenção </span> <a href="javascript:showWarningToast();"> Temporario </a>|<a href="javascript:showStickyWarningToast();">Fixo</a>
</p>
<p>
<span class="description">Dialogo de Erro </span> <a href="javascript:showErrorToast();"> Temporario </a>|<a
href="javascript:showStickyErrorToast();"> Fixo </a>
</p>
</div>
</form>
</body>
</html>
fonte original: http://www.ashishblog.com/blog/display-notification-messages-using-jquery/
muito bom, parabnéns
ResponderExcluir