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>
<script>
  $(function(){
    $('#todo-lists-demo').lobiList({
      //Options
    });
  });
</script>

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.

$('.selector').lobiList({
  //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
myInstance.addList({
    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
myInstance.startTitleEditing()

// finishes title editing
myInstance.finishTitleEditing()

// cancels title editing
myInstance.cancelTitleEditing()

// removes the list
myInstance.remove()

// edits an item
myInstance.editItem()

// suppress events.
myInstance.suppressEvents()

// resumes all events
myInstance.resumeEvents()

Change log:

2017-12-27

• Improve getNextListId method

2017-12-26

• Fix getStyle method bug

2017-12-24

• Start saving preferences in localStorage. Implement saving list title

2016-09-17

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

2016-09-15

• Added item data as argument on afterMarkAsDone and afterMarkAsUndone events

2016-09-10

• Fixed list remove bug

2016-06-06

• Minor bug fix

2016-04-08

• 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.