Simple Todo List Plugin with jQuery and jQuery UI - Todolist

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.