jQuery: note post it

  • jQuery
  • Gabriele Romanato
jQuery: note post it

Creare note post it con jQuery è sicuramente un effetto dal notevole impatto visivo in grado di ricreare una delle caratteristiche di un ambiente desktop. In questo articolo vedremo come creare dei post it tramite un semplice form ed aggiungere a queste note un effetto di trascinamento grazie al metodo draggable() di jQuery UI. Per aggiungere un tocco di stile in più, utilizzeremo anche un'immagine di sfondo sul post it ed un web font di Google che ricrea l'effetto della scrittura a mano.

Per prima cosa dobbiamo inserire il nostro web font nella pagina:


<head>
<link href='http://fonts.googleapis.com/css?family=Covered+By+Your+Grace&v1' rel='stylesheet' type='text/css' />
</head>

Quindi inseriamo jQuery UI subito dopo jQuery:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
</body>
</html>

A questo punto possiamo creare la marcatura effettiva per il nostro esempio:


<p><a href="#" id="show-dialog">Crea nota</a></p>

<form id="create-note" action="#" method="post">
   
   <div>
   
   		<label for="content">Contenuto</label>
   		<textarea name="content" id="content" cols="15" rows="15"></textarea>
   
   </div>
   
   <p><input type="submit" value="Crea" id="create-btn" name="create-btn" /></p>

</form>

Il form all'inizio risulterà nascosto e verrà mostrato solo quando l'utente attiverà il link per creare la nota. I nostri stili CSS definiscono anche il layout delle note stesse che, ricordiamolo, verranno generate dinamicamente con jQuery:


body {
	margin: 0;
	padding: 2em;
	font: 100% Arial, sans-serif;
}

#show-dialog {
	width: 162px;
	height: 50px;
	text-decoration: none;
	text-align: center;
	display: block;
	color: #fff;
	line-height: 50px;
	font-size: small;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	background: url(button.png) no-repeat;
}

#create-note {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 300px;
	font-size: small;
	display: none;
}

#create-note div {
	width: 280px;
	margin: 0.5em auto;
}

#create-note label {
	display: block;
	font-weight: bold;
	color: #333;
	padding-bottom: 4px;
}

#create-note div textarea {
	width: 278px;
	height: 200px;
	border: 1px solid #999;
	display: block;
	font: 1em Arial, sans-serif;
}

#create-note p input {
	width: 162px;
	height: 50px;
	text-align: center;
	display: block;
	color: #fff;
	line-height: 50px;
	font-size: small;
	font-family: Arial, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	background: url(button.png) no-repeat;
	border: none;
}

div.note {
	width: 225px;
	height: 206px;
	background: url(sticky.png) no-repeat;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -103px 0 0 -114px;
	font: 1em 'Covered By Your Grace', sans-serif;
}

div.note p {
	margin: 0 auto;
	width: 180px;
	padding: 1em 0;
}

La penultima regola CSS ci mostra l'uso del nostro web font. Come si può notare, il nome di un font che presenta degli spazi deve essere sempre racchiuso tra virgolette.

Con jQuery, dobbiamo per prima cosa rendere attivo il link che mostrerà il form:


$('#show-dialog').click(function(event) {
  
    $('#create-note').slideDown('slow');
    
    event.preventDefault();
  
});

Dato che le nostre note hanno un'altezza fissa, dobbiamo imporre un limite al numero di caratteri digitati nel form. Per far ciò, aggiungiamo un contatore in puro stile Twitter all'elemento textarea usando l'evento keypress per il conteggio del numero dei caratteri consentiti:


$('#content', '#create-note').after('<div></div>')
  .next()
  .hide()
  .end()
  .keypress(function(event) {
  
    var current = $(this).val().length;
    
    if(current >= 100) {
    
      if(event.which != 0 && event.which != 8) {
      
        event.preventDefault();
      
      }
    
  
    }
    
    $(this).next().show().text(100 - current);  
});

Infine, dobbiamo aggiungere un'azione all'evento submit del nostro form che andrà a creare la nota, inserendola nella pagina e attivando su di essa il trascinamento tramite draggable(), e quindi a nascondere nuovamente il form svuotando al contempo il campo di testo ed il contatore di caratteri:


$('#create-note').submit(function(event) {
  
  
    var $form = $(this);  
    var content = $('#content', $form).val();
    
    $('<div class="note"/>').html('<p>' + content + '</p>').
    appendTo('body').draggable();
    
    $form.slideUp('slow');
    
    $('#content', $form).val('').next().empty();
    
    event.preventDefault();  
  
  
  
});

Potete visionare l'esempio finale in esempio non disponibile

Ti potrebbe interessare anche

Torna su