LobiList is jQuery plugin for todo lists. Supports drag & drop of todos. Multiple lists with different colors. Support for communication to backend.
What's new
LobiList is depended on jQuery, jQuery ui and bootstrap.
bower install lobilist --save to install using bower
<!DOCTYPE html>
<html>
<head>
<!--Default installation-->
<link rel="stylesheet" href="lib/jquery/jquery-ui.min.css"/>
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="dist/lobilist.min.css">
<!--Installation using bower. Preferred!!! -->
<!--<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"/>-->
<!--<link rel="stylesheet" href="bower_components/jquery-ui/themes/ui-lightness/jquery-ui.min.css"/>-->
<!--<link rel="stylesheet" href="bower_components/lobilist/dist/lobilist.min.css"/>-->
</head>
<body>
<!--Default installation-->
<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/jquery/jquery-ui.min.js"></script>
<script src="lib/jquery/jquery.ui.touch-punch-improved.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script src="dist/lobilist.min.js"></script>
<!--Installation using bower. Preferred!!! -->
<!--<script src="bower_components/jquery/dist/jquery.min.js"></script>-->
<!--<script src="bower_components/jquery-ui/jquery-ui.min.js"></script>-->
<!--<script src="bower_components/jquery-ui-touch-punch-improved/jquery.ui.touch-punch-improved.js"></script>-->
<!--<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>-->
<!--<script src="bower_components/lobilist/dist/lobilist.min.js"></script>-->
</body>
</html>Create empty tag and call plugin
<div class="lobilist-demo"></div>
<script>
$(function(){
$('#lobilist-demo').lobiList({
//Options go here
...
});
});
</script>
Default options for all plugin instances
// Available style for lists
'listStyles': ['lobilist-default', 'lobilist-danger', 'lobilist-success', 'lobilist-warning', 'lobilist-info', 'lobilist-primary'],
// Default options for all lists
listsOptions: {
id: false,
title: '',
items: []
},
// Default options for all todo items
itemOptions: {
id: false,
title: '',
description: '',
dueDate: '',
done: false
},
lists: [],
// Urls to communicate to backend for todos
actions: {
'load': '',
'update': '',
'insert': '',
'delete': ''
},
// Whether to show checkboxes or not
useCheckboxes: true,
// Show/hide todo remove button
enableTodoRemove: true,
// Show/hide todo edit button
enableTodoEdit: true,
// Whether to make lists and todos sortable
sortable: true,
// Default action buttons for all lists
controls: ['edit', 'add', 'remove', 'styleChange'],
//List style
defaultStyle: 'lobilist-default',
// Whether to show lists on single line or not
onSingleLine: true
//Overriding default options
$.fn.lobiList.DEFAULT_OPTIONS = $.extend({}, $.fn.lobiList.DEFAULT_OPTIONS, {
... //override any options from default options
});
Methods for LobiList can be called in two ways.
1. You can get the instance and call the method
//get the LobiList instance
var instance = $('#todo-lists-demo').data('lobiList');
//call the methods
instance.addList({
title: 'TODO list',
defaultStyle: 'lobilist-danger',
useCheckboxes: false,
item: [
...
]
});
2. Or you can call the method directly
$('#todo-lists-demo').lobiList('addList', {
title: 'TODO list',
defaultStyle: 'lobilist-danger',
useCheckboxes: false,
item: [
...
]
});
List instance
List|Object, The List instance to addList - Just added List instance
LobiList.
none
LobiList
LobiList
Integer
none
Integer
List1. Grab the List instance from $lists array.
var $lobilist = $('selector').data('lobiList');
//$lobilist.$lists will contain all List instances in this list group
$lobilist.$lists[0].addItem({
title: '',
description: ''
});
List instance in its data-lobiList attribute.
$('selector').lobiList({
lists: [
{
id: 'todoList1',
title: 'TODO',
items: [
...
]
}
]
});
var $list = $('#todoList1').data('lobiList');
$list.addItem({
title: '',
description: ''
});
List
Object, The item ObjectFunction,
The callback which is called when server returned response but
response.success=false
List
action.insert url is provided request is sent to the server.
Server response example: {"success": Boolean}.
If response.success is true item is added.
Otherwise errorCallback callback is called if it was provided.
List
Object, The item Object to updateFunction,
The callback which is called when server returned response but
response.success=false
List
action.update url is provided request is sent to the server.
Server response example: {"success": Boolean}.
If response.success is true item is updated.
Otherwise errorCallback callback is called if it was provided.
List
Object, The item Object to deleteFunction, The callback which is called when server returned response butList
action.delete url is provided request is sent to the server.
Server response example: {"success": Boolean}
If response.success=true item is deleted from the list and afterItemDelete event
if triggered. Otherwise errorCallback callback is called if it was provided.
List
Object, The item ObjectFunction, The callback which is called when server returned response butList
List - instance
none
List - instance
List - instance
none
List - instance
List - instance
none
List - instance
List instance
none
List instance
List instance
String, The id of the item to start updatingList instance
List instance
none
List instance
resumeEvents
List instance
none
List instance
LobiList - The LobiList instanceLobiList is initialized
LobiList - The LobiList to be destroyedLobilist is destroyed. Return false if you do not want LobiList to be destroyed.
LobiList - The destroyed LobiList instanceLobilist is destroyed.
LobiList - The LobiList instanceList - The List instance to be addedList is added to LobiList. Return false to prevent adding list.
LobiList - The LobiList instanceList - Just added List instanceList is added to LobiList.
List - The List to be removedList is removed. Returning false will prevent removing the list
List - The remove ListList is removed
List - The List in which the item is going to be addedObject - The item objectList. Return false if you want to prevent removing item
List - The List in which the item is addedObject - The item objectList
List - The List instanceObject - The item object which is going to be updatedList - The List objectObject - The updated item objectList - The List instanceObject - The item object to be deletedList - The List objectObject - The deleted item objectLobiList - The LobiList instanceList - The List instance which changed its positionList position is changed among its siblings
List - The List instanceObject - The jQuery object of itemList - The List instanceObject - The jQuery checkbox objectList - The List instanceObject - The jQuery checkbox objectList - The List instanceObject - The jquery ajax parameters object. You can add additional headers or parameters
$('selector').lobiList({
lists: [
{
title: 'TODO',
defaultStyle: 'lobilist-info',
items: [
{
title: 'Floor cool cinders',
description: 'Thunder fulfilled travellers folly, wading, lake.',
dueDate: '2015-01-31'
},
{
title: 'Periods pride',
description: 'Accepted was mollis',
done: true
},
{
title: 'Flags better burns pigeon',
description: 'Rowed cloven frolic thereby, vivamus pining gown intruding strangers prank treacherously darkling.'
},
{
title: 'Accepted was mollis',
description: 'Rowed cloven frolic thereby, vivamus pining gown intruding strangers prank treacherously darkling.',
dueDate: '2015-02-02'
}
]
},
{
title: 'DOING',
items: [
{
title: 'Composed trays',
description: 'Hoary rattle exulting suspendisse elit paradises craft wistful. Bayonets allures prefer traits wrongs flushed. Tent wily matched bold polite slab coinage celerities gales beams.'
},
{
title: 'Chic leafy'
},
{
title: 'Guessed interdum armies chirp writhes most',
description: 'Came champlain live leopards twilight whenever warm read wish squirrel rock.',
dueDate: '2015-02-04',
done: true
}
]
}
]
});This example uses Bootstrap datepicker
$('selector').lobiList({
lists: [
{
title: 'TODO',
defaultStyle: 'lobilist-info',
items: [
{
title: 'Floor cool cinders',
description: 'Thunder fulfilled travellers folly, wading, lake.',
dueDate: '2015-01-31'
}
]
}
],
afterListAdd: function(lobilist, list){
var $dueDateInput = list.$el.find('form [name=dueDate]');
$dueDateInput.datepicker();
}
});$('selector').click(function () {
list = $('#todo-lists-demo-events')
.lobiList({
init: function () {
Lobibox.notify('default', {
msg: 'init'
});
},
beforeDestroy: function () {
Lobibox.notify('default', {
msg: 'beforeDestroy'
});
},
afterDestroy: function () {
Lobibox.notify('default', {
msg: 'afterDestroy'
});
},
beforeListAdd: function () {
Lobibox.notify('default', {
msg: 'beforeListAdd'
});
},
afterListAdd: function () {
Lobibox.notify('default', {
msg: 'afterListAdd'
});
},
beforeListRemove: function (list) {
Lobibox.notify('default', {
msg: 'beforeListRemove'
});
},
afterListRemove: function () {
Lobibox.notify('default', {
msg: 'afterListRemove'
});
},
beforeItemAdd: function () {
Lobibox.notify('default', {
msg: 'beforeItemAdd'
});
},
afterItemAdd: function () {
Lobibox.notify('default', {
msg: 'afterItemAdd'
});
},
beforeItemUpdate: function () {
Lobibox.notify('default', {
msg: 'beforeItemUpdate'
});
},
afterItemUpdate: function () {
Lobibox.notify('default', {
msg: 'afterItemUpdate'
});
},
beforeItemDelete: function () {
Lobibox.notify('default', {
msg: 'beforeItemDelete'
});
},
afterItemDelete: function () {
Lobibox.notify('default', {
msg: 'afterItemDelete'
});
},
beforeListDrop: function () {
Lobibox.notify('default', {
msg: 'beforeListDrop'
});
},
afterListReorder: function () {
Lobibox.notify('default', {
msg: 'afterListReorder'
});
},
beforeItemDrop: function () {
Lobibox.notify('default', {
msg: 'beforeItemDrop'
});
},
afterItemReorder: function () {
Lobibox.notify('default', {
msg: 'afterItemReorder'
});
},
afterMarkAsDone: function () {
Lobibox.notify('default', {
msg: 'afterMarkAsDone'
});
},
afterMarkAsUndone: function () {
Lobibox.notify('default', {
msg: 'afterMarkAsUndone'
});
},
lists: [
{
title: 'TODO',
defaultStyle: 'lobilist-info',
items: [
{
title: 'Floor cool cinders',
description: 'Thunder fulfilled travellers folly, wading, lake.',
dueDate: '2015-01-31'
},
{
title: 'Periods pride',
description: 'Accepted was mollis',
done: true
},
{
title: 'Flags better burns pigeon',
description: 'Rowed cloven frolic thereby, vivamus pining gown intruding strangers prank ' +
'treacherously darkling.'
},
{
title: 'Accepted was mollis',
description: 'Rowed cloven frolic thereby, vivamus pining gown intruding strangers prank ' +
'treacherously darkling.',
dueDate: '2015-02-02'
}
]
}
]
})
.data('lobiList');
});$('selector').lobiList({
lists: [
{
title: 'TODO',
defaultStyle: 'lobilist-info',
controls: ['edit', 'styleChange'],
items: [
{
title: 'Floor cool cinders',
description: 'Thunder fulfilled travellers folly, wading, lake.',
dueDate: '2015-01-31'
}
]
},
{
title: 'Disabled custom checkboxes',
defaultStyle: 'lobilist-danger',
controls: ['edit', 'add', 'remove'],
useLobicheck: false,
items: [
{
title: 'Periods pride',
description: 'Accepted was mollis',
done: true
}
]
},
{
title: 'Controls disabled',
controls: false,
items: [
{
title: 'Composed trays',
description: 'Hoary rattle exulting suspendisse elit paradises craft wistful. ' +
'Bayonets allures prefer traits wrongs flushed. Tent wily matched bold polite slab coinage ' +
'celerities gales beams.'
}
]
},
{
title: 'Disabled todo edit/remove',
enableTodoRemove: false,
enableTodoEdit: false,
items: [
{
title: 'Composed trays',
description: 'Hoary rattle exulting suspendisse elit paradises craft wistful. ' +
'Bayonets allures prefer traits wrongs flushed. Tent wily matched bold polite slab coinage ' +
'celerities gales beams.'
}
]
}
]
});$('selector').lobiList({
sortable: false,
lists: [
{
title: 'TODO',
defaultStyle: 'lobilist-info',
controls: ['edit', 'styleChange'],
items: [
{
title: 'Floor cool cinders',
description: 'Thunder fulfilled travellers folly, wading, lake.',
dueDate: '2015-01-31'
}
]
},
{
title: 'Controls disabled',
controls: false,
items: [
{
title: 'Composed trays',
description: 'Hoary rattle exulting suspendisse elit paradises craft wistful. Bayonets allures prefer traits wrongs flushed. Tent wily matched bold polite slab coinage celerities gales beams.'
}
]
}
]
});