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

Для того, чтобы виджет заработал нам осталось написать клиентскую часть.

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

Поэтому основную часть клиентской части у нас будет занимать JavaScript код. А чтобы его сократить мы используем библиотеку jQuery с несколькими плагинами.

Кстати, есть демонстрационная страничка с этим виджетом.

И, как и обещал, выкладываю архив с исходниками.

Прежде всего, рассмотрим разметку страницы (index.html).

В заголовке страницы мы подключаем файлы с CSS стилями (строки 13 и 14). Я вынес все стили, которые относятся к виджету в отдельный файл (widgetstyles.css), чтобы они не путались со стилями основной страницы.

Внутри страницы у нас находится 2 блока: основное содержимое (<div id="content">) и виджет (<div id="notesWidget">).

Первый блок нас не интересует, а вот на втором остановимся подробнее. Он состоит из трёх частей:

- заголовок (<div id="notesHeader">);
- блок заметок (<div id="notes">);
- блок с формой добавления заметки (<form id="fAddNote").

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

И в конце страницы мы подключаем jQuery, плагины и файл с нашими скриптами.

Сразу же рассмотрим используемые плагины.

1) jQuery UI. Это скорее не плагин, а целая библиотека. На её сайте вы можете выбрать необходимые компоненты и скачать архив с ними. Для нашего виджета нужны Core UI и Draggable. С их помощью мы сможем свободно перемещать виджет по странице.

2) Jeditable. С помощью этого плагина мы будем создавать in-line редакторы. Т.е. сделаем список с нашими заметками редактируемым. При клике по тексту заметки будет появляться поле ввода с помощью которого пользователь сможет изменить текст.

Теперь рассмотрим CSS стили минимально необходимые для работы плагина. Полный файл со стилями вы можете посмотреть в архиве с исходниками. К тому же при использовании виджета его оформление наверняка придется подстраивать под дизайн страницы.

Для того, чтобы виджет можно было перемещать по странице, он должен иметь абсолютное позиционирование. При этом необходимо задать его размеры и положение.

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

И, т.к. заметок может быть много, добавим прокрутку в блок notes.

Теперь переходим к самой интересной части – нашему JavaScript файлу (custom.js).

Рассмотрим его подробнее.

Прежде всего, сделаем виджет перемещаемым (строки 3-6). Параметр handle указывает, что блок можно будет перемещать только за заголовок, а containment – запрещает выводить блок за пределы страницы.

Затем, мы создаем обработчик нажатия на кнопку «Добавить» (строки 8-30). В нём мы проверяем, ввел ли пользователь текст новой заметки и отправляем AJAX запрос.

После получения ответа будет вызвана анонимная функция (строки 12-23), которая:

1) создает элемент списка с новой записью (с помощью функции createListElement, её мы рассмотрим чуть ниже);

2) вставляет его в начало общего списка;

3) делает редактируемым (с помощью метода editable);

4) добавляет обработчик нажатия на кнопку «Удалить» (вызывает функцию addRemove);

5) и обновляет цвет фона записей (с помощью функции refreshClasses).

Теперь рассмотрим функцию createListElement (строки 59-66). Её основная задача – создать разметку новой записи.

Запись состоит из текста, кнопки «Удалить» (точнее это обычный рисунок, которому назначается обработчик события click), и даты. Оформление записи выполняется с помощью CSS стилей, но на них я останавливаться не буду, в них ничего примечательного нет, к тому же они в любом случае должны сочетаться с конкретной страницей (если интересно, качайте архив с виджетом).

В разметке записи стоит обратить внимание на два момента.

1) Тексту записи присваивается класс edit (<div class="edit"…). С его помощью мы выбираем элементы для которых создаются in-line редакторы.

2) Этому же элементу мы присваиваем атрибут id в формате (note_№), его значение используется при изменении и удалении заметок.

Следующая функция addRemove (строки 68-79).

Здесь выполняется AJAX запрос на удаление заметки (строка 72) и после этого заметка удаляется из списка. При этом используется эффект slideUp.

Теперь рассмотрим функцию refreshClasses (строки 81-88).

Она работает следующим образом.

1) Находим все нечетные элементы в списке заметок.

2) Устанавливаем для них класс odd и убираем even (если он был установлен).

3) Находим все четные элементы списка и устанавливаем для них класс even.

Стили для классов odd и even указаны в CSS файле (widgetstyles.css). Т.е. с помощью этой функции мы всегда можем обновить расцветку списка после добавления или удаления элементов.

Теперь рассмотрим загрузку полного списка записей (строки 32-56). Она выполняется сразу после загрузки страницы.

Мы отправляем AJAX запрос (с помощью метода getJSON) и после получения ответа формируем HTML список с заметками. Точно также как и при добавлении заметки устанавливаем обработчики нажатия на кнопку «Удалить», делаем записи редактируемыми и обновляем стили.

На этом можно остановиться. Общий принцип работы виджета мы рассмотрели, а если есть вопросы или замечания, пишите в комментариях, постараюсь ответить.

P.S. В архиве с исходниками есть файл notes.sql с помощью которого можно создать таблицу в базе данных.

Интересно почитать:

Закат Веба?