samuray

Выбор типа поиска по сайту с запоминанием через локальное хр

penoky — Sat, 07 Mar 2015 06:28:51 GMT

Выбор типа поиска по сайту с запоминанием через локальное хранилище для uCoz

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

Установка:

В самый низ вашего css вставляйте:

Код

.searchSbmFl,.apomainsearch,.apomodulesearch {
display:none;
}

.queryField {
border: none;
margin-bottom: 5px;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-bottom: 1px solid #eee;
border-right: 1px solid #eee;
padding:3px
}

.apomainsearchok,.apomodulesearchok,.apomainsearchico,.apomodulesearchico {
height: 15px;
position: absolute;
margin-top: 2px;
margin-left: -17px;
}
.apomainsearchico,.apomodulesearchico {
margin-left:3px;
}

В вашем шаблоне найдите $SEARCH_FORM$ или $MODULE_SEARCH_FORM$ и замените на:

Код

$SEARCH_FORM$

$MODULE_SEARCH_FORM$

Как вы уже можете видеть, каждый элемент скрипта помечен комментарием, чтобы новичкам было удобно разбираться в том, какой участок за что отвечает — это поможет в написании своих кодов и модернизации данного скрипта

Три картинки из прикреплённого архива залейте в папку img

tags-zB11Выбор, типа, поиска, по, сайту, с, запоминанием, через, локальное, хр

Вывод случайного текста под полем поиска

penoky — Sat, 07 Mar 2015 06:25:03 GMT

Вывод случайного текста под полем поиска для uCoz

Скрипт, который выводит случайный текст под полем поиска. Скрипт, выбирает текст из набора из набора и, при клике по этому тексту, вставлять его в поле поиска...

Установка:

Замените $SEARCH_FORM$ на:

Код

$SEARCH_FORM$

Всё.

tags-zB11Вывод, случайного, текста, под, полем, поиска

Изменение размера поля поиска при клике

penoky — Sat, 07 Mar 2015 05:59:55 GMT

Изменение размера поля поиска при клике

С название материала все сразу становится понятно. В данной статье будет показано, как сделать растягивание поля поиска при клике на него. Вариант очень удобен, так как не требует javascript, jquery. То, что мы не будем их использовать это уменьшает нагрузку на наш сайт.

В месте где хотим видеть форму поиска вставляем:

Код

И в файл со стилями css добавляем:

Код

.search_block *{margin:0;padding:0;}
.search_block{position:relative;width:263px;display: inline-block;}
.search_block input[type="text"]{-moz-transition: all 0.4s linear; -o-transition: all 0.4s linear; -webkit-transition: all 0.4s linear;border-radius: 3px;padding: 6px 6px;display:inline-block;width: 110px;height:16px;outline:0;float:right;border: 1px solid #9e624d;}
.search_block input[type="text"]:focus{width: 220px;box-shadow:0 0 6px #07a4d1 ;border:1px solid #1cacd6;}
.search_block input[type="submit"]{border-radius:3px;outline:none;right: 6px;top:5px;float:right;position:absolute;width:20px;height:20px;border:0;background: url('http://webo4ka.ru/Ucoz8/Search-Find.png') center center no-repeat;}

Всё

tags-zB11Изменение, размера, поля, поиска, при, клике

Форма поиска по сайту

penoky — Sat, 07 Mar 2015 05:43:34 GMT

Форма поиска по сайту

Новый скрипт формы поиска для сайта в системе uCoz с возможностью выбора поиска по одному из ваших модулей.

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

Код

Всё
tags-zB11Форма, поиска, по, сайту

Поиск с выпадающим меню на CCS3

penoky — Sat, 07 Mar 2015 03:55:10 GMT

Поиск с выпадающим меню на CCS3

Сделать в форме поиска выпадающее меню с результатами или подсказками можно, используя только лишь CSS3. Поиск с выпадающим меню на CCS3 – это красивый и удобный пример оформления формы поиска. При фокусе на текстовом поле появляется блок со ссылками, ссылки могут быть подсказками, а могут быть результатами поиска. Еще можно использовать это выпадающее меню ссылок как выбор критерия поиска.

Протестировано в браузерах Firefox 4, Safari 4, Chrome 13, Opera 10, IE 8.

Код HTML

Код

Код CSS

Код

.search {
   position: relative;
   margin: 0 auto;
   width: 300px;
   }
   .search input {
   height: 26px;
   width: 100%;
   padding: 0 12px 0 25px;
   background: white url("search.png") 8px 6px no-repeat;
   border-width: 1px;
   border-style: solid;
   border-color: #a8acbc #babdcc #c0c3d2;
   border-radius: 13px;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-box-shadow: inset 0 1px #e5e7ed, 0 1px #fcfcfc;
   box-shadow: inset 0 1px #e5e7ed, 0 1px #fcfcfc;
   }
   .search input:focus {
   outline: none;
   border-color: #66b1ee;
   -webkit-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
   box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
   }
   .search input:focus + .results {
   display: block;
   }
   .search .results {
   display: none;
   position: absolute;
   top: 35px;
   left: 0;
   right: 0;
   z-index: 10;
   border-width: 1px;
   border-style: solid;
   border-color: #cbcfe2 #c8cee7 #c4c7d7;
   border-radius: 3px;
   background-color: #fdfdfd;
   background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdfdfd), color-stop(100%, #eceef4));
   background-image: -webkit-linear-gradient(top, #fdfdfd, #eceef4);
   background-image: -moz-linear-gradient(top, #fdfdfd, #eceef4);
   background-image: -ms-linear-gradient(top, #fdfdfd, #eceef4);
   background-image: -o-linear-gradient(top, #fdfdfd, #eceef4);
   background-image: linear-gradient(top, #fdfdfd, #eceef4);
   -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
   }
   .search .results li {
   display: block;
   }
   .search .results li:first-child {
   margin-top: -1px;
   }
   .search .results li:first-child:before, .search .results li:first-child:after {
   display: block;
   content: '';
   width: 0;
   height: 0;
   position: absolute;
   left: 50%;
   margin-left: -5px;
   border: 5px outset transparent;
   }
   .search .results li:first-child:before {
   border-bottom: 5px solid #c4c7d7;
   top: -11px;
   }
   .search .results li:first-child:after {
   border-bottom: 5px solid #fdfdfd;
   top: -10px;
   }
   .search .results li:first-child:hover:before, .search .results li:first-child:hover:after {
   display: none;
   }
   .search .results li:last-child {
   margin-bottom: -1px;
   }
   .search .results a {
   display: block;
   position: relative;
   margin: 0 -1px;
   padding: 6px 40px 6px 10px;
   color: #808394;
   font-weight: 500;
   text-shadow: 0 1px #fff;
   border: 1px solid transparent;
   border-radius: 3px;
   }
   .search .results a span {
   font-weight: 200;
   }
   .search .results a:before {
   content: '';
   width: 18px;
   height: 18px;
   position: absolute;
   top: 50%;
   right: 10px;
   margin-top: -9px;
   background: url("arrow.png") 0 0 no-repeat;
   }
   .search .results a:hover {
   text-decoration: none;
   color: #fff;
   text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
   border-color: #2380dd #2179d5 #1a60aa;
   background-color: #338cdf;
   background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #59aaf4), color-stop(100%, #338cdf));
   background-image: -webkit-linear-gradient(top, #59aaf4, #338cdf);
   background-image: -moz-linear-gradient(top, #59aaf4, #338cdf);
   background-image: -ms-linear-gradient(top, #59aaf4, #338cdf);
   background-image: -o-linear-gradient(top, #59aaf4, #338cdf);
   background-image: linear-gradient(top, #59aaf4, #338cdf);
   -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
   box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
   }

   :-moz-placeholder {
   color: #a7aabc;
   font-weight: 200;
   }

   ::-webkit-input-placeholder {
   color: #a7aabc;
   font-weight: 200;
   }

Всё!!!tags-zB11Поиск, с, выпадающим, меню, на, CCS3