Удаление элементов списка с возможностью последующего восстановления

15 ноября 2011 г.

Наверное, каждый видел, что после удаления записи со стены ВКонтакте появляется ссылка для восстановления сообщения. Сегодня мы сделаем тоже самое с элементами списка. Итак, вот список вещей, которые нам потребуются:

Знание jQuery
Плагин LiveQuery
Удобный редактор
Прямые руки
Немного терпения

Для начала создадим заготовку. Создать

Теперь нужно повесить обработчик события нажатия элемента span. Это очень просто, и не должно вызвать у вас проблем.

var id = 0; //А это просто счетчик. Позже вы увидите, для чего он нужен
$("#add").click (function () { //Думаю, эта часть кода не требует комментариев
$("#list").append(" />/> Удалить");
 id++;
 });

Я решил просто брать элементы списка и сохранять их в массив. Добавим этот кусок кода:

var queue = new Array(); //В этом массиве будут храниться удалённые элементы Но тут есть подводные камни. Содержимое текстовых полей не сохраняется. Ничего страшного. Мы это легко исправим. //Эти функции сохраняют значения 
$("textarea").livequery('change', function () { $(this).html($(this).val());
 });
 $("input[type='text']").livequery('change', function () { $(this).attr("value", $(this).val());
 });

Теперь перейдём к удалению и восстановлению элементов. Это делается так: $(“span.delete”).livequery(‘click’, function () { /* Эта функция и будет выполнять процедуру удаления. Мы воспользовались плагином LiveQuery, чтобы облегчить себе труд.

*/ var html = $(this).parent().html();
//Это сама форма queue.push ({'html':html});
//Для хранения будем использовать формат JSON var num = queue.length;
$(this).parent().html("Восстановить");
$("span.restore").click (function () { //Вот мы и дошли до самого интересного
var num = $(this).attr("restore") * 1 - 1; //Вычисляем адрес формы
var parent = $(this).parent(); // Для удобства
parent.html(queue[num].html); // Восстанавливаем форму
 });
 });

Всё работает, всё замечательно. Мы добавили на страничку CKeditor, и после восстановления он не работает. А вот это уже не хорошо. Это еще один подводный камень. Но баг легко исправить. Просто перед сохранением формы удалите CKeditor совсем, а при восстановлении снова добавьте. вот все файлы, нужные для работы.

Теги: jQuery
рубрика Сайтостроение