Tag Archives: jui_alert

jui_alert Notification

DEMO DOWNLOAD How to Use?

jui_alert is a jQuery plugin, provides simple notification (with timeout and close button). jQuery UI themes compatible. Localization support.

HTML


<div id="user_message1"></div>
<div id="user_message2"></div>
<div id="user_message3"></div>

CSS

<link id="ui-theme" rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.0/themes/ui-lightness/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="http://pontikis.github.com/jui_alert/v2.0.0/jquery.jui_alert.css"/>
<!-- custom classes -->
.container1 {
width: 40%;
margin: 20px;
}
.container2 {
width: 50%;
margin: 20px;
}
.container3 {
width: 60%;
margin: 20px;
}
.message2 {
font-size: 13px;
font-family: Arial, sans-serif;
letter-spacing: 1px;
}

JS

<script type="text/javascript" src="http://code.jquery.com/ui/1.10.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://pontikis.github.com/jui_alert/v2.0.0/jquery.jui_alert.min.js"></script>
<script type="text/javascript">
$(function() {
$("#user_message1").jui_alert({
containerClass: "container1 ui-widget",
message: "<img src="images/megaphone.png" style="float: left; width: 30px; margin-right: 10px;">This is a sample message. It will disappear after 6 sec (except you press the pin button)",
timeout: 6000,
messageIconClass: ""
});
$("#user_message2").jui_alert({
containerClass: "container2 ui-widget",
message: "This is a sample message. It will not disappear automatically. More information <a href="http://www.google.com" target="_blank">here</a>.",
messageBodyClass: "message2",
timeout: 0,
use_effect: {effect_name: "slide", effect_options: {"direction": "left"}, effect_duration: "500"}
});
$("#user_message3").jui_alert({
containerClass: "container3 ui-widget",
message: "This is a <strong>sample error message</strong>. It will disappear after 3 sec (except you press the pin button)",
timeout: 3000,
messageAreaClass: "jui_alert_message_area ui-state-error ui-corner-all",
messageIconClass: "jui_alert_icon ui-icon ui-icon-alert"
});
});
</script>