
A small jQuery plugin that lets you generate a dynamic and fully controllable checklist to manage your tasks and schedules using Bootstrap's Glyphicons and list group component.
1. Insert the necessary jQuery library and Bootstrap framework into the html page.
<link rel="stylesheet" href="/path/to/bootstrap.min.css"> <script src="/path/to/jquery.min.js"></script> <script src="/path/to/bootstrap.min.js"></script>
2. Prepare your data for the checklist.
var data = [ { id:01, name:'jQueryScript', checked:true, selected:true }, { id:02, name:'Net', checked:false, selected:true }, { id:03, name:'jQuery', checked:true, selected:false } ... ]
3. Insert the Bootstrap Checklist's script into the page.
<script src="js/bootstrap-checklist.js"></script>
4. Generate the checklist in an empty html list you specify.
<ul id="myContainer"></ul>
$('#myContainer').checklist({ data:data });
5. Available configuration options.
$('#myContainer').checklist({ // uses an external datasource instead url: null, // is multiple select multiselect:false, // determines whether or not relative Event onCheck will be triggerd silent:false, // sync check syncCheck:true, // shows checkboxes showCheckbox:true, // customize checkboxes settings:{ color:'#FFFFFF', background_color:'#428BCA', on:'glyphicon glyphicon-check', off:'glyphicon glyphicon-unchecked' } });
6. Callback functions.
$('#myContainer').checklist({ onCheck: function(){}, onUncheck: function(){}, onSelect: function(){}, onUnselect: function(){}, });
7. API methods.
var instance = $('#myContainer').checklist(); // checks a specific item instance.setCheck(id,silent); // unchecks a specific item instance.setUncheck(id,silent); // selects a specific item instance.setSelect(id,silent); // unselects a specific item instance.setUnselect(id,silent); // unselects all items instance.unselectAll(); // uncheckes all items instance.uncheckAll(); // gets checked data instance.getCheckedData();
This awesome jQuery plugin is developed by leondryu. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 28.12.2017
- Source