Author: | JLambertazzo |
---|---|
Views Total: | 157 views |
Official Page: | Go to website |
Last Update: | February 10, 2021 |
License: | MIT |
Preview:

Description:
ListExtender.js is a simple list manipulation JavaScript library that can be used to add, remove, edit, sort, validate, get items in a list view.
Features:
- Double click list items to edit.
- Add new list items with an input field.
- Sort list items via drag and drop.
- Optional Delete button for each list item.
- 8 themes.
How to use it:
1. Load the ListExtender JavaScript library in the HTML.
<script src="js/ListExtender.js"></script>
2. Create a new instance of the List Extender.
const myList = new ListExtender();
3. Insert the list into your content.
myList.addAfter('#myList h2');
4. Set the placeholder of the input field.
myList.setPlaceholder('Type something here!');
5. Set the initial list items using the addFromArray
method.
myList.addFromArray(['CSSScript', 'jQueryScript', 'Google.com', 'Facebook.com']);
6. Apply a custom validator to the list.
myList.validateList.addValidation(value => { return (value.match(/\d{4}-\d{2}-\d{2}/) && value.match(/\d{4}-\d{2}-\d{2}/)[0] === value) || (value.match(/\d{2}\/\d{2}\/\d{4}/) && value.match(/\d{2}\/\d{2}\/\d{4}/)[0] === value) || (value.match(/\d{8}/) && value.match(/\d{8}/)[0] === value) }, 'Please follow specified format!!')
7. Set the list theme. Available themes:
- simpleLight
- simpleDark
- cream
- hacker
- underwater
- MLA
- PuTTY
- emoji
myList.setTheme(themeName);
8. Available options.
const myList = new ListExtender({ // is unordered list isUnordered: true, // allows sortable allowReorder: true, // shows delete button showDeleteButton: false, });
9. More API methods.
// set the input type: // 'text' // 'email' // 'password' // 'date' // 'month' // 'number' // 'time' // 'url' // 'week' myList.setInputType(type) // set the minimum length of the input field myList.setMinLength(minLength); // set the maximum length of the input field myList.setMaxLength(maxLength); // apply a unique ID to the lsit myList.setId(id); // apply additional CSS classes to the list myList.addClasses(classList); // remove CSS classes from the list myList.removeClasses(classList); // add a new item to the list myList.addListItem(); // append the list before the element myList.addBefore(query); // get data myList.getData(); myList.getAllData();