Pretty toggle buttons in modal forms

This commit is contained in:
Oliver Walters 2019-06-18 23:12:13 +10:00
parent 0285d3ee83
commit 3dddb10f5d
2 changed files with 18 additions and 1 deletions

View File

@ -43,6 +43,22 @@ function partialMatcher(params, data) {
}
function attachToggle(modal) {
/* Attach 'bootstrap-toggle' functionality to any checkbox in the modal.
* This is simple for visual improvement,
* and also larger toggle style buttons are easier to press!
*/
$(modal).find("input[type='checkbox']").each(function(x) {
$(this).bootstrapToggle({
size: 'small',
onstyle: 'success',
offstyle: 'warning',
});
});
}
function attachSelect(modal) {
/* Attach 'select2' functionality to any drop-down list in the modal.
* Provides search filtering for dropdown items
@ -351,6 +367,7 @@ function injectModalForm(modal, form_html) {
*/
$(modal).find('.modal-form-content').html(form_html);
attachSelect(modal);
attachToggle(modal);
}

View File

@ -1,3 +1,3 @@
<div>
<input field='{{ field }}' class='slidey' type="checkbox" data-onstyle="success" data-size='small' data-toggle="toggle" {% if disabled %}disabled="disabled" {% endif %}{% if state %}checked="checked"{% endif %}>
<input field='{{ field }}' class='slidey' type="checkbox" data-offstyle='warning' data-onstyle="success" data-size='small' data-toggle="toggle" {% if disabled %}disabled="disabled" {% endif %}{% if state %}checked="checked"{% endif %}>
</div>