Skip to content
LobiList is TODO list jquery plugin
JavaScript CSS HTML
Branch: master
Clone or download
This branch is even with thecodeholic:master.

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
dist
lib
src
.gitignore
LICENSE
README.md
bower.json
gulpfile.js
index.html
package-lock.json
package.json

README.md

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 can’t perform that action at this time.