Recursos y Descargas

Esto no es un blog. Es una sección que programé para ir publicando aquellas cositas que me parecen interesantes y, por cualquier motivo, quiero tener a mano. Copia lo que quieras, usa lo que quieras (pero respeta sus licencias).

jStickyNote... notas adhesivas en tu web con jQuery

Escrito por: Martín el 21-12-2009 08:35:17

jStickyNote... notas adhesivas en tu web con jQuery

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