Опубликовано: Алексей Качаев |

Спонсор поста:
Здесь можно купить Microsoft Office. (Я раньше думал, что он дороже стоит).
Автоматизация бухгалтерского учета. Пригодиться каждому предприятию.

Сегодня на очереди очерденой туториал (урок) по использованию jQuery и его плагинов.

Не буду вдаваться во всякие подробности того, как задача передо мной возникла, - перейду сразу к делу.

В эпоху ajax`a мы все привыкли к функционалу добавления/редактирования/удаления записей в базе данных без перегрузки страницы. Классический пример - панель модерирования комментариев в Wordpress. Ну, если добавление/редактирование особых опасностей не представляет, то… удаление может принести неприятный сюрприз. Поэтому при проектировании интерфейса и функционала нужно сразу предусмотреть механизм, который убережет пользователя от “случайного” удаления не того, что нужно.

Задача: интерфейс ToDo листа

Вполне прикладное задание на сегодня:

Реализовать функционал ToDo-листа: добаление/редактирование/удаление записей в рамках одной странички (без перегрузки). Пока только визуально, т.е. оперируя элементами страницы: задание из ToDo-листа = один элемент списка. При удалении элемента пользователь получает модальное окно с вопросом “Продолжить / Отменить” - т.е. повторим подвиг назойливого Windows.

Вдаваться в работу с базой данных мы сегодня не будем. Свое решение я продемонстрирую на более простой задаче - работе с элементами интерфейса. Но сейчас главное - понять принцип. Если в этом туториале разберетесь, то сможете легко прикрутить сюда то, что нужно в конкретно вашем случае (к примеру, базу данных).

Реализацию вы можете посмотреть здесь. Попробовали? Ну теперь посмотрим как это получилось…

1. Структура страницы

Для решеия задачи нам понадобятся:
- фреймворк jQuery
- плагин jqModal

Интерфейс:

- Слой class=’result’ с пока еще пустым списком внутри. Этот список мы будем заполнять заданиями ToDo-листа.

- Текстовое поле id=”todo” и ссылка “Добавить” class=”add”. Думаю и так ясно, зачем нам эти элементы

- Слой class=”jqmConfirm” id=”confirm” - это контейнер того самого модального окна, который будет “спрашивать” у пользователя про удаление элемента.

<!-- Confirm Dialog -->
<div class="jqmConfirm" id="confirm">
	<div id="ex3b" class="jqmConfirmWindow">
		<div class="jqmConfirmTitle clearfix">
			<h1>Вы запросили удаление элемента...</h1><a href="#" class="jqmClose"><em>Close</em></a>
		</div>
 
	  <div class="jqmConfirmContent">
	 	 <p class="jqmConfirmMsg"></p>
	 	 <p>Продолжить...?</p>
	  </div>
 
	 	<input type="submit" value="Нет" />
	  	<input type="submit" value="Да" />
	  </p>
 
	</div>
</div>
<!-- End Confirm Dialog -->

- Пока еще не существующий, но очень нужный - элемент списка, содержащий задание ToDo листа и управляющие элементы, дающие возможность эту запись отредактировать и/или удалить.

<li><img style='margin: 0 2px -4px 0;' src='http://www.kachayev.ru/price/images/m_url.png'> <span>"+todo+"</span><div class='delete'><img src='edit.png' class='edit' alt='"+todo+"'> <img src='del.png' class='erase'></div></li>

На странице этого элемента еще нет - он будет добавляться скриптом. +todo+ - текст добавляемого задания. Обратите внимание, что текст задания взят в теги span, для удобства его редактирования в будущем. На изображения в правом конце будут потом “подвешены” обработчики редактирования и удаления соответственно.

Но… обо всем попрядку.

- css-каскад для украшательства и функциональной приспособленности. Самая важная часть, очевидно, та что касается оформления слоев модального окна. Вы можете посмотреть каскад в исходниках страницы с примером.

2. Добавление нового элемента

Итак, текущая задача: При нажатии на ссылку “Добавить”, скрипт должен считать текст из соседнего поля. Если в этом тексте больше 0 знаков, то сгенерировать новый элемент списка, с указанной структурой, затем найти список в слое result и вставить в его конец новый элемент.

Подключаем необходимые нам плагины:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jqModal.js"></script>
<link type="text/css" rel="stylesheet" media="all" href="jqModal.css" />

Теперь начинаем “развешивать” обработчики. С самого начала “подключим” к слою id=”confirm” модальное окно. Позже мы разберем эту строку подробно, пока нас интересует не это

Сейчас нас интересует обработчик $(’.add’).click() и $(’#todo’).focus().

$().ready(function() {
  $('#confirm').jqm({overlay: 88, modal: true, trigger: false});
 
  $('.add').click(function(){
  	todo = $('#todo').val();
	if(todo.length > 0){
		$('.result ul').append("<li><img style='margin: 0 2px -4px 0;' src='http://www.kachayev.ru/price/images/m_url.png'> <span>"+todo+"</span><div class='delete'><img src='edit.png' class='edit' alt='"+todo+"'> <img src='del.png' class='erase'></div></li>");
	}
  });
 
  $('#todo').focus(function(){
  	$(this).attr('value', '');
	return false;
  });
});

Первый обработчик работает по указанной схеме: получает содержимое текстового поля и, если длина записи больше нуля, добавляет новый элемент списка с помощью append(). Обратите внимание, что новое задание (todo) мы храним в двух местах: в тегах SPAN для отображения пользователю, и в атрибуте ALT картинки вызова редактирования.

Второй обработчик делает очень простую вещь - он очищает текстовое поле при получении ним фокуса. Это гораздо удобнее, чем каждый раз в ручную удалять старую запись.

3. Редактирование записи из ToDo-листа

Следующий эффект, который мы реализуем: при нажатии на IMG class=”edit”, запускается обработчик, который “находит” родительский элемент списка, в этом элементе находит SPAN и меняет содержимое этого тега (там сейчас текст задания) на текстовое поле INPUT с значение VALUE соответствующим тексту задания. Сам текст задания мы извлекаем из содержимого атрибута ALT той картинки, на которую кликнули.

Помимо INPUT`а добавляем также ссылку class=”save”. При клике на нее процесс будет происходить в обратном направлении: скрипт “найдет” соответствующий INPUT (по родительскому тегу SPAN), считает написанную там строку и содержимое SPAN поменяет на новое задание.

Код, это все выполняющий:

$('.edit').click(function() { 
$(this).parents("li").find('span').html("<input type='text' value='"+$(this).attr('alt')+"'> <a href='#' class='save'>&rarr;</a>");
 
	$('.save').click(function(){
		todo_i = $(this).parents('span').find('input').val();
		if(todo_i.length>0){
			$(this).parents('li').find('img.edit').attr('alt', todo_i);
			$(this).parents('span').text(todo_i);
			return false;
		}
		delete todo_i;
	});
 
return false;
});

Код не очень запутанный, да и задание не сложное, собственно. Дальше гораздо интереснее.

4. Удаление элемента списка

Конечно, можно было сделать банально - при кликанье на картинку вызывается обработчик и .remove`ом удаляет запись… Но цель у нас немного другая - обезопасить пользователя от случайного клика. Поэтому выведем при таком клике модальное окно с вопросом: а действительно ли он хочет удалить эту самую запись.

Для начала определим в коде функцию confirm(), которая будет заниматься работой наше окна.

function confirm(msg,callback) {
  $('#confirm')
    .jqmShow()
    .find('p.jqmConfirmMsg')
      .html(msg)
    .end()
    .find(':submit:visible')
      .click(function(){
        if(this.value == 'Да')
            callback();
       //если было кликнуто "Да" выполняется функция callback()
       $('#confirm').jqmHide();
      });
}

Функция принимает два параметра: собственно текст сообщения и callback()-функция, которой будет “скормлен” результат. О стандартных методах .jqmShow() и .jqmHide() можно почитать на страничке jqModal, но думаю и так понятно, что они делают

Теперь к всем изображением class=”erase” мы привяжем обработчик, который будет делать следующие: искать родительский элемент списка, из SPAN считывать текущее задание, вызывать функцию confirm(), передавая ей текст вопроса и callback()-функцию, вызываемую при ответе ДА. Раз уж мы знаем, что пользователь ответил ДА, то callback() занимается тем, что удаляет выбранную запись.

$('.erase').click(function() { 
li  = $(this).parents("li");
	todo = li.find('span').text();
	confirm('Вы попросили удалить: '+todo+'!', function(){
			li.remove();
			return false;
	}); 
return false;
});

Для нормальной работы нашего диалогового окна, нужно еще “привязать” необходимый слой. Но, мы уже сделали это строкой:

$('#confirm').jqm({overlay: 88, modal: true, trigger: false});

Параментры “overlay: 88″ задают “затемнение экрана при вызове окна, “modal: true” делает окно модальным (т.е. пользователь не может совершать действия вне окна, пока его не закроет). Подробнее вы можете прочитать в документации к плагину.

5. Планы на будущее

Итак, теперь можно расслабиться и насладиться своим “творчеством”. Но, всего остаются планы на будущее…

В следующих уроках:

• Записи ToDo-листа на страничке не сохранятся, поэтому следующий шаг - база данных для хранения наших записей и Ajax запросы для управления этой базой без перегрузки страницы.
• У задания ToDo помимо текста есть дата, рейтинг (важность), а также степень “выполнености”. В третьем релизе мы обязательно учтем эти факторы: дадим возможность их задавать, изменять, сортировать по важности и дате, а также - подсвечивать те, срок по которым истекает сегодня.

Если придумаем что-то еще - тоже реализуем. Поэтому пожелания и соображения можете оставлять в комментариях. Наиболее активных обязательно отмечу и поблагодарю ссылочкой.

Спонсор поста: Программы для бизнеса. Большой выбор, доступные цены.

Понравился пост? Будь в курсе последних событий: подпишись на RSS-ленту.!

Также читайте по теме:

• Украина первая в мире по запросу “Zend” (18)
• jQuery: 8 полезных советов при работе с элементом SELECT (15)
• JQuery и Ajax: результат в красивой оболочке (10)
• PHP и JavaScript: парочка полезных функций (12)
• jQuery: автоматическое исправление тегов (5)