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.











