Multifunctional Todo List Plugin With jQuery - LobiList

File Size: 678 KB
Views Total: 10318
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Multifunctional Todo List Plugin With jQuery - LobiList

LobiList is a simple, powerful, ajax-enabled jQuery todo list management plugin that uses jQuery UI for drag and drop support and Bootstrap for list styles & action icons.

Basic usage:

1. Load jQuery library, jQuery UI, Bootstrap and the jQuery LobiList plugin in the html document.

<link rel="stylesheet" href="jquery-ui.min.css">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="lobilist.min.css">

<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch-improved.js"></script>
<script src="bootstrap.min.js"></script>

2. LobiList initialization is simple. Just create an empty div and call the plugin.

<div id="todo-lists-demo"></div>

3. Plugin contains 2 internal classes: LobiList and List. You have option to set defaults for LobiList and all List instances will take these options. But if you want different option for List you can override LobiList option by specifying different options for List.

  //Every list will have default style 'lobilist-info'
  defaultStyle: 'lobilist-info',
  lists: [
          //This list will have style 'lobilist-danger' instead of 'lobilist-info'
          defaultStyle: 'lobilist-danger',
      ... //other lists

4. All default plugin options and callback events.

'listStyles': ['lobilist-default', 'lobilist-danger', 'lobilist-success', 'lobilist-warning', 'lobilist-info', 'lobilist-primary'],
listsOptions: {
    id: false,
    title: '',
    items: []
itemOptions: {
    id: false,
    title: '',
    description: '',
    dueDate: '',
    done: false

lists: [],
// Urls to communicate to backend
actions: {
    'load': '',
    'update': '',
    'insert': '',
    'delete': ''
useCheckboxes: true,
enableTodoAdd: false,
enableTodoRemove: true,
enableTodoEdit: true,
sortable: true,
controls: ['edit', 'add', 'remove', 'styleChange'],
//List style. Available options: 'lobilist-default', 'lobilist-info', 'lobilist-success', 'lobilist-danger', 'lobilist-warning', 'lobilist-primary'
defaultStyle: 'lobilist-default',
onSingleLine: true,

// Events
 * @event init
 * Fires when <code>LobiList</code> is initialized
 * @param {LobiList} The <code>LobiList</code> instance
init: null,

 * @event beforeDestroy
 * Fires before <code>Lobilist</code> is destroyed. Return false if you do not want <code>LobiList</code> to be destroyed.
 * @param {LobiList} The <code>LobiList</code> to be destroyed
beforeDestroy: null,

 * @event afterDestroy
 * Fires after <code>Lobilist</code> is destroyed.
 * @param {LobiList} The destroyed <code>LobiList</code> instance
afterDestroy: null,

 * @event beforeListAdd
 * Fires before <code>List</code> is added to <code>LobiList</code>. Return false to prevent adding list.
 * @param {LobiList} The <code>LobiList</code> instance
 * @param {List} The <code>List</code> instance to be added
beforeListAdd: null,

 * @event afterListAdd
 * Fires after <code>List</code> is added to <code>LobiList</code>.
 * @param {LobiList} The <code>LobiList</code> instance
 * @param {List} Just added <code>List</code> instance
afterListAdd: null,

 * @event beforeListRemove
 * Fires before <code>List</code> is removed. Returning false will prevent removing the list
 * @param {List} The <code>List</code> to be removed
beforeListRemove: null,

 * @event afterListRemove
 * Fires after <code>List</code> is removed
 * @param {List} The remove <code>List</code>
afterListRemove: null,

 * @event beforeItemAdd
 * Fires before item is added in <code>List</code>. Return false if you want to prevent removing item
 * @param {List} The <code>List</code> in which the item is going to be added
 * @param {Object} The item object
beforeItemAdd: null,

 * @event afterItemAdd
 * Fires after item is added in <code>List</code>
 * @param {List} The <code>List</code> in which the item is added
 * @param {Object} The item object
afterItemAdd: null,

 * @event beforeItemUpdate
 * Fires before item is updated. Returning false will prevent updating item
 * @param {List} The <code>List</code> instance
 * @param {Object} The item object which is going to be updated
beforeItemUpdate: null,

 * @event afterItemUpdate
 * Fires after item is updated
 * @param {List} The <code>List</code> object
 * @param {Object} The updated item object
afterItemUpdate: null,

 * @event beforeItemDelete
 * Fires before item is deleted. Returning false will prevent deleting the item
 * @param {List} The <code>List</code> instance
 * @param {Object} The item object to be deleted
beforeItemDelete: null,

 * @event afterItemDelete
 * Fires after item is deleted.
 * @param {List} The <code>List</code> object
 * @param {Object} The deleted item object
afterItemDelete: null,

 * @event afterListReorder
 * Fires after <code>List</code> position is changed among its siblings
 * @param {LobiList} The <code>LobiList</code> instance
 * @param {List} The <code>List</code> instance which changed its position
afterListReorder: null,

 * @event afterItemReorder
 * Fires after item position is changed (it is reordered) in list
 * @param {List} The <code>List</code> instance
 * @param {Object} The jQuery object of item
afterItemReorder: null,

 * @event afterMarkAsDone
 * Fires after item is marked as done.
 * @param {List} The <code>List</code> instance
 * @param {Object} The jQuery checkbox object
afterMarkAsDone: null,

 * @event afterMarkAsUndone
 * Fires after item is marked as undone
 * @param {List} The <code>List</code> instance
 * @param {Object} The jQuery checkbox object
afterMarkAsUndone: null,

 * @event beforeAjaxSent
 * Fires before ajax call is sent to backend. This event is very useful is you want to add default parameters
 * or headers to every request. Such as CSRF token parameter or Access Token header
 * @param {List} The <code>List</code> instance
 * @param {Object} The jquery ajax parameters object. You can add additional headers or parameters
 * to this object and must return the object which will be used for sending request
beforeAjaxSent: null

5. API methods.

var myInstance = $('#todo-lists-demo').data('lobiList');

// adds a new list
    title: 'TODO list',
    defaultStyle: 'lobilist-danger',
    useCheckboxes: false,
    item: [

// adds a new item
myInstance.addItem(item, errorCallback)

// updates an item
myInstance.updateItem(item, errorCallback)

// deletes an item
myInstance.deleteItem(item, errorCallback)

// saves or updates an item
myInstance.saveOrUpdateItem(item, errorCallback)

// starts title editing

// finishes title editing

// cancels title editing

// removes the list

// edits an item

// suppress events.

// resumes all events

Change log:


  • Improve getNextListId method


  • Fix getStyle method bug


  • Start saving preferences in localStorage. Implement saving list title


  • Added getPosition, getId, setId methods to List class.


  • Added item data as argument on afterMarkAsDone and afterMarkAsUndone events


  • Fixed list remove bug


  • Minor bug fix


  • Fixed delete todo item bug

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