deblan-mirror/Choices
deblan-mirror/Choices
1
0
Fork 0
mirror of https://github.com/Choices-js/Choices.git synced 2024-05-21 06:56:34 +02:00
Code Issues Projects Releases Wiki Activity

Update documentation

Browse source
This commit is contained in:
Josh Johnson 2016-11-07 13:53:56 +00:00
parent c57d6c76fc
commit 3213f3f967
2 changed files with 11 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
README.md
View file

@ -376,6 +376,9 @@ classNames: {
**Usage:** Classes added to HTML generated by Choices. By default classnames follow the [BEM](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) notation.
## Callbacks
**Note:** For each callback, `this` refers to the current instance of Choices. This can be useful if you need access to methods (`this.disable()`) or the config object (`this.config`).
### callbackOnInit
**Type:** `Function` **Default:** `null`
@ -422,7 +425,7 @@ const example = new Choices(element, {
**Usage:** Function to run each time an item is unhighlighted.
### callbackOnCreateTemplates
**Type:** `Function` **Default:** `null` **Arguments:** `instance, template`
**Type:** `Function` **Default:** `null` **Arguments:** `template`
**Input types affected:** `text`, `select-one`, `select-multiple`
@ -432,19 +435,19 @@ const example = new Choices(element, {
```js
const example = new Choices(element, {
callbackOnCreateTemplates: function (instance, template) {
var classNames = instance.config.classNames;
callbackOnCreateTemplates: function (template) {
var classNames = this.config.classNames;
return {
item: (data) => {
return template(`
<div class="${classNames.item} ${data.highlighted ? classNames.highlightedState : classNames.itemSelectable}" data-item data-id="${data.id}" data-value="${data.value}" ${data.active ? 'aria-selected="true"' : ''} ${data.disabled ? 'aria-disabled="true"' : ''}>
<div class="${classNames.item} ${data.highlighted ? classNames.highlightedState : classNames.itemSelectable}" data-item data-id="${data.id}" data-value="${data.value}" ${data.active ? 'aria-selected="true"' : ''} ${data.disabled ? 'aria-disabled="true"' : ''}>
<span>&bigstar;</span> ${data.label}
</div>
`);
},
choice: (data) => {
return template(`
<div class="${classNames.item} ${classNames.itemChoice} ${data.disabled ? classNames.itemDisabled : classNames.itemSelectable}" data-select-text="${instance.config.itemSelectText}" data-choice ${data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'} data-id="${data.id}" data-value="${data.value}" ${data.groupId > 0 ? 'role="treeitem"' : 'role="option"'}>
<div class="${classNames.item} ${classNames.itemChoice} ${data.disabled ? classNames.itemDisabled : classNames.itemSelectable}" data-select-text="${this.config.itemSelectText}" data-choice ${data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'} data-id="${data.id}" data-value="${data.value}" ${data.groupId > 0 ? 'role="treeitem"' : 'role="option"'}>
<span>&bigstar;</span> ${data.label}
</div>
`);

6
index.html
View file

@ -429,8 +429,8 @@
});
var customTemplates = new Choices(document.getElementById('choices-custom-templates'), {
callbackOnCreateTemplates: function (instance, strToEl) {
var classNames = instance.config.classNames;
callbackOnCreateTemplates: function (strToEl) {
var classNames = this.config.classNames;
return {
item: (data) => {
return strToEl(`
@ -441,7 +441,7 @@
},
choice: (data) => {
return strToEl(`
<div class="${classNames.item} ${classNames.itemChoice} ${data.disabled ? classNames.itemDisabled : classNames.itemSelectable}" data-select-text="${instance.config.itemSelectText}" data-choice ${data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'} data-id="${data.id}" data-value="${data.value}" ${data.groupId > 0 ? 'role="treeitem"' : 'role="option"'}>
<div class="${classNames.item} ${classNames.itemChoice} ${data.disabled ? classNames.itemDisabled : classNames.itemSelectable}" data-select-text="${this.config.itemSelectText}" data-choice ${data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'} data-id="${data.id}" data-value="${data.value}" ${data.groupId > 0 ? 'role="treeitem"' : 'role="option"'}>
<span style="margin-right:10px;">👉🏽</span> ${data.label}
</div>
`);