Draggable Sticky Note Plugin With jQuery - Tellis-StickyNote
File Size: | 4.12 KB |
---|---|
Views Total: | 3339 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.