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
List
1. 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 Object
Function
,
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 Object
Function
, 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 List
List
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.'
}
]
}
]
});