ساخت صفحه سوالات متداول

ساخت صفحه سوالات متداول

در این آموزش ما به شما نحوه ساخت صفحه سوالات متداول رو می دهیم.همانطور که میدانید در هر وبسایت تعدادی سوال وجود دارند که اکثر کاربران می خواهند تا پاسخ آنها را بدانند

برای مشاهده لینک وارد شود

در این آموزش ما به شما نحوه ساخت صفحه سوالات متداول رو می دهیم.همانطور که میدانید در هر وبسایت تعدادی سوال وجود دارند که اکثر کاربران می خواهند تا پاسخ آنها را بدانند مثل نحوه ی ثبت نام،نحوه ی خرید و هزاران سوال مثل اینها که مدیریت سایت برای اینکه کاربران را از پاسخ این سوالات آگاه سازد آنها را در صفحه سوالات متداول قرار می دهد تا کاربران با مراجعه به آن بتوانند جواب سوال خود را بیابند.

خوب مثل همیشه کار را با نوشتن کد های 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 قرار دایم.در زیر نحوه استفاده از آن را مشاهده می کنید.

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>

21

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

jQuery

کد jQuery را در زیر مشاهده می کنید که ما در آن از YQL استفاده کردیم.

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)+
            "'%۲۰and%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 با استفاده از JSON درخواستی به سرورYQL با استفاده از کوئری های YQL می کند.

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

 

+1
-1


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

در اردیبهشت سالی از سال های خدا بدنیا آمدم.درس خواندم و مهندس شدم.ازآنجایی که علاقه شدیدی به برنامه نویسی و ترجمه وآموزش داشتم در راستای اهدافم این وبسایت رو راه اندازی کردم تا دین خود را به جامعه برنامه نویسی ادا کرده باشم.

یک دیدگاه

  1. میشه نحوه استفاده از این کد را بگویید. چطوری از گوگل داک و yql استفاده کنم؟

دیدگاه خود را بنویسید

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


پنج − = 4

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>