JavaScript >> Javascript 文檔 >  >> Tags >> CSS

帶有 jQuery、YQL 和 Google Docs 的動態常見問題解答部分

在本教程中,我們正在製作一個動態的常見問題解答部分。該腳本在 jQuery 和 YQL 的幫助下,將在您的 Google 文檔帳戶中提取共享電子表格的內容,並使用這些數據在 FAQ 部分填充問題和答案。

此解決方案的最佳方面是您可以從 Google 文檔中更改常見問題解答部分的內容 - 只需編輯電子表格。您甚至可以利用 Google Docs 的其他功能,例如協作編輯。這樣,一個小團隊就可以支持常見問題解答部分,而無需專門的 CMS 解決方案。

感謝 Chris Ivarson 設計了 Google Docs 圖標,用於本教程的特色插圖。

谷歌文檔

在開始 FAQ 部分的工作之前,我們首先需要創建一個新的 Google Docs 電子表格。由於您可能已經擁有 Google 帳戶(如果沒有,請創建一個),我們將直接進入有趣的部分。

在空白電子表格中,開始填寫兩列數據。第一列應包含問題,第二列應包含答案,它們將成為您的常見問題部分中的條目。每個常見問題解答都在單獨的一行中。你可以在這裡看到我創建的那個。

之後,點擊 分享> 發佈為網頁 並從下拉列表中選擇 CSV。這將以常規 CSV 文件的形式生成指向您的電子表格的鏈接,我們稍後將使用該鏈接。

HTML

開發腳本的第一步是標記。 #page div 是主要的容器元素。它是唯一具有明確寬度的 div。它也在頁面中間居中,帶有邊距:自動,正如您將在 tut 的 CSS 部分中看到的那樣。

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>

樣式表包含在文檔的頭部,jQuery 庫和我們的 script.js 包含在底部。所有這些都將在本教程的下一部分中詳細討論。

#headingSection 包含 h1 標題和展開/折疊按鈕。之後是 #faqSection div,在 jQuery 獲取您的 Google Docs 電子表格的內容後插入 FAQ 條目。

FAQ 條目被組織成一個定義列表結構 (dl )。這是使用最少的 HTML 元素之一,但非常適合我們的任務。這是 jQuery 將其添加到頁面後的外觀。

faq.html

<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 被明確分配了一個寬度。它也位於頁面中間,左右邊距為自動值。

styles.css - 第 1 部分

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

我們為展開和折疊按鈕使用單個錨標記,方法是為它分配 expand折疊 CSS 類。這些類確定背景圖像的哪些部分偏移到視圖中。背景圖片本身是按鈕高度的四倍,並且包含展開和折疊按鈕版本的正常和懸停狀態。

styles.css - 第 2 部分

/* 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 確定打開了哪些 FAQ,同時影響標題左側小項目符號的樣式。

jQuery

轉到可能是本教程中最有趣的部分。如果您一直在關注此站點上的教程,您可能已經註意到 YQL 在此處的許多教程中都有使用。這背後的主要原因是,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 使用以下 YQL 查詢向 YQL 的服務器發送 JSONP 請求:

SELECT * FROM csv
WHERE url='https://spreadsheets.google.com/...'
AND columns='question,answer'

CSV 是一個 YQL 表,它採用 csv 文件的 URL 和列名列表。它返回一個以列名作為其屬性的 JSON 對象。然後腳本過濾它們(去掉不必要的雙引號)並將它們作為定義列表(DL)插入到頁面中。

到此,我們的動態常見問題解答部分就完成了!

定制

要將此腳本與您自己的電子表格一起使用,您只需編輯 script.js 中的 csvURL 變量 ,並將其替換為電子表格的 CSV URL。您可以從 分享> 發佈為網頁> CSV 下拉菜單中獲取此地址 .此外,請注意,當您對電子表格進行更改時,更改可能需要幾分鐘才能生效。您可以通過單擊立即重新發布來加快速度 按鈕,在同一個覆蓋窗口中找到。

結束語

您可以使用相同的技術來支持不同類型的動態頁面。但是,這種實現方式確實有其缺點。所有內容都是用 JavaScript 生成的,這意味著它不會被搜索引擎看到。

為保證您的數據會被抓取,您可以採取不同的路線。您可以使用 PHP 或其他後端語言在固定的時間間隔內從 YQL 獲取和顯示數據 - 比如說 30 分鐘(如果您不打算經常更新數據,甚至可以更低頻率)。

請務必在下面的評論部分分享您的建議。


Tutorial JavaScript 教程
  1. 使用 Chart.js 數據庫中的數據實時更新圖表

  2. 成為 A11y 倡導者!為包容性互聯網而戰(第 2 部分)

  3. Vuelidate 無法在程序上生成表單驗證

  4. 在 ASP.Net Core 5 MVC 控制器中,當傳遞一個包含小數的 JSON 對象 FromBody 時,模型始終為空

  5. #2) 用 Ja​​vaScript 解釋提升❓

  6. `composed:true` 被認為是有害的?

  7. 對代碼的信念

  1. 迷失在 SPA(ce) 中:幫助屏幕閱讀器瀏覽 React 應用程序

  2. 使用 React、NodeJS 和 Common Ninja 啟動您的第一個 Shopify 應用程序

  3. 使用 vanilla JavaScript 創建一個自動完成文本框

  4. Firebase 函數無法獲取從 Angular9 中的簡單聯繫表單發送的請求值

  5. 了解 JavaScript 中引用和值之間的區別

  6. Express Validator - 做簡單的 if 檢查來決定驗證什麼

  7. 從一開始就對 Node.js / Express 應用程序進行 Dockerizing [第 1 部分]

  1. Firebase Google 使用 React 登錄

  2. 使用 Console.X 變得超級高效

  3. REST API 教程 – REST 客戶端、REST 服務和 API 調用通過代碼示例進行解釋

  4. React Hooks vs Svelte - 為什麼我選擇 Svelte?