Draggable Sticky Note Plugin With jQuery - Tellis-StickyNote

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.

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.

  • Publication date: 02.10.2018
  • Source