Nk-CS.Ru: Все для вашего портала uCoz
Авторизация

Поиск по сайту с подсказками для сайтов uCoz

Поиск по сайту с подсказками для сайтов uCoz Всем доброго времени суток!

Многие держат свои сайты, добавляют на низ различные фишки и функционал. Это всё здорово, так как всё это сайту добавляет удобства для пользователей и обновляет в целом дизайн сайта самого.

В этом материале речь пойдёт о скрипте поиск по сайту , естественно поиск по сайту на сайтах uCoz имеется изначально, но вот они стандартны, а наш поиск будет выводить ниже список результатов поиска сравнивая с вашим запросом.

Этот поиск думаю подойдёт для сайтов таких тем как торрент или кино онлайн, так же можно использовать и под сайт с онлайн играми где множество материала и его часто ищут, в блога я думаю этот поиск а точнее его функция будет не уместна но это решать вам а я просто предоставлю пищу для переваривание.

Поиск с подсказками протестирован на моём тестовом сайте и даже я им сам когда то пользовался пока не перешёл на создание сайтов на DLE движке, но переход на DLE не мешает мне искать для себя и своего интереса различные дизайны для uCoz так как я с этого конструктора начинал и скорее всего он лично для меня и будет всегда лучшим и первым.

Для установки вам нужно скопировать ниже указанные коды и стили и установить на ваш сайт.

Этот код нужно размещать в то место на сайте где он вам нужен, но лучше всего в верхнюю часть сайта.
Код
<form onsubmit="search();return false;" method="post" action="/load/" id="searchform" class="andrnone">  
<input type="text" class="srch_fld" name="query" maxlength="100" style="width:520px;height:35px;" onblur="if(this.value =='') this.value='Введите часть названия, для более точного поиска...'" onfocus="if (this.value == 'Введите часть названия, для более точного поиска...') this.value=''" value="Введите часть названия, для более точного поиска..." id="querys">  
<input type="hidden" name="a" value="2"><input class="searchSbmFl" name="sfSbm" value="" type="submit" title="Найти"><div id="poisk2"></div></form>  
<script type="text/javascript" src="/js/search_fast.js"></script>

Далее в вид материалов каталога файлов нужно в самый низ установить этот код.
Код
<div style="display:none;"><div class="mat-title"><a href="$ENTRY_URL$" rel="nofollow"><img src="$IMG_URL1$" height="40px" width="30px" align="middle"> $TITLE$ </a></div></div>

Затем вставьте стили в нижнюю часть стилей вашего сайта.
Код
/*searchform*/  
#searchform {padding-bottom: 3px; height:40px; margin-left: 70px; display: inline-block;}  
#searchform input[type="text"]{ height:34px; width:400px !important; font-size:13px; padding:0px 0px 0px 15px; border-radius: 5px; margin:0px 0px 0px 0px; color:#DCDCDC; border:1px solid #223845; -webkit-box-shadow: inset 0px 1px 2px 2px rgba(0, 0, 0, 0.75), 0px 1px 0px 0px #2b2b2b; box-shadow: inset 0px 1px 1px 1px rgba(0, 0, 0, 0.75), 0px 1px 0px 0px #2b2b2b; background: #181818; background-image: -webkit-linear-gradient(left, #181818, #132532); background-image: -moz-linear-gradient(left, #181818, #132532); background-image: -ms-linear-gradient(left, #181818, #132532); background-image: -o-linear-gradient(left, #181818, #132532); background-image: linear-gradient(left, #181818, #132532); }  
#searchform input[type="submit"]{ background:url(http://kino-vor.ru/templates/kino-vor/dleimages/poisk.png) top right no-repeat; cursor:pointer; border:none; width:23px; margin:0px 0px 0px 0px; padding:0px 0px 6px 0px; transition:none; -moz-transition:none; -webkit-transition:none; -o-transition:none; }  
#searchform input[type="submit"]:hover {background-position:0px -25px;}  

#poisk2 a:hover {background: #A3C2DC;}  
#poisk2 a:last-child {border-bottom: 0px solid;}  

#poisk2 { border: 3px solid #eee; position: absolute; margin-left: 0px; margin-top: 10px; display: none; font-weight: bold; width: 536px; box-shadow: 3px 3px 3px #000, inset 3px 3px 3px rgba(0,0,0,.9); z-index: 100;}  
#poisk2::after { border-bottom: 8px solid transparent; border-left: 0px solid transparent; border-right: 8px solid #eee; border-top: 8px solid transparent; content: ""; left: 20px; position: absolute; top: -15px; transform: rotate(90deg); writing-mode: tb-rl;}  
#poisk2 span { color:#444 !important; background: #EEE; display: block; padding: 8px;}  
#poisk2 input { background: #263742 !important; color: #fff !important; font-weight:bold; border: 0px !important; cursor:pointer; border-radius:0 !important; padding: 2px !important; height: 30px; width: 100% !important; margin: 0px;}  
#poisk2 input:hover {background: #315974 !important;}  
#poisk2 a { border-bottom: 1px solid #DCDCDC; color:#000 !important; font-weight:bold; text-decoration:none; white-space: normal; background: #EEE; display:block; padding: 5px; height: auto;}

Скачать архив

По данной ссылке, Вы можете скачать или купить архив данного материала.


8.5
8 оценок
7.5
Дизайн:
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
10.0
Функционал:
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
9.0
Мобильность:
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
7.5
Общая оценка:
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
Читайте также
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Авторизация
лучший сайт где можно скачать шаблоны для dle 11.3 бесплатно