ساخت اپیلیکیشن جست و جو در گوگل

ساخت اپیلیکیشن جست و جو در گوگل

همانطور که میدانید قابلیت جست و جو داخل هر سایت یکی از مزیت های انکار ناپذیر هر سایت است.در این آموزش ما به شما اپیلیکیشنی رو اموزش می دهیم که علاوه بر جست و جو مطلب مورد نظر در داخل سایت میتونید اون رو در گوگل نیز جست وجو کنید.از قابلیت های این برنامه امکان جست و جو فیلم و عکس و یا هر چیز دیگر به طور جداگانه می باشد.

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

خوب ما کار را مثل همیشه با نوشتن کد های HTML آغاز می کنیم که در آن استایل ها و هر آنچه را که لازم داشته باشیم وارد می کنیم.

search.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Google Powered Site Search | 8np Demo</title>

<link rel="stylesheet" type="text/css" href="styles.css" />

</head>
<body>

<div id="page">

    <h1>Google Powered Site Search</h1>

    <form id="searchForm" method="post">
        <fieldset>

            <input id="s" type="text" />

            <input type="submit" value="Submit" id="submitButton" />

            <div id="searchInContainer">
                <input type="radio" name="check" value="site" id="searchSite" checked />
                <label for="searchSite" id="siteNameLabel">Search</label>

                <input type="radio" name="check" value="web" id="searchWeb" />
                <label for="searchWeb">Search The Web</label>
            </div>

            <ul class="icons">
                <li class="web" title="Web Search" data-searchType="web">Web</li>
                <li class="images" title="Image Search" data-searchType="images">Images</li>
                <li class="news" title="News Search" data-searchType="news">News</li>
                <li class="videos" title="Video Search" data-searchType="video">Videos</li>
            </ul>

        </fieldset>
    </form>

    <div id="resultsDiv"></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>

همانطور که در کد بالا می بینید ما محلی برای وارد کردن متن،رنگ پس زمینه،تعدادی چک باکس(Radios) و تعدای آیکون که نمایش دهنده عکس،ویدئو و… است را وارد کردیم.

کلیه استایل ها در داخل style.css قرار دارند که به ترتیب برای شما خواهیم گفت.

styles.css – بخش ۱

#searchForm{
    /* The search form. */
    background-color:#4C5A65;
    padding:50px 50px 30px;
    margin:80px 0;
    position:relative;

    -moz-border-radius:16px;
    -webkit-border-radius:16px;
    border-radius:16px;
}

fieldset{
    border:none;
}

#s{
    /* The search text box. */

    border:none;
    color:#888888;
    background:url("img/searchBox.png") no-repeat;

    float:left;
    font-family:Arial,Helvetica,sans-serif;
    font-size:15px;
    height:36px;
    line-height:36px;
    margin-right:12px;
    outline:medium none;
    padding:0 0 0 35px;
    text-shadow:1px 1px 0 white;
    width:385px;
}

محل وارد کردن متن دارای پس زمینه و حاشیه نرم است البته نه به طوری که متن را ناپدید کند.

styles.css – بخش ۲

.icons{
    list-style:none;
    margin:10px 0 0 335px;
    height:19px;
    position:relative;
}

.icons li{
    background:url("img/icons.png") no-repeat;
    float:left;
    height:19px;
    text-indent:-999px;
    cursor:pointer;
    margin-right:5px;
}

/* Styling each icon */

li.web{ width:15px;}
li.web.active,
li.web:hover{ background-position:left bottom;}

li.images{ width:22px; background-position:-18px 0;}
li.images.active,
li.images:hover{ background-position:-18px bottom;}

li.news{ width:14px; background-position:-44px 0;}
li.news.active,
li.news:hover{ background-position:-44px bottom;}

li.videos{ width:17px; background-position:right 0;}
li.videos.active,
li.videos:hover{ background-position:right bottom;}

span.arrow{
    /* The little arrow that moves below the icons */

    width:11px;
    height:6px;
    margin:21px 0 0 5px;
    position:absolute;
    background:url('img/arrow.png') no-repeat;
    left:0;
}

/* The submit button */

#submitButton{
    background:url('img/buttons.png') no-repeat;
    width:83px;
    height:36px;
    text-indent:-9999px;
    overflow:hidden;
    text-transform:uppercase;
    border:none;
    cursor:pointer;
}

#submitButton:hover{
    background-position:left bottom;
}

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

styles.css –بخش ۳

/* Web & news results */

.webResult{ text-shadow:1px 1px 0 #586a75;margin-bottom:50px;}
.webResult h2{
    background-color:#5D6F7B;
    font-size:18px;
    font-weight:normal;
    padding:8px 20px;

    /* Applying CSS3 rounded corners */
    -moz-border-radius:18px;
    -webkit-border-radius:18px;
    border-radius:18px;
}
.webResult h2 b{ color:#fff; }
.webResult h2 a{ color:#eee;border:none;}
.webResult p{ line-height:1.5;padding:15px 20px;}
.webResult p b{ color:white;}
.webResult > a{ margin-left:20px;}

/* Image & video search results */

.imageResult{
    float:left;
    height:170px;
    margin:0 0 20px 40px;
    text-align:center;
    width:150px;
}
.imageResult img{ display:block;border:none;}
.imageResult a.pic{
    border:1px solid #fff;
    outline:1px solid #777;
    display:block;
    margin:0 auto 15px;
}

/* The show more button */

#more{
    width:83px;
    height:24px;
    background:url('img/more.png') no-repeat;
    cursor:pointer;
    margin:40px auto;
}

#more:hover{
    background-position:left bottom;
}

لازم به ذکر است که بدانید این برنامه از  Google’s AJAX Search API استفاده می کند.قبل از اینکه ما شروع به بحث در مورد کد های jQuery بکنیم نگاه اجمالی به امکاناتی که این API در اختیار ما قرار می دهد می اندازیم.

نتیجه یک نمونه از Google’s API

{
    "GsearchResultClass": "GwebSearch",
    "unescapedUrl": "http://tutorialzine.com/2010/02/html5-css3-website-template/",
    "url": "http://tutorialzine.com/2010/02/html5-css3-website-template/",
    "visibleUrl": "tutorialzine.com",
    "cacheUrl": "http://www.google.com/search?q=cache:_NSLxH-cQMAJ:tutorialzine.com",
    "title": "Coding a CSS3 & HTML5 One-Page Website Template | Tutorialzine",
    "titleNoFormatting": "Coding a CSS3 & HTML5 One-Page Website Template | Tutorialzine",
    "content": "Feb 16, 2010 ... Here we are using the new version of HTML.."
}

​ما از خاصیت GsearchResultClass استفاده می کنیم تا نحوه نمایش اطلاعات را مشخص کنیم.این برنامه فقط قابلیت جست و جو اخبار،تصاویر،ویدئو و وبسایت را دارد.شما میتونید لیست کامل انواع جست و جو را در  Google’s AJAX search documentation  مشاهده کنید.

script.js – بخش۱

$(document).ready(function(){

    var config = {
        siteURL		: 'tutorialzine.com',	// Change this to your site
        searchSite	: true,
        type		: 'web',
        append		: false,
        perPage		: ۸,			// A maximum of 8 is allowed by Google
        page		: ۰				// The start page
    }

    // The small arrow that marks the active search icon:
    var arrow = $('',{className:'arrow'}).appendTo('ul.icons');

    $('ul.icons li').click(function(){
        var el = $(this);

        if(el.hasClass('active')){
            // The icon is already active, exit
            return false;
        }

        el.siblings().removeClass('active');
        el.addClass('active');

        // Move the arrow below this icon
        arrow.stop().animate({
            left		: el.position().left,
            marginLeft	: (el.width()/2)-4
        });

        // Set the search type
        config.type = el.attr('data-searchType');
        $('#more').fadeOut();
    });

    // Adding the site domain as a label for the first radio button:
    $('#siteNameLabel').append(' '+config.siteURL);

    // Marking the Search tutorialzine.com radio as active:
    $('#searchSite').click();	

    // Marking the web search icon as active:
    $('li.web').click();

    // Focusing the input text box:
    $('#s').focus();

    $('#searchForm').submit(function(){
        googleSearch();
        return false;
    });

    $('#searchSite,#searchWeb').change(function(){
        // Listening for a click on one of the radio buttons.
        // config.searchSite is either true or false.

        config.searchSite = this.id == 'searchSite';
    });

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

script.js – بخش ۲​

 function googleSearch(settings){

        // If no parameters are supplied to the function,
        // it takes its defaults from the config object above:

        settings = $.extend({},config,settings);
        settings.term = settings.term || $('#s').val();

        if(settings.searchSite){
            // Using the Google site:example.com to limit the search to a
            // specific domain:
            settings.term = 'site:'+settings.siteURL+' '+settings.term;
        }

        // URL of Google's AJAX search API
        var apiURL = 'http://ajax.googleapis.com/ajax/services/search/'+settings.type+
                        '?v=1.0&callback=?';
        var resultsDiv = $('#resultsDiv');

        $.getJSON(apiURL,{
            q	: settings.term,
            rsz	: settings.perPage,
            start	: settings.page*settings.perPage
        },function(r){

            var results = r.responseData.results;
            $('#more').remove();

            if(results.length){

                // If results were returned, add them to a pageContainer div,
                // after which append them to the #resultsDiv:

                var pageContainer = $('<div>',{className:'pageContainer'});

                for(var i=0;i<results.length;i++){
                    // Creating a new result object and firing its toString method:
                    pageContainer.append(new result(results[i]) + '');
                }

                if(!settings.append){
                    // This is executed when running a new search,
                    // instead of clicking on the More button:
                    resultsDiv.empty();
                }

                pageContainer.append('<div class="clear"></div>')
                             .hide().appendTo(resultsDiv)
                             .fadeIn('slow');

                var cursor = r.responseData.cursor;

                // Checking if there are more pages with results,
                // and deciding whether to show the More button:

                if( +cursor.estimatedResultCount > (settings.page+1)*settings.perPage){
                    $('<div>',{id:'more'}).appendTo(resultsDiv).click(function(){
                        googleSearch({append:true,page:settings.page+1});
                        $(this).fadeOut();
                    });
                }
            }
            else {

                // No results were found for this search.

                resultsDiv.empty();
                $('<p>',{
                    className	: 'notFound',
                    html		: 'No Results Were Found!'
                }).hide().appendTo(resultsDiv).fadeIn();
            }
        });
    }

تابع ()googleSearch درخواست JSONp را به  Google’s API ارسال می کند و سپس  بعد از تایید نتایج آنها را داخل تگ  #resultsDiv r

قرار می دهد.این تگ قبل از آن خالی بوده است.

script.js – بخش ۳

function result(r){

        // This is class definition. Object of this class are created for
        // each result. The markup is generated by the .toString() method.

        var arr = [];

        // GsearchResultClass is passed by the google API
        switch(r.GsearchResultClass){

            case 'GwebSearch':
                arr = [
                    '<div class="webResult">',
                    '<h2><a href="',r.url,'">',r.title,'</a></h2>',
                    '<p>',r.content,'</p>',
                    '<a href="',r.url,'">',r.visibleUrl,'</a>',
                    '</div>'
                ];
            break;
            case 'GimageSearch':
                arr = [
                    '<div class="imageResult">',
                    '<a href="',r.url,'" title="',r.titleNoFormatting,
                    '" class="pic" style="width:',r.tbWidth,'px;height:',r.tbHeight,'px;">',
                    '<img src="',r.tbUrl,'" width="',r.tbWidth,'" height="',
                    r.tbHeight,'" /></a>','<div class="clear"></div>',
                    '<a href="',r.originalContextUrl,'">',r.visibleUrl,'</a>',
                    '</div>'
                ];
            break;
            case 'GvideoSearch':
                arr = [
                    '<div class="imageResult">',
                    '<a href="',r.url,'" title="',r.titleNoFormatting,'
                    " class="pic" style="width:150px;height:auto;">',
                    '<img src="',r.tbUrl,'" width="100%" /></a>',
                    '<div class="clear"></div>','<a href="',
                    r.originalContextUrl,'">',r.publisher,'</a>',
                    '</div>'
                ];
            break;
            case 'GnewsSearch':
                arr = [
                    '<div class="webResult">',
                    '<h2><a href="',r.unescapedUrl,'">',r.title,'</a></h2>',
                    '<p>',r.content,'</p>',
                    '<a href="',r.unescapedUrl,'">',r.publisher,'</a>',
                    '</div>'
                ];
            break;
        }

        // The toString method.
        this.toString = function(){
            return arr.join('');
        }
    }
});

این تابع به عنوان ایجاد کننده کلاس result عمل می کند.این اشیایی را که  Google’s API  برگردانده شده است را دریافت می کند و با توجه به GsearchResultClass  ارایه را مقدار دهی اولیه می کند.

پایان

+2
0


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

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

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

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

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

*


پنج × = 35

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>