Simple Todo List Plugin with jQuery and jQuery UI - Todolist

File Size: 185 KB
Views Total: 6909
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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="//"> 
<script src="//"></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.

  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:


  • bug fix

This awesome jQuery plugin is developed by purtug. For more Advanced Usages, please check the demo page or visit the official website.