Новые уроки
Получай новые уроки по RSS

Подписка на рассылку


Голосование
Чего выкладывать больше?
Программ
Уроков
Скриптов
Шаблонов
Макетов
CMS
Видеоуроков
Облако тегов

Jquery → Динамические FAQ разделы

Динамические FAQ разделы


Демо: смотреть
Скачать: faq.zip [8,44 Kb] (cкачиваний: 150)


В этом уроке, мы делаем динамические раздел FAQ. Скрипт, работает с помощью JQuery & YQL , будет брать содержание с общей таблицы в Документах Google , и использовать данные для заполнения раздела FAQ с вопросами и ответами.

Лучший аспект этого решения является то, что вы можете изменить содержимое раздела FAQ изнутри Google Docs - просто изменив таблицу. Небольшая группа может поддерживать раздел часто задаваемых вопросов без необходимости специализированного CMS решения.

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

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

После этого нажмем кнопку "Экспорт"> Опубликовать как веб-страницу и выберите CSV из выпадающего списка. Это создаст ссылку в таблицу в виде обычного файла CSV, который мы будем использовать в дальнейшем.

HTML

Первым шагом в разработке сценария мы сделаем html разметку.

faq.html
<!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>


Вопросы и ответы организованы при помощи списка (DL). Это один из наименее используемых элементов HTML, но идеально подходит для нашей задачи. Вот как это выглядит когда JQuery плагин добавляет записи к странице.
<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>

Динамические FAQ разделы

The CSS
styles.css

#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;
}

/* The expand / collapse button */

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;}
/* 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;
}


У нас готовы выпадающие вопросы. Они будут выглядеть вот так:
Динамические FAQ разделы


JQuery
Перемещение, вероятно, самая интересная часть урока. YQL позволяет разработчикам использовать его в качестве прокси для широкого спектра API, и осуществлять разнообразные функции полностью на javascript.

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

script.js
$(document).ready(function(){

    // The published URL of your Google Docs spreadsheet as CSV:
    var csvURL = 'https://spreadsheets.google.com/pub?key='+
            '0Ahe1-YRnPKQ_dEI0STVPX05NVTJuNENhVlhKZklNUlE&hl=en&output=csv';

    // The YQL address:
    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>');

        // Looping through all the entries in the CSV file:
        $.each(msg.query.results.row,function(){

            // Sometimes the entries are surrounded by double quotes. This is why
            // we strip them first with the replace method:

            var answer = this.answer.replace(/""/g,'"').replace(/^"|"$/g,'');
            var question = this.question.replace(/""/g,'"').replace(/^"|"$/g,'');

            // Formatting the FAQ as a definition list: dt for the question
            // and a dd for the answer.

            dl.append('<dt><span class="icon"></span>'+
            question+'</dt><dd>'+answer+'</dd>');
        });

        // Appending the definition list:
        $('#faqSection').append(dl);

        $('dt').live('click',function(){
            var dd = $(this).next();

            // If the title is clicked and the dd is not currently animated,
            // start an animation with the slideToggle() method.

            if(!dd.is(':animated')){
                dd.slideToggle();
                $(this).toggleClass('opened');
            }

        });

        $('a.button').click(function(){

            // To expand/collapse all of the FAQs simultaneously,
            // just trigger the click event on the DTs

            if($(this).hasClass('collapse')){
                $('dt.opened').click();
            }
            else $('dt:not(.opened)').click();

            $(this).toggleClass('expand collapse');

            return false;
        });

    });
});


Из кода выше мы не можем увидеть запрос, но JQuery посылает запрос на серверы JSONP YQL в следующем виде:
SELECT * FROM csv
WHERE url='https://spreadsheets.google.com/...'
AND columns='question,answer'


Настройка
Чтобы использовать этот сценарий с вашими собственными таблицами, вам нужно всего лишь изменить csvURL адресс в переменной в script.js. Вы можете получить этот адрес из "Экспорт"> Опубликовать как веб-страницы CSV выпадающего>.

Динамические FAQ разделы


Вот и всё ;)
Опубликовал dimas_ua, 28-03-2011, 00:00 Комментариев: 0
 (голосов: 0)