jquery autocomplete search database | fb access token | seting up fail2ban debian wheezy
 


 

jui_alert (v2.0.0)


Share:

Theme switch using jui_theme_switch.

HTML (head section)

	<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 -->
	<link rel="stylesheet" href="index.css">

	<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<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" src="http://pontikis.github.com/jui_alert/v2.0.0/i18n/en.js"></script>
	<script type="text/javascript" src="index.js"></script>
    

HTML (body)

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

JS code

	$(function() {

		$("#user_message1").jui_alert({
			containerClass: "container1 ui-widget",
			message: "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 here.",
			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 sample error message. 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"
		});

	});
    

CSS

	.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;
	}