Overview

The jQuery Sticky Notes Plugin allows you to easily and unobtrusively add sticky notes on your website.
This sticky notes plugin was created because the original plugin has not fit my usability needs.

Quick Start Guide

1 Add a div to your page with fixed width and height:


<div id="notes" style="width:800px;height:600px;">
</div>

2 Include jQuery, jQuery UI (draggable and resiable are needed), the Stick Notes Plugin, a CSS files and a short script to initialize the the notes container when the DOM is ready:

<html>
<head>
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="jquery.ui-1.7.2.custom.min.js"></script>
    <script type="text/javascript" src="jquery.stickynotes.js"></script>
    <link rel="stylesheet" href="jquery.stickynotes.css" type="text/css">

    <script type="text/javascript">
        // wait for the DOM to be loaded
        $(document).ready(function() {
            $('#notes').stickyNotes();
        });
    </script>
</head>
...

That's it!

Demo

Usage

Create a note by clicking on the add note button.
Edit the note.
Stop editing the note by clicking on the wooden background.
Reedit the note by double clicking on the notes text.
Resize the note with the small icon on the right bottom corner of the note.
Reposition the note by dragging it on the the wooden background.
Delete the note by clicking on the cross in the left top corner of the note.

Options

notes

The notes that are rendered initialy on the board.

Example:


var options = {notes:[{"id":1,
	"text":"Test Internet Explorer",
	"pos_x": 50,
	"pos_y": 50,	
	"width": 200,							
	"height": 200,													
}]}
jQuery("#notes").stickyNotes(options);

resizable

A flag that defines whether the notes are resizeable.
Default value: true

Example:


var options = {resizable:false}
jQuery("#notes").stickyNotes(options);

controls

A flag that defines whether the controlls (add note button) should be rendered.
Default value: true

Example:


var options = {controls:false}
jQuery("#notes").stickyNotes(options);

editCallback

Callback function to be invoked after a note was edited.

Example:


var edited = function(note) {
	alert("Edited note with id " + note.id + ", new text : " + note.text);
}
var options = {editCallback: edited}
jQuery("#notes").stickyNotes(options);

createCallback

Callback function to be invoked after a note was created.

Example:


var created = function(note) {
	alert("Created note with id " + note.id + ", text : " + note.text);
}
var options = {createCallback: created}
jQuery("#notes").stickyNotes(options);

deleteCallback

Callback function to be invoked after a note was deleted.

Example:


var deleted = function(note) {
	alert("Deleted note with id " + note.id + ", text : " + note.text);
}
var options = {deleteCallback: deleted}
jQuery("#notes").stickyNotes(options);

moveCallback

Callback function to be invoked after a note was moved.

Example:


var moved = function(note) {
	alert("Moved note with id " + note.id + ", text : " + note.text);
}
var options = {moveCallback: moved}
jQuery("#notes").stickyNotes(options);

resizeCallback

Callback function to be invoked after a note was resized.

Example:


var resized = function(note) {
	alert("Resized note with id " + note.id + ", text : " + note.text);
}
var options = {resizeCallback: resized}
jQuery("#notes").stickyNotes(options);

Download

The Sticky Notes Plugin can be downloaded from Google Code.

Support

Support for the jQuery Form Plugin is available through the jQuery Sticky Notes Google Group.