Rss
Site-Best.net Адаптация шаблона под uCoz manucoz
ПОДДЕРЖАТЬ ПРОЕКТ Prog-rami.3de.ru   Yandex.Money:4100115189866119
Ваш Ip адрес: 216.73.216.141

Название сайта!

Главная » Статьи » Всё для uCoz » Скрипты для ucoz

Движущаяся форма поиска для 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;  
}

На этом всё, спасибо за внимание!
Категория: Скрипты для ucoz | Добавил: Alexander218 (05.02.2013)
Просмотров: 286 | Рейтинг: 5.0/1
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Статистика
Top.Mail.Ru http://catcut.net/friend/39913
Block title
Block title
softucoz.com - ucoz шаблоны и скрипты, freestorrent.com - торрент трекер, softdle.com - всё для DataLife Engine, forwebz.com - всё для вебмастера
Сайт создан в системе uCoz