mirror of
https://github.com/Choices-js/Choices.git
synced 2024-06-08 00:42:15 +02:00
Readme plan
This commit is contained in:
parent
7cfe84e9d1
commit
013215f3f7
183
README.md
183
README.md
|
@ -1,7 +1,178 @@
|
||||||
# Choices (in development)
|
# Choices.js - in development
|
||||||
A vanilla JS customisable select box plugin
|
A lightweight, configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency.
|
||||||
|
|
||||||
## To do
|
Coming soon.
|
||||||
* 'Tagging' style input box
|
|
||||||
* Sortable select box (ASC/DESC etc)
|
## Setup
|
||||||
* Select box with filtering search
|
```html
|
||||||
|
<script src="/assets/js/dist/choices.min.js"></script>
|
||||||
|
<script>
|
||||||
|
// Pass multiple elements:
|
||||||
|
var choices = new Choices(elements);
|
||||||
|
|
||||||
|
// Pass single element:
|
||||||
|
var choice = new Choices(element);
|
||||||
|
|
||||||
|
// Pass reference
|
||||||
|
var choice = new Choices('[data-choice']);
|
||||||
|
var choice = new Choices('.js-choice');
|
||||||
|
|
||||||
|
// Passing options
|
||||||
|
var choices = new Choices(elements, {
|
||||||
|
items: [],
|
||||||
|
addItems: true,
|
||||||
|
removeItems: true,
|
||||||
|
removeButton: false,
|
||||||
|
editItems: false,
|
||||||
|
maxItems: false,
|
||||||
|
delimiter: ',',
|
||||||
|
allowDuplicates: true,
|
||||||
|
allowPaste: true,
|
||||||
|
allowSearch: true,
|
||||||
|
regexFilter: false,
|
||||||
|
placeholder: true,
|
||||||
|
placeholderValue: '',
|
||||||
|
prependValue: false,
|
||||||
|
appendValue: false,
|
||||||
|
selectAll: true,
|
||||||
|
loadingText: 'Loading...',
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
To install via NPM, run `npm install --save-dev choices.js`
|
||||||
|
|
||||||
|
## Options
|
||||||
|
#### items
|
||||||
|
Type: `` Default: ``
|
||||||
|
|
||||||
|
Usage:
|
||||||
|
|
||||||
|
#### addItems
|
||||||
|
Type: `` Default: ``
|
||||||
|
|
||||||
|
Usage:
|
||||||
|
|
||||||
|
#### removeItems
|
||||||
|
Type: `` Default: ``
|
||||||
|
|
||||||
|
Usage:
|
||||||
|
|
||||||
|
#### removeButton
|
||||||
|
Type: `` Default: ``
|
||||||
|
|
||||||
|
Usage:
|
||||||
|
|
||||||
|
#### editItems
|
||||||
|
Type: `` Default: ``
|
||||||
|
|
||||||
|
Usage:
|
||||||
|
|
||||||
|
#### maxItems
|
||||||
|
Type: `` Default: ``
|
||||||
|
|
||||||
|
Usage:
|
||||||
|
|
||||||
|
#### delimiter
|
||||||
|
Type: `` Default: ``
|
||||||
|
|
||||||
|
Usage:
|
||||||
|
|
||||||
|
#### allowDuplicates
|
||||||
|
Type: `` Default: ``
|
||||||
|
|
||||||
|
Usage:
|
||||||
|
|
||||||
|
#### allowPaste
|
||||||
|
Type: `` Default: ``
|
||||||
|
|
||||||
|
Usage:
|
||||||
|
|
||||||
|
#### allowSearch
|
||||||
|
Type: `` Default: ``
|
||||||
|
|
||||||
|
Usage:
|
||||||
|
|
||||||
|
#### regexFilter
|
||||||
|
Type: `` Default: ``
|
||||||
|
|
||||||
|
Usage:
|
||||||
|
|
||||||
|
#### placeholder
|
||||||
|
Type: `` Default: ``
|
||||||
|
|
||||||
|
Usage:
|
||||||
|
|
||||||
|
#### placeholderValue
|
||||||
|
Type: `` Default: ``
|
||||||
|
|
||||||
|
Usage:
|
||||||
|
|
||||||
|
#### prependValue
|
||||||
|
Type: `` Default: ``
|
||||||
|
|
||||||
|
Usage:
|
||||||
|
|
||||||
|
#### appendValue
|
||||||
|
Type: `` Default: ``
|
||||||
|
|
||||||
|
Usage:
|
||||||
|
|
||||||
|
#### selectAll
|
||||||
|
Type: `` Default: ``
|
||||||
|
|
||||||
|
Usage:
|
||||||
|
|
||||||
|
#### loadingText
|
||||||
|
Type: `` Default: ``
|
||||||
|
|
||||||
|
Usage:
|
||||||
|
|
||||||
|
#### templates
|
||||||
|
Type: `` Default: ``
|
||||||
|
|
||||||
|
Usage:
|
||||||
|
|
||||||
|
#### classNames
|
||||||
|
Type: `` Default: ``
|
||||||
|
|
||||||
|
Usage:
|
||||||
|
|
||||||
|
#### callbackOnInit
|
||||||
|
Type: `` Default: ``
|
||||||
|
|
||||||
|
Usage:
|
||||||
|
|
||||||
|
#### callbackOnAddItem
|
||||||
|
Type: `` Default: ``
|
||||||
|
|
||||||
|
Usage:
|
||||||
|
|
||||||
|
#### callbackOnRemoveItem
|
||||||
|
Type: `` Default: ``
|
||||||
|
|
||||||
|
Usage:
|
||||||
|
|
||||||
|
|
||||||
|
## Methods
|
||||||
|
#### method();
|
||||||
|
Usage:
|
||||||
|
|
||||||
|
## Browser compatibility
|
||||||
|
Coming soon
|
||||||
|
|
||||||
|
## Development
|
||||||
|
To setup a local environment: clone this repo, navigate into it's directory in a terminal window and run the following command:
|
||||||
|
* ```npm install```
|
||||||
|
|
||||||
|
### NPM tasks
|
||||||
|
* ```npm start```
|
||||||
|
* ```npm run js:build```
|
||||||
|
* ```npm run css:watch```
|
||||||
|
|
||||||
|
## Contributions
|
||||||
|
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Gulp...bla bla bla
|
||||||
|
|
||||||
|
## License
|
||||||
|
MIT License
|
Loading…
Reference in a new issue