🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

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.

Bootstrap jQuery-UI todo-list

Documentation

LobiList

jQuery plugin for todo lists. Supports drag & drop of todos. Multiple lists with different colors. Support for communication to backend

View Demo

Features

  • Multiple list support
  • Different styles
  • Drag & drop list
  • Drag & drop todos
  • Ajax configuration urls for todo CRUD
  • Checkboxes to mark/unmark todo as done
  • Powerful event management

Installation and dependencies

LobiList is depended on jQuery, jQuery ui and bootstrap.

  • Download plugin source files or
  • run bower install lobilist --save to install using bower

1. Include necessary css/js files

<!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>

2. Initialize plugin and use it

For documentation and examples visit the plugin's home page


You May Also Like