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

Рейтинг: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 комментариев  956 просмотров  дата: 31.01.2025  автор: admin  загрузок: 48
 
 
Советую взглянуть:
  • Уникальный вид материалов видео для uCoz
  • Медали для uCoz форума v.3.3
  • Закладки как на dle
  • Пользователи - Личная форма входа
  •  
     
    Всего комментариев: 0
    Добавлять комментарии могут только зарегистрированные пользователи.
    Регистрация | Вход

    Меню сайта

    Мини чат

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


    Опрос сайта

    Нравится ли вам дизайн нашего сайта?
    Всего ответов: 21

    Статистика

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

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