mirror of
https://github.com/Choices-js/Choices.git
synced 2024-05-17 21:16:34 +02:00
Added a sample for custom templates
This commit is contained in:
parent
6c733b25b3
commit
c2ae162e0a
37
index.html
37
index.html
|
@ -237,6 +237,28 @@
|
||||||
<option value="Queens">Queens</option>
|
<option value="Queens">Queens</option>
|
||||||
<option value="Staten Island">Staten Island</option>
|
<option value="Staten Island">Staten Island</option>
|
||||||
</select>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<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>★</span> ${data.label}
|
||||||
|
</div>
|
||||||
|
`);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
var boroughs = new Choices(document.getElementById('boroughs')).disable();
|
var boroughs = new Choices(document.getElementById('boroughs')).disable();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in a new issue