jStickyNote... notas adhesivas en tu web con jQuery

Escrito por: Martín el 21-12-2009 08:35:17 y leído 1020 veces

Este plugin tiene por finalidad poner esos tan útiles post-it (MR) que siempre vemos en todas oficinas, tapando la mitad de los monitores con todas las cosas pendientes por hacer...

Pues bien, ahora podemos llenarle el monitor de notitas adhesivas a nuestros visitantes con recordatorios, mensajes o lo que quieras.

Su autor, nos deja una serie de demos que no tiene sentido duplicar para poner en mi web...por lo que te aconsejo que lo mires desde ahi.

Es totalmente personalizable mediante CSS y por favor, si lo usas, no uses la Comic Sans!!!!

Código JAVASCRIPT

$(function() {
			$("#content").stickynote({
				size 			 : 'large',
				text			 : 'Don\'t forget to buy beans!',
				containment		 : 'content',
				event			 : 'dblclick'
			});
			
			$("#testclick").stickynote({
				size 			 : 'large',
				containment		 : 'content'
			});
			
			$("#testsmall").stickynote();
			
			$("#testcolor").stickynote({
				color			: '#FF0000',
				ontop			: true
			});
			
		});

Código XHTML

<div id="content" class="content"></div>

Código CSS

.jSticky-large{
	background:transparent url(../images/stickynote-large.png) no-repeat top left;
	width:225px;
	height:228px;
	position: absolute;
	z-index:999999;
}
.jSticky-medium{
	background:transparent url(../images/stickynote-medium.png) no-repeat top left;
	width:160px;
	height:162px;
	position: absolute;
	z-index:999999;
}
.jSticky-delete{
	background:transparent url(../images/delete.png) no-repeat top left;
	height:14px;
	width:14px;
	position:absolute;
	cursor:pointer;
}
.jSticky-medium .jStickyNote textarea, .jSticky-medium .jStickyNote p{
	font-size: 14px;
	font-weight:bold;
	height:115px;
}
.jSticky-large .jStickyNote textarea, .jSticky-large .jStickyNote p{
	height:160px;
	font-size: 16px;
}
.jStickyNote textarea{
	width:75%;
	background-color:transparent;
	border:none;
	font-family: 'Comic Sans MS',Textile,cursive;
	font-size:16px;
	overflow:hidden;
	color:#999;
	padding:0px;
	margin:15px 0px 0px 24px;
	float:left;
	resize:none;
}
.jStickyNote p{
	font-family: 'Comic Sans MS',Textile,cursive;
	color:#444;
	margin:15px 0px 0px 24px;
	overflow:hidden;
	width:75%;
	float:left;
}
.jSticky-large .jSticky-create{
	float:right;
	width:14px;
	height:14px;
	background:transparent url(../images/ok.png) no-repeat top left;
	margin-right:1px;
	margin-top:185px;
	cursor:pointer;
}
.jSticky-medium .jSticky-create{
	float:right;
	width:14px;
	height:14px;
	background:transparent url(../images/ok.png) no-repeat top left;
	margin-right:1px;
	margin-top:80%;
	cursor:pointer;
}

Categorías: Notas Adhesivas • Jquery • Plugin • Css • •