В этом уроке мы сделаем динамический раздел FAQ. Наш скрипт, с помощью jQuery & YQL, будет извлекать содержимое общедоступной электронной таблицы из вашего аккаунта Google Docs, и использовать эти данные, чтобы заполнить раздел FAQ вопросами и ответами. Здесь можно узнать больше о контекстной рекламе yandex
Большое спасибо Крису Иварсону (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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <div id="page"> <div id="headingSection"> <h1>Frequently Asked Questions</h1> <a class="button expand" href="#">Expand</a> </div> <div id="faqSection"> <!-- The FAQs are inserted here --> </div> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script src="script.js"></script> </body> </html> |
Таблица стилей включена в раздел head документа, а библиотека jQuery и наш script.js — в конец. Всё это мы будем подробно рассматривать в следующих разделах статьи.
#headingSection
содержит h1
заголовок, и кнопку expand/collapse (развернуть/свернуть). После этого идёт div #faqSection
, куда будут вставлены вопросы FAQ, после того, как jQuery считает содержимое вашей таблицы из Google Docs.
Записи FAQ организованы, как структура списка определений (eng. definition list — dl
). Это один из наименее используемых HTML элементов, но он отлично подходит для нашей задачи. Вот как всё выглядит, после того, как jQuery добавляет его на страницу.
faq.html
1 2 3 4 5 6 7 |
<dl> <dt><span class="icon"></span>How does this FAQ section work?</dt> <dd>With the help of jQuery and YQL, this script pulls the latest data ..</dd> <dt><span class="icon"></span>Can you modify it?</dt> <dd>This is the best part of it - you can change the contents ..</dd> </dl> |
Элемент dl
заключает в dt
каждый вопрос, а в dd
— каждый ответ. Элементы dd
скрыты с display:none
, и показываются только с помощью анимации slideDown
, как только нажат соответствующий dt
.
CSS
Стили, (указанные в styles.css) довольно просты и понятны. Как говорилось выше, только #page
div, который работает как главный контейнер, имеет фиксированную ширину. Он также центрирован на странице посредством значений auto
для left
и right margin
.
styles.css – Часть 1
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
#page{ width:753px; margin:50px auto; } #headingSection{ background-color:#7b8b98; padding:40px; padding-left:60px; position:relative; border:1px solid #8b9ba7; border-bottom:none; } #faqSection{ background:url('img/faq_bg.jpg') repeat-y #fff; padding:20px 90px 60px 60px; border:1px solid white; text-shadow:1px 1px 0 white; } h1{ color:#fff; font-size:36px; font-weight:normal; } /* Кнопка Развернуть/свернуть */ a.button{ background:url('img/buttons.png') no-repeat; width:80px; height:38px; position:absolute; right:50px; top:45px; text-indent:-9999px; overflow:hidden; border:none !important; } a.button.expand:hover{ background-position:0 -38px;} a.button.collapse{ background-position:0 -76px;} a.button.collapse:hover{ background-position:0 bottom;} |
Мы используем один тег ссылки для кнопок сворачивания и разворачивания, назначая ему или CSS класс expand
или collapse
. Эти классы определяют, как смещается фоновое изображение. Высота самого фонового изображения в четыре раза больше высоты кнопки, т.к. оно содержит нормальное состояние и состояние hover
для кнопок «свернуть» и «развернуть».
styles.css – Часть 2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
/* Definition Lists */ dt{ color:#8F9AA3; font-size:25px; margin-top:30px; padding-left:25px; position:relative; cursor:pointer; border:1px solid transparent; } dt:hover{ color:#5f6a73;} dt .icon{ background:url('img/bullets.png') no-repeat; height:12px; left:0; position:absolute; top:11px; width:12px; } dt.opened .icon{ background-position:left bottom;} dd{ font-size:14px; color:#717f89; line-height:1.5; padding:20px 0 0 25px; width:580px; display:none; } |
Когда пользователь нажимает на заголовок определения (dt
), соответствующий dd
разворачивается (об этом говорится в следующем разделе). Вместе с тем, dt
также назначается класс opened
. Этот класс помогает jQuery определять, какой вопрос сейчас открыт, и в то же время затрагивает стиль маленького маркера слева от заголовка.
jQuery
Анимация — это, вероятно, самая интересная часть урока. Если вы следили за статьями на сайте tutorialzine.com, вы, возможно, обратили внимание, что YQL находит своё применение во множестве уроков. Главный довод в его пользу заключается в том, что YQL даёт возможность разработчикам использовать его, как прокси для широкого ряда API и осуществлять разнообразные функции в JavaScript.
Сегодня мы используем YQL, чтобы получить нашу таблицу Google, как CSV, и разобрать её, как это возможно с обычным JSON объектом. Такой образом мы получаем бесплатное и легко обновляемое хранилище данных для нашего простого приложения.
script.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
$(document).ready(function(){ // URL вашей таблицы Google Docs в виде CSV: var csvURL = 'https://spreadsheets.google.com/pub?key='+ '0Ahe1-YRnPKQ_dEI0STVPX05NVTJuNENhVlhKZklNUlE&hl=en&output=csv'; // Адрес YQL: var yqlURL = "http://query.yahooapis.com/v1/public/yql?q="+ "select%20*%20from%20csv%20where%20url%3D'"+encodeURIComponent(csvURL)+ "'%20and%20columns%3D'question%2Canswer'&format=json&callback=?"; $.getJSON(yqlURL,function(msg){ var dl = $('<dl>'); // Цикл для всех записей в CSV файле: $.each(msg.query.results.row,function(){ // Иногда записи заключены в двойные кавычки. // Поэтому сначала мы избавляемся от кавычек методом замены: var answer = this.answer.replace(/""/g,'"').replace(/^"|"$/g,''); var question = this.question.replace(/""/g,'"').replace(/^"|"$/g,''); // Форматирование FAQ как списка определений: dt для вопросов // и dd для ответов. dl.append('<dt><span class="icon"></span>'+ question+'</dt><dd>'+answer+'</dd>'); }); // Добавление списка (DL): $('#faqSection').append(dl); $('dt').live('click',function(){ var dd = $(this).next(); // Если нажат заголовок, и dd сейчас не анимируется, // начинается анимация с помощью метода slideToggle(). if(!dd.is(':animated')){ dd.slideToggle(); $(this).toggleClass('opened'); } }); $('a.button').click(function(){ // Чтобы свернуть/развернуть все вопросы одновременно, // просто вызываем событие click на DT if($(this).hasClass('collapse')){ $('dt.opened').click(); } else $('dt:not(.opened)').click(); $(this).toggleClass('expand collapse'); return false; }); }); }); |
Возможно, это неясно из приведённого кода, но jQuery посылает JSONP запрос серверам YQL с помощью следующего YQL запроса:
1 2 3 |
SELECT * FROM csv WHERE url='https://spreadsheets.google.com/...' AND columns='question,answer' |
CSV — это YQL таблица, которая извлекается с помощью URL csv-файла и список имён столбцов. В итоге возвращается JSON объект с именами столбцов в качестве его свойств. Затем скрипт фильтрует их (удаляя ненужные двойные кавычки) и вставляет их в список определений (DL) на странице.
На этом наш динамический раздел FAQ закончен!
Настройка
Чтобы использовать этот скрипт со своей таблицей, вам нужно только заменить переменную csvURL
в script.js на CSV URL своей таблицы. Вы можете получить этот адрес из выпадающего списка Share > Publish as webpage > CSV. Кроме того, имейте в виду, что когда вы делаете изменения в таблице, может пройти несколько минут, пока эти изменения вступят в силу. Этот процесс можно ускорить, нажатием кнопки Republish now в этом же окне.
Выводы
Вы можете использовать эту технологию для различных видов динамических страниц. Однако, у неё действительно есть свои недостатки. Весь контент генерируется с помощью JavaScript, а это означает, что он не виден для поисковых систем.
Чтобы ваша информация учитывалась поисковиками, вы можете пойти различными путями. Можно использовать PHP или другой серверный язык, чтобы извлекать и отображать данные из YQL в определённой промежуток времени, скажем, каждые 30 минут (или даже ещё реже, если вы не планируете часто обновлять эти данные).
Не забудьте поделиться своими предложениями в комментариях
круто,только сильно нагружено с точки html + почему нельзя использовать стандартные селекторы для анимации ?
потому что стандартные селекторы отображаются не одинаково в разных браузерах