В предыдущих статьях я упоминал о различных поисках в блоге, используя различные сервисы. Сам остановился на поиске от Яндекса, потому что он хорошо работает (но не всегда, как оказалось) и не запихивает никакой рекламы в результаты.
В этой статье я решил продвинуться в своих исследования по этому вопросу и копать в сторону связки Google Search Api + jQuery + Ajax. Звучит устрашающе? Это "взрослые" штуки: выводить результаты гуглопоиска на этой же странице, без перезагрузки.
Как оказалось, всё уже давно изобрели и рассмотрели. Превосходный мануал выложен на этом сайте. Вот его то мы и будем копать. Моё демо находится немного ниже.
Что это за поиск?
Это не просто поиск статей в блоге, возле поля ввода запроса можно заметить четыре опции:
-- обычный поиск материалов
-- поиск картинок
-- поиск видео
-- поиск новостей (последнее актуально для веб-поиска)
Результаты поиска отображаются чуть ниже и разделены кнопкой "Дальше".
В центре всего сабжа выделим скрипт script.js. В той статье по ссылке подробно разъяснено, как этот скрипт заимоидействует с гугловским поисковым api.
А вот мой вариант - script.js. Я заточил его под использование в блоге (выкинул лишнее). Чтобы поиск работал на другом сайте или блоге, нужно исправить url с моего на свой:
var config = {
siteURL : 'blogger.omg-linux.ru', // url блога
searchSite : true,
type : 'web',
append : false,
perPage : 8, // Максимум из того, что разрешено
page : 0 // Стартовая страница (?)
}
Стили для этого блока с поиском получились такие:
<style>
*{
margin:0;
padding:0;
}
#page{
/* The main container div */
width:620px;
margin:100px auto 0;
}
#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;
}
#searchInputContainer{
/* This div contains the transparent search box */
width:420px;
height:36px;
background:url("http://4.bp.blogspot.com/-z_dxhHY9UeE/Tq5dM12wH0I/AAAAAAAAGuc/aZSH9YBM54o/s1600/searchBox.png") no-repeat;
float:left;
margin-right:12px;
}
#s{
/* The search text box. */
border:none;
color:#888888;
background:url("http://4.bp.blogspot.com/-z_dxhHY9UeE/Tq5dM12wH0I/AAAAAAAAGuc/aZSH9YBM54o/s1600/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;
}
/* The UL that contains the search type icons */
.icons{
list-style:none;
margin:10px 0 0 335px;
height:19px;
position:relative;
}
.icons li{
background:url("http://4.bp.blogspot.com/-66luRRf-P_g/Tq5dMrDNiiI/AAAAAAAAGuQ/k9ZiESwXw3w/s1600/icons.png") no-repeat;
float:left;
height:19px;
text-indent:-9999px;
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('http://4.bp.blogspot.com/-Jn8cBCK1grE/Tq5dMVyevUI/AAAAAAAAGuE/JyacwjWvIUg/s1600/arrow.png') no-repeat;
left:0;
}
/* The submit button */
#submitButton{
background:url('http://1.bp.blogspot.com/-EQdJgWLz3qc/Tq5SY20Ro9I/AAAAAAAAGt4/0cZD_02ScHM/s1600/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;
}
/* The Search tutorialzine.com / Search the Web radio buttons */
#searchInContainer{
float:left;
margin-top:12px;
width:330px;
}
label{
color:#DDDDDD;
cursor:pointer;
font-size:11px;
position:relative;
right:-2px;
top:-2px;
margin-right:10px;
white-space:nowrap;
/*float:left;*/
}
input[type=radio]{
cursor:pointer;
/*float:left;*/
}
/* Styling the search results */
.pageContainer{
/* Holds each page with search results. Has an inset bottom border. */
border-bottom:1px solid #5e7481;
margin-bottom:50px;
/* Adding a dark bottom border with box shadow */
-moz-box-shadow:0 1px 0 #798e9c;
-webkit-box-shadow:0 1px 0 #798e9c;
box-shadow:0 1px 0 #798e9c;
}
p.notFound{
text-align:center;
padding:0 0 40px;
}
/* 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:gray;}
.webResult > a{ margin-left:20px;}
/* Image & video search results */
.imageResult{
float:left;
height:180px;
margin:0 0 20px 40px;
text-align:center;
width:152px;
overflow:hidden;
}
.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('http://1.bp.blogspot.com/-UVgvYFq-JvE/Tq5QGWFD-aI/AAAAAAAAGtg/baF-NfEG-wM/s1600/more.png') no-repeat;
cursor:pointer;
margin:40px auto;
}
#more:hover{
background-position:left bottom;
}
.clear{
clear:both;
}
</style>Возни с css было больше всего. Кнопки я "русифицировал" в джимпе и переложил на хостинг пикасы.Цвета различных элементов подгоняются тоже здесь. Вариант в файле.
html код:
<div id="page"> <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">Искать в блоге</label> <input type="radio" name="check" value="web" id="searchWeb" /> <label for="searchWeb">Искать в интернете</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>Код включает в себя радиокнопку web-поиска (см. ниже полный вариант демо).
Демо:
Можете попробовать разные запросы, типа: html, css, jquery, виджеты, яндекс и другие. Переключитесь в режим поиска картинок (видео и новостей у меня нет). Для возврата в статью просто обовите страницу в браузере.
Полная версия демо (включая web-поиск) находится на тестовом блоге.
И так, подведём итог.
Для установки такого поиска нужны:
1) Библиотека jQuery
2)
<link rel="stylesheet" type="text/css" href="http://ваш-хостинг.ру/styles.css" /> <script src="http://ваш-хостинг.ру/script.js"></script>3) И html код (см. выше), который нужно поставить непосредственно в то место, где нужен поиск.
О том, как устанавливаются и работают скрипты и стили, читайте здесь.
А у этой статьи есть продолжение!
Что ещё интересного?
Пользовательские поиски для блога.
Комментариев нет:
Отправить комментарий