Simple Todo List Plugin with jQuery and jQuery UI - Todolist
File Size: | 185 KB |
---|---|
Views Total: | 6835 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Todolist is a really simple jQuery plugin to create a responsive & animated todo list component on your web page, styling with jQuery UI. The user can easily add/remove/edit list items with mouse interaction.
How to use it:
1. Include the jQuery Javascript library and jQuery todolist plugin's script on your web page.
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <script src="jquery.todoList.js"></script>
2. Include the jQuery UI library and a jQuery UI theme to style the todo list.
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css"> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
3. Create an empty container for the todo list.
<div id="demo"></div>
4. The Javascript to generate a simple todo list with predefined data using JS array object.
$("#demo").todoList({ items: [ 'todo 1', 'todo 2', 'todo 3' ] });
5. All the options available.
// todo list title title: "Todo List", // an array of predefined items items: [], // text label as you remove an item removeLabel: "delete?", // placeholder for the item input newItemLabel: "New Item", // tooltip text as you hover over an item editItemTooltip: "Click to Edit", // focus on title on innitialization focusOnTitle: false, // custom functions customActions: null
Change log:
2014-12-23
- bug fix
This awesome jQuery plugin is developed by purtug. For more Advanced Usages, please check the demo page or visit the official website.