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

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.