Каталог файлов

Рейтинг:4.0
Категория: Скрипты для Ucoz
 


Отличная форма поиска,для тех кто хочет разместить поиск над контентом своего сайта


Для начала нам следует установить основной js скрипт, который будет отвечать за подвижную форму писка на сайте, для этого вниз страницы перед закрывающим тегом устанавливаем js:

Код
<script type="text/javascript" src="http://center-dm.ru/ucoz/forma_poicka/v3/u_poisk.js"></script>

Установим HTML:
Теперь на страницу сайта следует поместить html каркас с формой поиска:

Код
<div class="poick_os p_top">  
  <form onsubmit="document.getElementById('sfSbm').disabled=true" method="get" action="/search/" >  
  <input class="poick_pole"type="text" name="q" maxlength="30" value="Поиск..." onclick="if (this.value=='Поиск...'){this.value='';}"/>  
  <input class="poick_knopka" type="submit" value="Найти" />  
  <input type="hidden" name="t" value="0" />
  </form>  
  </div>


Установим CSS:
Теперь пропишем следующие css стили:

CSS-Code

Код
/* Движущаяся форма поиска для uCoz  
------------------------------------------*/  
.poick_os,  
.content_os {  
  width: 440px;  
  margin: 0 auto;  
  padding: 15px 30px 15px 30px;  
}  

.p_bottom {  
  top: 0;  
  position:fixed;  
}  

.poick_os {  
  float:left;  
  background:#F3F3F3;  
  border-bottom: 1px solid #CAD1DB;  
}  

.poick_os input {  
  float:left;  
  margin:0px;  
  vertical-align:middle;  
  font:11px Verdana,Arial,Helvetica,sans-serif;  
}  

.poick_pole {  
  color:#555;  
  width:349px;  
  height:15px;  
  padding:5px 10px;  
  border: 1px solid #CAD1DB!important;  
  border-right:none!important;  

}  

.poick_pole:focus {  
  box-shadow:inset 0px 0px 3px #ccc!important;  
  -webkit-box-shadow:inset 0px 0px 3px #ccc!important;  
  -moz-box-shadow:inset 0px 0px 3px #ccc!important;  
}  

.poick_knopka {  
  width:70px;  
  height:27px;  
  cursor:pointer;  
  border:1px solid #d6982f!important;  
  color:#73450d!important; text-shadow:1px 1px 1px #fff7e5!important;  
  background: #febf4e!important;  
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fed76e), color-stop(1, #ffbd4b))!important;  
  background: -moz-linear-gradient(top, #fed76e 1%, #ffbd4b 100%)!important;  
  background: -o-linear-gradient(#fed76e, #ffbd4b)!important;  
}  

.poick_knopka:active {  
  box-shadow:inset 0px 0px 3px #bb8323!important;  
  -webkit-box-shadow:inset 0px 0px 3px #bb8323!important;  
  -moz-box-shadow:inset 0px 0px 3px #bb8323!important;  
}  

.poick_knopka:hover {  
  background:#fedc77!important;  
}

На этом всё, спасибо за внимание!
 
 
 
Источник: http://www.center-dm.ru
 
 0 комментариев  927 просмотров  дата: 20.05.2024  автор: admin  загрузок: 48
 
 
Советую взглянуть:
  • Пак графики для uCoz форума
  • Парочка интересных спойлеров
  • Сегодня нас посетило N человек для uCoz
  • Адаптация шаблона xBADA от Uc-new
  •  
     
    Всего комментариев: 0
    Добавлять комментарии могут только зарегистрированные пользователи.
    Регистрация | Вход

    Меню сайта

    Мини чат

    Последние комментарии


    Опрос сайта

    Какой дизайн лучше?
    Всего ответов: 9

    Статистика

    Кол-во зареганных: 2908 (+0)
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    Сейчас на сайте:

    Нас посетили: