WebSVN - Integrator Subversion - Blame - Rev 1 - /DOCUMENTOS E ANALISE/telas/assets/global/plugins/gritter/index.html

Rev	Author	Line No.	Line
1	espaco	1	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
		2	<html xmlns="http://www.w3.org/1999/xhtml">
		3	<head>
		4	<title>Gritter demo for jQuery - boedesign.com</title>
		5	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		6	<link rel="stylesheet" type="text/css" href="css/jquery.gritter.css" />
		7	<script type="text/javascript" src="http://www.google.com/jsapi"></script>
		8	<script type="text/javascript">google.load('jquery', '1.7.1');</script>
		9	<script type="text/javascript" src="js/jquery.gritter.js"></script>
		10	<style type="text/css">
		11	body {
		12	background:#222 url(images/trees.jpg);
		13	color:#fff;
		14	}
		15	a {
		16	color:#00ff00;
		17	}
		18	#container {
		19	width:600px;
		20	background:#333;
		21	padding:10px;
		22	}
		23	</style>
		24	</head>
		25
		26
		27	<body>
		28	<div id="container">
		29	<h1>Gritter Demo</h1>
		30	<p>
		31	The super awesome background is just to show you that all notifications are transparent!
		32	<em>Tested in: FF 3+, Opera 9, IE7, IE8, Safari 4+</em>
		33	</p>
		34	<ul>
		35	<li>
		36	<a href="#" id="add-regular">Add regular notification</a>: Fades out after a certain amount of time, can be set for each notification.
		37	</li>
		38	<li>
		39	<a href="#" id="add-sticky">Add sticky notification</a>: Doesn't run on a fade timer. Just sits there until the user manually removes it by clicking on the (X).
		40	</li>
		41	<li>
		42	<a href="#" id="add-without-image">Add notification without image</a>
		43	</li>
		44	<li>
		45	<a href="#" id="add-gritter-light">Add a white notification</a>: has a 'gritter-light' class_name applied to it.
		46	</li>
		47	<li>
		48	<a href="#" id="add-with-callbacks">Add notification (with callbacks)</a>
		49	</li>
		50	<li>
		51	<a href="#" id="add-sticky-with-callbacks">Add a sticky notification (with callbacks)</a>
		52	</li>
		53	<li>
		54	<a href="#" id="add-max">Add notification with max of 3</a>: If there are 3 messages already on screen, it won't show another one.
		55	</li>
		56	<li>
		57	<a href="#" id="remove-all">Remove all notifications</a>
		58	</li>
		59	<li>
		60	<a href="#" id="remove-all-with-callbacks">Remove all notifications (with callbacks)</a>
		61	</li>
		62	</ul>
		63	</div>
		64
		65	<script type="text/javascript">
		66
		67	$(function(){
		68
		69	// global setting override
		70	/*
		71	$.extend($.gritter.options, {
		72	class_name: 'gritter-light', // for light notifications (can be added directly to $.gritter.add too)
		73	position: 'bottom-left', // possibilities: bottom-left, bottom-right, top-left, top-right
		74	fade_in_speed: 100, // how fast notifications fade in (string or int)
		75	fade_out_speed: 100, // how fast the notices fade out
		76	time: 3000 // hang on the screen for...
		77	});
		78	*/
		79
		80	$('#add-sticky').click(function(){
		81
		82	var unique_id = $.gritter.add({
		83	// (string \| mandatory) the heading of the notification
		84	title: 'This is a sticky notice!',
		85	// (string \| mandatory) the text inside the notification
		86	text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" style="color:#ccc">magnis dis parturient</a> montes, nascetur ridiculus mus.',
		87	// (string \| optional) the image to display on the left
		88	image: 'http://s3.amazonaws.com/twitter_production/profile_images/132499022/myface_bigger.jpg',
		89	// (bool \| optional) if you want it to fade out on its own or just sit there
		90	sticky: true,
		91	// (int \| optional) the time you want it to be alive for before fading out
		92	time: '',
		93	// (string \| optional) the class name you want to apply to that specific message
		94	class_name: 'my-sticky-class'
		95	});
		96
		97	// You can have it return a unique id, this can be used to manually remove it later using
		98	/*
		99	setTimeout(function(){
		100
		101	$.gritter.remove(unique_id, {
		102	fade: true,
		103	speed: 'slow'
		104	});
		105
		106	}, 6000)
		107	*/
		108
		109	return false;
		110
		111	});
		112
		113	$('#add-regular').click(function(){
		114
		115	$.gritter.add({
		116	// (string \| mandatory) the heading of the notification
		117	title: 'This is a regular notice!',
		118	// (string \| mandatory) the text inside the notification
		119	text: 'This will fade out after a certain amount of time. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" style="color:#ccc">magnis dis parturient</a> montes, nascetur ridiculus mus.',
		120	// (string \| optional) the image to display on the left
		121	image: 'http://a0.twimg.com/profile_images/59268975/jquery_avatar_bigger.png',
		122	// (bool \| optional) if you want it to fade out on its own or just sit there
		123	sticky: false,
		124	// (int \| optional) the time you want it to be alive for before fading out
		125	time: ''
		126	});
		127
		128	return false;
		129
		130	});
		131
		132	$('#add-max').click(function(){
		133
		134	$.gritter.add({
		135	// (string \| mandatory) the heading of the notification
		136	title: 'This is a notice with a max of 3 on screen at one time!',
		137	// (string \| mandatory) the text inside the notification
		138	text: 'This will fade out after a certain amount of time. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" style="color:#ccc">magnis dis parturient</a> montes, nascetur ridiculus mus.',
		139	// (string \| optional) the image to display on the left
		140	image: 'http://a0.twimg.com/profile_images/59268975/jquery_avatar_bigger.png',
		141	// (bool \| optional) if you want it to fade out on its own or just sit there
		142	sticky: false,
		143	// (function) before the gritter notice is opened
		144	before_open: function(){
		145	if($('.gritter-item-wrapper').length == 3)
		146	{
		147	// Returning false prevents a new gritter from opening
		148	return false;
		149	}
		150	}
		151	});
		152
		153	return false;
		154
		155	});
		156
		157	$('#add-without-image').click(function(){
		158
		159	$.gritter.add({
		160	// (string \| mandatory) the heading of the notification
		161	title: 'This is a notice without an image!',
		162	// (string \| mandatory) the text inside the notification
		163	text: 'This will fade out after a certain amount of time. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" style="color:#ccc">magnis dis parturient</a> montes, nascetur ridiculus mus.'
		164	});
		165
		166	return false;
		167	});
		168
		169	$('#add-gritter-light').click(function(){
		170
		171	$.gritter.add({
		172	// (string \| mandatory) the heading of the notification
		173	title: 'This is a light notification',
		174	// (string \| mandatory) the text inside the notification
		175	text: 'Just add a "gritter-light" class_name to your $.gritter.add or globally to $.gritter.options.class_name',
		176	class_name: 'gritter-light'
		177	});
		178
		179	return false;
		180	});
		181
		182	$('#add-with-callbacks').click(function(){
		183
		184	$.gritter.add({
		185	// (string \| mandatory) the heading of the notification
		186	title: 'This is a notice with callbacks!',
		187	// (string \| mandatory) the text inside the notification
		188	text: 'The callback is...',
		189	// (function \| optional) function called before it opens
		190	before_open: function(){
		191	alert('I am called before it opens');
		192	},
		193	// (function \| optional) function called after it opens
		194	after_open: function(e){
		195	alert("I am called after it opens: \nI am passed the jQuery object for the created Gritter element...\n" + e);
		196	},
		197	// (function \| optional) function called before it closes
		198	before_close: function(e, manual_close){
		199	var manually = (manual_close) ? 'The "X" was clicked to close me!' : '';
		200	alert("I am called before it closes: I am passed the jQuery object for the Gritter element... \n" + manually);
		201	},
		202	// (function \| optional) function called after it closes
		203	after_close: function(e, manual_close){
		204	var manually = (manual_close) ? 'The "X" was clicked to close me!' : '';
		205	alert('I am called after it closes. ' + manually);
		206	}
		207	});
		208
		209	return false;
		210	});
		211
		212	$('#add-sticky-with-callbacks').click(function(){
		213
		214	$.gritter.add({
		215	// (string \| mandatory) the heading of the notification
		216	title: 'This is a sticky notice with callbacks!',
		217	// (string \| mandatory) the text inside the notification
		218	text: 'Sticky sticky notice.. sticky sticky notice...',
		219	// Stickeh!
		220	sticky: true,
		221	// (function \| optional) function called before it opens
		222	before_open: function(){
		223	alert('I am a sticky called before it opens');
		224	},
		225	// (function \| optional) function called after it opens
		226	after_open: function(e){
		227	alert("I am a sticky called after it opens: \nI am passed the jQuery object for the created Gritter element...\n" + e);
		228	},
		229	// (function \| optional) function called before it closes
		230	before_close: function(e){
		231	alert("I am a sticky called before it closes: I am passed the jQuery object for the Gritter element... \n" + e);
		232	},
		233	// (function \| optional) function called after it closes
		234	after_close: function(){
		235	alert('I am a sticky called after it closes');
		236	}
		237	});
		238
		239	return false;
		240
		241	});
		242
		243	$("#remove-all").click(function(){
		244
		245	$.gritter.removeAll();
		246	return false;
		247
		248	});
		249
		250	$("#remove-all-with-callbacks").click(function(){
		251
		252	$.gritter.removeAll({
		253	before_close: function(e){
		254	alert("I am called before all notifications are closed. I am passed the jQuery object containing all of Gritter notifications.\n" + e);
		255	},
		256	after_close: function(){
		257	alert('I am called after everything has been closed.');
		258	}
		259	});
		260	return false;
		261
		262	});
		263
		264
		265	});
		266	</script>
		267
		268	</body>
		269	</html>

Subversion Repositories Integrator Subversion

(root)/DOCUMENTOS E ANALISE/telas/assets/global/plugins/gritter/index.html - Rev 1