Draggable Sticky Note Plugin With jQuery - Tellis-StickyNote

File Size: 4.12 KB
Views Total: 3178
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Draggable Sticky Note Plugin With jQuery - Tellis-StickyNote

Yet another note taking plugin for jQuery that lets you dynamically create customizable sticky notes with drag, maximize and minimize capabilities.

How to use it:

1. Add references to jQuery, tellis-sticky-note.css, and tellis-sticky-note.js .

<link rel="stylesheet" href="tellis-sticky-note.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
<script src="tellis-sticky-note.js"></script>

2. Initialize the Tellis-StickyNote plugin.

$(document).ready(function(){

  var sticky = Tellis_Sticky();

  sticky.init();

});

3. Display a sticky note on the webpage.

sticky.write("jQueryScript.Net");

4. Customize the maximize and minimize icons. By default, the plugin uses Bootstrap glyphicon for the icons.

$("body").append(

  '<div id="postit">'
  +
    '<span id="minimise" class="glyphicon glyphicon-minus"  style="position:absolute; left: 8px; top: -35px; font-size: 15px"></span>'
  +
    '<span id="maximise"  class="glyphicon glyphicon-plus"  style="position:absolute; left: 8px; top: -35px; font-size: 15px; display: none"></span>'
  +
    '<p id="postit-body"></p>'
  +
    '</div>'


);

This awesome jQuery plugin is developed by eshiett1995. For more Advanced Usages, please check the demo page or visit the official website.