URL скопирован в буфер обмена!
Как сделать чекбоксы с функцией памяти на Tilda
С помощью этой модификации можно создать чекбоксы, которые будут сохранять своё состояние в кэш. Дополнительно можно добавить кнопку для сброса всех чекбоксов. Модификация отлично подойдёт для создания чек-листов, списков задач и других списков с возможностью отслеживания прогресса.
Модификация обновлена. Скрипт теперь работает с новыми формами
Модификация работает с включенным Autoscale в блоках
Модификация работает с Zero Block
Номер модификации в библиотеке TiCode
Класс формы с чекбоксами
Класс кнопки очистки
Вид чекбокса
Тип индикатора чекбокса
Цвет активного чекбокса
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD0093--><script>
function TiWait(selector, callback) {
const TCDstart = setInterval(() => {
const TCDtildaforms = document.querySelectorAll(selector);
if (TCDtildaforms.length) {
clearInterval(TCDstart);
callback(TCDtildaforms);
}
}, 300);
}
function TiCodeKey(cb){
const n = (cb.name || '').trim();
const id = (cb.id || '').trim();
const wrap = cb.closest('[data-input-lid]');
const lid = wrap ? String(wrap.getAttribute('data-input-lid') || '').trim() : '';
const v = (cb.value || '').trim();
return 'tcd_chk_' + (n || id || lid || 'noname') + '__' + v;
}
function TiCodeBindDelegation(){
if (document.documentElement.dataset.tcdChkDeleg === "1") return;
document.documentElement.dataset.tcdChkDeleg = "1";
function saveFromTarget(t){
if (!t || t.type !== 'checkbox') return;
if (!t.closest('.ti-checklist')) return;
const key = TiCodeKey(t);
localStorage.setItem(key, t.checked ? 'true' : 'false');
}
document.addEventListener('change', function(e){
saveFromTarget(e.target);
}, true);
document.addEventListener('click', function(e){
const t = e.target && e.target.closest ? e.target.closest('.ti-checklist input[type="checkbox"]') : null;
if (!t) return;
setTimeout(() => saveFromTarget(t), 0);
}, true);
}
function TiCodeCheckboxRestore(form) {
const TCDCheckboxes = form.querySelectorAll('input[type="checkbox"]');
TCDCheckboxes.forEach(checkbox => {
const TCDkey = TiCodeKey(checkbox);
const TCDsavedState = localStorage.getItem(TCDkey);
if (TCDsavedState !== null) {
checkbox.checked = (TCDsavedState === 'true');
}
});
}
function TiCodeButton(form) {
const TCDresetButton = document.querySelector('.ti-remove');
if (TCDresetButton && TCDresetButton.dataset.tcdResetBind !== "1") {
TCDresetButton.dataset.tcdResetBind = "1";
TCDresetButton.addEventListener('click', function(e) {
e.preventDefault();
const allBoxes = document.querySelectorAll('.ti-checklist input[type="checkbox"]');
allBoxes.forEach(checkbox => {
checkbox.checked = false;
localStorage.removeItem(TiCodeKey(checkbox));
checkbox.dispatchEvent(new Event('change', {bubbles:true}));
checkbox.dispatchEvent(new Event('input', {bubbles:true}));
});
}, true);
}
}
function TiCodeBlockEnterSubmit(form){
if (!form || form.dataset.tcdEnterBlocked === "1") return;
form.dataset.tcdEnterBlocked = "1";
form.addEventListener("keydown", function(e){
if (e.key !== "Enter") return;
e.preventDefault();
e.stopPropagation();
return false;
}, true);
}
function TiCodesetupTabr() {
const TCDtabContainer = document.querySelector('.t395__wrapper');
if (TCDtabContainer && TCDtabContainer.dataset.tcdTabBind !== "1") {
TCDtabContainer.dataset.tcdTabBind = "1";
TCDtabContainer.addEventListener('click', function(event) {
const TCDclickedTab = event.target.closest('[role="tab"]');
if (TCDclickedTab) {
setTimeout(() => {
const forms = document.querySelectorAll('.ti-checklist');
forms.forEach(form => {
if (form && form.offsetParent !== null) {
TiCodeCheckboxRestore(form);
TiCodeButton(form);
TiCodeBlockEnterSubmit(form);
}
});
}, 100);
}
});
}
}
document.addEventListener('DOMContentLoaded', function() {
TiCodeBindDelegation();
TiWait('.ti-checklist', function(forms) {
forms.forEach(form => {
TiCodeCheckboxRestore(form);
TiCodeButton(form);
TiCodeBlockEnterSubmit(form);
});
});
TiCodesetupTabr();
});
</script>
<style>
.ti-remove { cursor: pointer; }
.ti-checklist input[type=checkbox]:checked + .t-checkbox__indicator,
.ti-checklist input[type=checkbox]:checked + .t-checkbox__indicator:after { border-color: #F96855 !important; }
.ti-checklist input[type=checkbox]:checked +.t-checkbox__indicator + span { opacity: 0.5; text-decoration: line-through; }
.ti-checklist input[type="checkbox"]:checked + .t-checkbox__indicator:before {
background: #F96855;
content: '';
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 12px;
border-radius: 50%;
opacity: 0;
}
.ti-checklist .t-checkbox__indicator { border-radius: 50%; }
</style>
<script>(function TCDupdType(){const TildahtmlBclok=document.currentScript;if(TildahtmlBclok){const recordElement=TildahtmlBclok.closest('.r[data-record-type]');if(recordElement){recordElement.setAttribute('data-record-type',Math.random().toString(36).substring(2,12));}}})();</script>
Для нормальной работы модификации необходимо включить библиотеку jQuery.
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
1. Создаем в Zero Block форму и присваиваем ей класс ti-checklist
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
При необходимости можно создать несколько отдельных форм с чек-боксами и присвоить общий класс.
В форме очищаем все поля и добавляем поля "Checkbox". Каждому чек-боксу в настройках формы присваиваем уникальную переменную (variable name)
2. При необходимости создаем кнопку очистки чек-боксов. Для этого добавляем в зеро блок кнопку и присваиваем ей класс ti-remove
3. Указываем дополнительные настройки в генераторе:
Вид чек-бокса - выбираем круглый или квадратный вид;
Тип индикатора - выбираем галочку или закрашивание активного чек-бокса;
Цвет активного чек-бокса - указываем цвет активного чек-бокса. Цвет неактивного чек-бокса указываем в настройках формы;
4. Копируем готовый код и вставляем в HTML блок Т123. Блок T123 должен быть расположен ниже зеро блока.
Примечание: скрипт пишет состояние чек-боксов в кеш бразера. Если пользователь сбросил кеш или зашел с другого устройства или браузер, то состояние чек-боксов сбросит. Если нужно принудительно сбросить состояние чек-боксов у всех пользователей, то нужно в форме чек-боксам задать новые название в переменных.
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
При необходимости можно создать несколько отдельных форм с чек-боксами и присвоить общий класс.
В форме очищаем все поля и добавляем поля "Checkbox". Каждому чек-боксу в настройках формы присваиваем уникальную переменную (variable name)
2. При необходимости создаем кнопку очистки чек-боксов. Для этого добавляем в зеро блок кнопку и присваиваем ей класс ti-remove
3. Указываем дополнительные настройки в генераторе:
Вид чек-бокса - выбираем круглый или квадратный вид;
Тип индикатора - выбираем галочку или закрашивание активного чек-бокса;
Цвет активного чек-бокса - указываем цвет активного чек-бокса. Цвет неактивного чек-бокса указываем в настройках формы;
4. Копируем готовый код и вставляем в HTML блок Т123. Блок T123 должен быть расположен ниже зеро блока.
Примечание: скрипт пишет состояние чек-боксов в кеш бразера. Если пользователь сбросил кеш или зашел с другого устройства или браузер, то состояние чек-боксов сбросит. Если нужно принудительно сбросить состояние чек-боксов у всех пользователей, то нужно в форме чек-боксам задать новые название в переменных.
Чек-лист: проверка сайта перед сдачей заказчику
