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

Added a sample for custom templates

Browse source
This commit is contained in:
fabien.leconte 2016-09-30 14:05:05 +02:00
parent 6c733b25b3
commit c2ae162e0a
1 changed files with 37 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
index.html
View file

@ -237,6 +237,28 @@
<option value="Queens">Queens</option>
<option value="Staten Island">Staten Island</option>
</select>
<label for="choices-custom-templates">Custom templates on items</label>
<select class="form-control" name="choices-custom-templates" id="choices-custom-templates" placeholder="This is a placeholder">
<option value="Madrid">Madrid</option>
<option value="Toronto">Toronto</option>
<option value="Vancouver">Vancouver</option>
<option value="London">London</option>
<option value="Manchester">Manchester</option>
<option value="Liverpool">Liverpool</option>
<option value="Paris">Paris</option>
<option value="Malaga">Malaga</option>
<option value="Washington" disabled>Washington</option>
<option value="Lyon">Lyon</option>
<option value="Marseille">Marseille</option>
<option value="Hamburg">Hamburg</option>
<option value="Munich">Munich</option>
<option value="Barcelona">Barcelona</option>
<option value="Berlin">Berlin</option>
<option value="Montreal">Montreal</option>
<option value="New York">New York</option>
<option value="Michigan">Michigan</option>
</select>
</div>
</div>
<script>
@ -398,6 +420,21 @@
}
});
var customTemplates = new Choices(document.getElementById('choices-custom-templates'), {
callbackOnCreateTemplates: function (instance, strToEl) {
var classNames = instance.config.classNames;
return {
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"'}>
<span>&bigstar;</span> ${data.label}
</div>
`);
},
};
}
});
var boroughs = new Choices(document.getElementById('boroughs')).disable();
});
</script>