A jQuery todo list plugin.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.



A simple todo list plugin. Demo here: http://purtuga.github.io/jquery.todoList/

Getting Started

Download the plugin from the Release page. Plugin is located in the dist folder. It currently depends on jQuery and jQuery UI Themes.

In your web page:

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.0/themes/ui-lightness/jquery-ui.css">

<script src="jquery.js"></script>
<script src="dist/todoList.min.js"></script>
    jQuery(function($) {


jQuery.todoList Creates a todo list on the the given set of jQuery elements. Each todo list support the user adding items to it, marking items complete as well as hidding the completed items. It currently uses jQuery UI's themes for part of its styling.




jQuery.todoList accepts as input an object containing the supported options below.

  • title : (Type: String, Optional, Default: Todo List) The title for the todo list.

  • items : (Type: Array<String>|Array<Object>, Optional, Default: []) An array of items for the todo list. The content of the array can be either a String or an Object containing at least a title attribute (String) and optional a done attribute (Boolean) indicating if the task is done.

  • removeLabel : (Type: String, Optional, Default: delete?) The title for item delete button.

  • newItemPlaceholder : (Type: String, Optional, Default: New Item) The placeholder text for the new item input field

  • editItemTooltip : (Type: String, Optional, Default: Click to Edit) The tooltip shown when hovering over an item that can be edited.

  • focusOnTitle : (Type: Boolean, Optional, Default: false) If set to true, the Todo List Title will be shown in Edit mode with its text selected.

  • customActions : (Type: Array, Optional, Default: null) An Array of Objects with additional items to be displayed on the todolist menu. Each object must define at least two properties: title - the title of the menu item. action - a function that will be called when clicked. Example:

    customActions: [
            title: "Delete Todo List",
            action: function(originalOptions, thisCustomActionObject){
                // this = original selector


    title: "Todo List",
    items: [
        "task 1",
            title: "task 2",
            done:   true
            title: "task 3"


Methods are called by specifing the method name as input to the $().todoList() method. The following methods are support in interacting with this plugin:

  • getSetup : Returns an object with that represents the current todo list setup.

    var todoListSetup = $("#your_element").todoList("getSetup");
    // Would return:
        title: "Todo List",
        items: [
                title:  "task 1",
                done:   false
                title:  "task 2",
                done:   true
                title:  "task 3",
                done:   false


Events are triggered on the element where the todolist was inserted. Event listners can be bound using jQuery. Example:

$("#your_element").on("todolist-add-item", function(ev, options, $ui){

    // Save the setup


All events will provide 3 input arguments to the listners:

  • ev - jQuery Event object
  • options - An object with the original options given to the plugin
  • $ui - A jQuery object of the original element the widget was bound to.

The following Events can be listen to:

  • todolist-change : Triggered when something has changed. Will be triggered along with other events.
  • todolist-add : Triggered when an item is added to the todo list. Will be suppressed during initialization.
  • todolist-remove : Triggered when an item is removed from the list.
  • todolist-edit : Triggered when an item or the list title is edited.
  • todolist-checked : Triggered when an item is checked.
  • todolist-unchecked : Triggered when an item is un-checked.

Release History

  • 1.0.0 : First version of plugin.