mirror of
https://github.com/Choices-js/Choices.git
synced 2024-05-20 22:46:33 +02:00
Use nornmal functions on demo
This commit is contained in:
parent
7255fa42ce
commit
31a57a0e2b
35
index.html
35
index.html
|
@ -237,9 +237,9 @@
|
||||||
<label for="choices-single-custom-templates">Custom templates</label>
|
<label for="choices-single-custom-templates">Custom templates</label>
|
||||||
<select class="form-control" name="choices-single-custom-templates" id="choices-single-custom-templates" placeholder="This is a placeholder">
|
<select class="form-control" name="choices-single-custom-templates" id="choices-single-custom-templates" placeholder="This is a placeholder">
|
||||||
<option value="React">React</option>
|
<option value="React">React</option>
|
||||||
<option value="React">Angular</option>
|
<option value="Angular">Angular</option>
|
||||||
<option value="React">Ember</option>
|
<option value="Ember">Ember</option>
|
||||||
<option value="React">Vue</option>
|
<option value="Vue">Vue</option>
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
<p>Below is an example of how you could have two select inputs depend on eachother. 'Boroughs' will only be enabled if the value of 'States' is 'New York'</p>
|
<p>Below is an example of how you could have two select inputs depend on eachother. 'Boroughs' will only be enabled if the value of 'States' is 'New York'</p>
|
||||||
|
@ -281,10 +281,11 @@
|
||||||
paste: false,
|
paste: false,
|
||||||
duplicateItems: false,
|
duplicateItems: false,
|
||||||
editItems: true,
|
editItems: true,
|
||||||
addItemText: (value) => {
|
maxItemCount: 5,
|
||||||
|
addItemText: function(value) {
|
||||||
return `Appuyez sur Entrée pour ajouter <b>"${value}"</b>`;
|
return `Appuyez sur Entrée pour ajouter <b>"${value}"</b>`;
|
||||||
},
|
},
|
||||||
maxItemText: (maxItemCount) => {
|
maxItemText: function(maxItemCount) {
|
||||||
return `${maxItemCount} valeurs peuvent être ajoutées`;
|
return `${maxItemCount} valeurs peuvent être ajoutées`;
|
||||||
},
|
},
|
||||||
uniqueItemText: 'Cette valeur est déjà présente',
|
uniqueItemText: 'Cette valeur est déjà présente',
|
||||||
|
@ -458,17 +459,33 @@
|
||||||
var customTemplates = new Choices(document.getElementById('choices-single-custom-templates'), {
|
var customTemplates = new Choices(document.getElementById('choices-single-custom-templates'), {
|
||||||
callbackOnCreateTemplates: function (strToEl) {
|
callbackOnCreateTemplates: function (strToEl) {
|
||||||
var classNames = this.config.classNames;
|
var classNames = this.config.classNames;
|
||||||
|
var itemSelectText = this.config.itemSelectText;
|
||||||
return {
|
return {
|
||||||
item: (data) => {
|
item: function(data) {
|
||||||
return strToEl(`
|
return strToEl(`
|
||||||
<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 style="margin-right:10px;">🎉</span> ${data.label}
|
<span style="margin-right:10px;">🎉</span> ${data.label}
|
||||||
</div>
|
</div>
|
||||||
`);
|
`);
|
||||||
},
|
},
|
||||||
choice: (data) => {
|
choice: function(data) {
|
||||||
return strToEl(`
|
return strToEl(`
|
||||||
<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"'}>
|
<div
|
||||||
|
class="${classNames.item} ${classNames.itemChoice} ${data.disabled ? classNames.itemDisabled : classNames.itemSelectable}"
|
||||||
|
data-select-text="${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}
|
<span style="margin-right:10px;">👉🏽</span> ${data.label}
|
||||||
</div>
|
</div>
|
||||||
`);
|
`);
|
||||||
|
|
Loading…
Reference in a new issue