Динамический раздел FAQ с помощью jQuery, YQL & Google Docs

В этом уроке мы сделаем динамический раздел FAQ. Наш скрипт, с помощью jQuery & YQL, будет извлекать содержимое общедоступной электронной таблицы из вашего аккаунта Google Docs, и использовать эти данные, чтобы заполнить раздел FAQ вопросами и ответами. Здесь можно узнать больше о контекстной рекламе yandex

Пример СкачатьСильная сторона этого решения заключается в том, что вы можете изменять содержимое раздела FAQ через Google Docs, просто редактируя таблицу. Вы также можете использовать остальные возможности Google Docs, например, совместное редактирование. Таким образом, небольшая команда может поддерживать раздел FAQ, без потребности в использовании специализированного CMS решения.

Большое спасибо Крису Иварсону (Chris Ivarson) за дизайн иконки Google Docs, используемой в иллюстрации к этой статье.

Google Docs

Прежде чем начинать работу с разделом FAQ, нам сначала нужно создать новую таблицу Google Docs. Поскольку у вас уже, вероятно, есть аккаунт в Google (если нет, создайте его), мы сразу перейдём к делу.

В пустой таблице начинаем заполнять два столбца. Первый столбец должен содержать вопросы, а второй — ответы. Эти столбцы впоследствии и станут записями в вашем разделе FAQ. Каждый вопрос начинается с новой строки. Вы можете посмотреть то, что сделано для примера, здесь.

После этого, щёлкните на Share > Publish as webpage и выберите CSV из выпадающего меню. Это сгенерирует ссылку на вашу таблицу в форме стандартного CSV файла, который мы будем использовать позже.

HTML

Первый шаг в разработке скрипта — разметка. DIV #page — главный элемент-контейнер. Это единственный div с фиксированной шириной. Также он центрирован на странице, посредством margin:auto, как вы можете увидеть в разделе CSS этого урока.

faq.html

Таблица стилей включена в раздел head документа, а библиотека jQuery и наш script.js — в конец. Всё это мы будем подробно рассматривать в следующих разделах статьи.

#headingSection содержит h1 заголовок, и кнопку expand/collapse (развернуть/свернуть). После этого идёт div #faqSection, куда будут вставлены вопросы FAQ, после того, как jQuery считает содержимое вашей таблицы из Google Docs.

Записи FAQ организованы, как структура списка определений (eng. definition list — dl). Это один из наименее используемых HTML элементов, но он отлично подходит для нашей задачи. Вот как всё выглядит, после того, как jQuery добавляет его на страницу.

faq.html

Элемент dl заключает в dt каждый вопрос, а в dd — каждый ответ. Элементы dd скрыты с display:none, и показываются только с помощью анимации slideDown, как только нажат соответствующий dt.

CSS

Стили, (указанные в styles.css) довольно просты и понятны. Как говорилось выше, только #page div, который работает как главный контейнер, имеет фиксированную ширину. Он также центрирован на странице посредством значений auto для left и right margin.

styles.css – Часть 1

Мы используем один тег ссылки для кнопок сворачивания и разворачивания, назначая ему или CSS класс expand или collapse. Эти классы определяют, как смещается фоновое изображение. Высота самого фонового изображения в четыре раза больше высоты кнопки, т.к. оно содержит нормальное состояние и состояние hover для кнопок «свернуть» и «развернуть».

styles.css – Часть 2

Когда пользователь нажимает на заголовок определения (dt), соответствующий dd разворачивается (об этом говорится в следующем разделе). Вместе с тем, dt также назначается класс opened. Этот класс помогает jQuery определять, какой вопрос сейчас открыт, и в то же время затрагивает стиль маленького маркера слева от заголовка.

jQuery

Анимация — это, вероятно, самая интересная часть урока. Если вы следили за статьями на сайте tutorialzine.com, вы, возможно, обратили внимание, что YQL находит своё применение во множестве уроков. Главный довод в его пользу заключается в том, что YQL даёт возможность разработчикам использовать его, как прокси для широкого ряда API и осуществлять разнообразные функции в JavaScript.

Сегодня мы используем YQL, чтобы получить нашу таблицу Google, как CSV, и разобрать её, как это возможно с обычным JSON объектом. Такой образом мы получаем бесплатное и легко обновляемое хранилище данных для нашего простого приложения.

script.js

Возможно, это неясно из приведённого кода, но jQuery посылает JSONP запрос серверам YQL с помощью следующего YQL запроса:

CSV — это YQL таблица, которая извлекается с помощью URL csv-файла и список имён столбцов. В итоге возвращается JSON объект с именами столбцов в качестве его свойств. Затем скрипт фильтрует их (удаляя ненужные двойные кавычки) и вставляет их в список определений (DL) на странице.

На этом наш динамический раздел FAQ закончен!

Настройка

Чтобы использовать этот скрипт со своей таблицей, вам нужно только заменить переменную csvURL в script.js на CSV URL своей таблицы. Вы можете получить этот адрес из выпадающего списка Share > Publish as webpage > CSV. Кроме того, имейте в виду, что когда вы делаете изменения в таблице, может пройти несколько минут, пока эти изменения вступят в силу. Этот процесс можно ускорить, нажатием кнопки Republish now в этом же окне.

Выводы

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

Чтобы ваша информация учитывалась поисковиками, вы можете пойти различными путями. Можно использовать PHP или другой серверный язык, чтобы извлекать и отображать данные из YQL в определённой промежуток времени, скажем, каждые 30 минут (или даже ещё реже, если вы не планируете часто обновлять эти данные).

Не забудьте поделиться своими предложениями в комментариях