deblan-mirror/Choices
deblan-mirror/Choices
1
0
Fork 0
mirror of https://github.com/Choices-js/Choices.git synced 2024-05-10 09:36:35 +02:00
Code Issues Projects Releases Wiki Activity

Use nornmal functions on demo

Browse source
This commit is contained in:
Josh Johnson 2017-03-31 09:09:22 +01:00
parent 7255fa42ce
commit 31a57a0e2b
1 changed files with 26 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
index.html
View file

@ -237,9 +237,9 @@
<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">
<option value="React">React</option>
<option value="React">Angular</option>
<option value="React">Ember</option>
<option value="React">Vue</option>
<option value="Angular">Angular</option>
<option value="Ember">Ember</option>
<option value="Vue">Vue</option>
</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>
@ -281,10 +281,11 @@
paste: false,
duplicateItems: false,
editItems: true,
addItemText: (value) => {
maxItemCount: 5,
addItemText: function(value) {
return `Appuyez sur Entrée pour ajouter <b>"${value}"</b>`;
},
maxItemText: (maxItemCount) => {
maxItemText: function(maxItemCount) {
return `${maxItemCount} valeurs peuvent être ajoutées`;
},
uniqueItemText: 'Cette valeur est déjà présente',
@ -458,17 +459,33 @@
var customTemplates = new Choices(document.getElementById('choices-single-custom-templates'), {
callbackOnCreateTemplates: function (strToEl) {
var classNames = this.config.classNames;
var itemSelectText = this.config.itemSelectText;
return {
item: (data) => {
item: function(data) {
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}
</div>
`);
},
choice: (data) => {
choice: function(data) {
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}
</div>
`);