Всем вам должны быть хорошо известны интерфейсы просмотра лент новостей, записей блогов, в которых новые записи подгружаются по мере чтения. Новые данные подгружаются в тот момент, когда полоса прокрутки достигает самого низа. Хорошим примером такого интерфейса является Google Reader, а также сайт DZone. Сегодня я покажу, как можно сделать такой интерфейс при помощи jQuery. Приложение будет имитировать работу блога, в котором при загрузке страницы, посредством AJAX будут загружаться первые 10 записей, а остальные будут подгружаться по мере чтения.
Управление табличными данными при помощи jQuery
В одной из прошлых статей я писал о том, как сделать текст на странице динамически редактируемым. Там был представлен метод редактирования при помощи плагина jEditable. Таким образом можно динамически редактировать любой блок текста на странице. Однако если речь идет о табличных данных, то гораздо удобнее использовать другое решение – плагин tableFormSynch. Этот плагин связывает таблицу с формой, давая возможность динамически редактировать данные в таблице, а также добавлять и удалять записи.
В этой статье я покажу, как сделать простое приложение, реализующее редактирование, добавление и удаление записей таблицы, сохраняя данные при помощи AJAX. Чтобы создать приложение нам будут нужны библиотека jQuery, плагин metadata (требуется для работы плагина tableFormSynch), а также jQuery Form Plugin для сохранения данных формы через AJAX. Но прежде чем мы начнем, предлагаю посмотреть на готовый результат. Смотреть демо пример.
Редактируемый контент на jQuery
Этот простой туториал посвящен тому, как сделать любой текст на странице динамически редактируемым. В общем виде работает это так: пользователь щелкает мышью по тексту, который нужно отредактировать, в результате чего на этом месте появляется форма для редактирования. После того, как пользователь внес изменения, он нажимает кнопку OK и скрипт автоматически отправляет AJAX запрос на сервер, сохраняя введенные данные. После этого форма исчезает, а на её месте остается отредактированный текст.
Для выполнения такой задачи, нам понадобятся библиотека jQuery и плагин Jeditable.
Новый плагин для Mootools – Request.Queue
Request.Queue – это новый плагин для библиотеки Mootools, который позволяет последовательно отправлять AJAX запросы на сервер. Работает это так: пользователь создает некоторое количество запросов Request, которые должны быть отправлены на сервер один за одним, затем добавляет их в очередь Request.Queue, после чего для каждого запроса вызывается метод send() в том порядке, в котором они должны быть отправлены.
Постраничная навигация на jQuery
В последнее время мне пришлось столкнуться с проблемой постраничной навигации (pagination), и, дабы не изобретать велосипед, я сразу же решил поискать готовые решения. Как оказалось, их не так уж и много. В конце концов, я остановил свой выбор на приемлемом для меня решении, о котором и пойдет речь в этой статье. Сие решение представляет собой скрипт, использующий jQuery и способный обеспечивать быструю и простую навигацию используя AJAX. Я несколько изменил исходный скрипт, чтобы получить таблицу с одинаковым количеством строк (в исходном варианте таблица всегда имела размер в зависимости от количества получаемых данных), плюс я добавил эффекты затухания при прорисовке.
Чтобы получить представление о конечном результате этого туториала, предлагаю вам взглянуть на демо.