Рассмотрим его подробнее
Рассмотрим его подробнее. Прежде всего, сделаем виджет перемещаемым (строки 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 (). С его помощью мы выбираем элементы для которых создаются 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 список с заметками. Точно также как и при добавлении заметки устанавливаем обработчики нажатия на кнопку «Удалить», делаем записи редактируемыми и обновляем стили.
.jpg)
На этом можно остановиться. Общий принцип работы виджета мы рассмотрели, а если есть вопросы или замечания, пишите в комментариях, постараюсь ответить. P. S. В архиве с исходниками есть файл notes. sql с помощью которого можно создать таблицу в базе данных. Интересно почитать: Закат Веба?