CabinetAdmin » Сегодня, 11:42 писал(а):<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
...
<!-- ENDIF -->
Выдвижная форма поиска для phpBB.
В спокойном состоянии наша форма находится в свёрнутом состоянии, при нажатии по иконке поиска строка раздвигается и отображает форму, куда вы можете ввести запрос.
Цель данного руководства заключается в том, чтобы предоставить максимальную совместимость с устаревшими браузерами и мобильными устройствами. Несмотря на то, что эффект кажется невероятно простым, нам придется применить несколько хитрых трюков, чтобы все работало как надо.
Небольшой план того, что у нас должно получиться:
Для установки на форум phpBB, достаточно найти вашу форму поиска, всё то что находится между:
И заменить на:
Теперь очередь стилизации.
Исходя из нашего плана, сначала нам нужно, чтобы видимой была только иконка поиска, остальное должно быть скрыто.
Наша форма поиска будет выровнена по правому краю, выставляем для первого элемента, это
Всё что находится за пределами будет скрыто.
Далее:
Последние четыре элемента, это цвет текста, который находится по умолчанию при открытии поля ввода. Для каждого браузера свой префикс, если хотите поменять цвет, то менять нужно во всех четырёх.
Далее, так как кнопка с иконкой и кнопка подтверждения находятся в одном месте, и по сути являются одной кнопкой. Чтобы по кнопке с иконкой можно было кликнуть, когда мы хотим открыть форму ввода запроса, нам нужно, чтобы по форме ввода также можно было кликнуть. Т.е. кнопки будут лежать друг поверх друга, мы зададим им абсолютное позиционирование, мы выставляем z-index для кнопки подтверждения запроса на -1 в самом начале и делаем ее прозрачной:
Наша иконка находится здесь -
Теперь осталось только добавить скрипты. Как и многие скрипты, перед закрывающим тегом
Пример использования можно посмотреть на нашем форуме.
Скачать архив с оригинальными файлами автора проекта можно здесь:
[hide]ExpandingSearchBar.zip[/hide]
Скачать вариант от кабинета админа:
В спокойном состоянии наша форма находится в свёрнутом состоянии, при нажатии по иконке поиска строка раздвигается и отображает форму, куда вы можете ввести запрос.
Цель данного руководства заключается в том, чтобы предоставить максимальную совместимость с устаревшими браузерами и мобильными устройствами. Несмотря на то, что эффект кажется невероятно простым, нам придется применить несколько хитрых трюков, чтобы все работало как надо.
Небольшой план того, что у нас должно получиться:
- Сначала нужно чтобы показывалась только кнопка с иконкой поиска.
- При нажатии по иконке, нам нужно чтобы появлялась форма поиска.
- Этот компонент должен быть гибким, чтобы мы могли использовать его в адаптивных шаблонах.
- После ввода запроса, нам нужно, чтобы начать поиск можно было после клика по иконке, либо нажатием Enter.
- Если же форма остается пустой, то чтобы закрыть её, достаточно ещё раз кликнуть по иконке.
- Также нам нужно, чтобы если мы кликнем в любом месте страницы, за пределами поиска, то форма поиска тоже закрывалась.
- Если у пользователя отключена поддержка JavaScript, то форма поиска была закрыта.
- Чтобы была поддержка сенсорных устройств, нужно добавить поддержку touch-событий.
Для установки на форум phpBB, достаточно найти вашу форму поиска, всё то что находится между:
Код: Выделить всё
<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
...
<!-- ENDIF -->
Код: Выделить всё
<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
<div id="sb-search" class="sb-search">
<form action="{U_SEARCH}" method="post">
<input name="keywords" class="sb-search-input" placeholder="{L_SEARCH_KEYWORDS}" type="search" value="" id="search">
<input class="sb-search-submit" type="submit" value="">
<span class="sb-icon-search"></span>
</form>
</div>
<!-- ENDIF -->
<script type="text/javascript">new UISearch( document.getElementById('sb-search') );</script>
Теперь очередь стилизации.
Исходя из нашего плана, сначала нам нужно, чтобы видимой была только иконка поиска, остальное должно быть скрыто.
Наша форма поиска будет выровнена по правому краю, выставляем для первого элемента, это
sb-search
, свойство overflow
на hidden
. Это поможет нам скрыть скрыть форму ввода, когда поиск находится в закрытом состоянии. Ширина должна составлять 60px и так как мы хотим анимировать ширину до 100%, могут возникнуть проблемы с мобильными браузерами. Они не любят переход соотношение с px
на %
. Поэтому мы задаём минимальную ширину в 60px (min-width: 60px;
), а ширину в 0% (width: 0%;
):
Код: Выделить всё
.sb-search {
position: relative;
margin-top: 10px;
width: 0%;
min-width: 60px;
height: 60px;
float: right;
overflow: hidden;
-webkit-transition: width 0.3s;
-moz-transition: width 0.3s;
transition: width 0.3s;
-webkit-backface-visibility: hidden;
}
transition: width 0.3s;
- скорость раскрытия и закрытия поля ввода, чем выше число, тем медленнее.-webkit-backface-visibility: hidden;
- небольшая плюшка для для мобильных браузеров (iOS). Чтобы избежать кривости для поля ввода поиска.Далее:
Код: Выделить всё
.sb-search-input {
position: absolute;
top: 0;
right: 0;
border: none;
outline: none;
background: #fff;
width: 100%;
height: 60px;
margin: 0;
z-index: 10;
padding: 20px 65px 20px 20px;
font-family: inherit;
font-size: 20px;
color: #2c3e50;
}
input[type="search"].sb-search-input {
-webkit-appearance: none;
-webkit-border-radius: 0px;
}
.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;
}
Далее, так как кнопка с иконкой и кнопка подтверждения находятся в одном месте, и по сути являются одной кнопкой. Чтобы по кнопке с иконкой можно было кликнуть, когда мы хотим открыть форму ввода запроса, нам нужно, чтобы по форме ввода также можно было кликнуть. Т.е. кнопки будут лежать друг поверх друга, мы зададим им абсолютное позиционирование, мы выставляем z-index для кнопки подтверждения запроса на -1 в самом начале и делаем ее прозрачной:
Код: Выделить всё
.sb-icon-search,
.sb-search-submit {
width: 60px;
height: 60px;
display: block;
position: absolute;
right: 0;
top: 0;
padding: 0;
margin: 0;
line-height: 60px;
text-align: center;
cursor: pointer;
}
.sb-search-submit {
background: #fff; /* IE needs this */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */
filter: alpha(opacity=0); /* IE 5-7 */
opacity: 0;
color: transparent;
border: none;
outline: none;
z-index: -1;
}
.sb-icon-search {
background: url("Иконка поиска") no-repeat 50% 50% #e67e22;
z-index: 90;
}
.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: url("Иконка поиска") no-repeat 50% 50% #da6d0d;
z-index: 11;
}
.sb-search.sb-search-open .sb-search-submit,
.no-js .sb-search .sb-search-submit {
z-index: 90;
}
.sb-icon-search {
- когда поле находится в закрытом состоянии. В открытом же состоянии здесь - .sb-search.sb-search-open .sb-icon-search, .no-js .sb-search .sb-icon-search {
и при желании её можно поставить другую.Теперь осталось только добавить скрипты. Как и многие скрипты, перед закрывающим тегом
</head>
ставим:
Код: Выделить всё
<script src="путь до файла/classie.js" type="text/javascript"></script>
<script src="путь до файла/uisearch.js" type="text/javascript"></script>
Пример использования можно посмотреть на нашем форуме.
Скачать архив с оригинальными файлами автора проекта можно здесь:
[hide]ExpandingSearchBar.zip[/hide]
Скачать вариант от кабинета админа:
Комментарии: 12
Я так понимаю, что я могу вставить не чмстый код быстрого поиска, а уже переделанный вами в первом вашем сообщении, этот код:
В любое место оверал хидер? а не подскажите как его поставить сверху иконки "ГАЗ ЧАТ" я думаю так будет ему самое мместо
Код: Выделить всё
<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
<div id="sb-search" class="sb-search">
<form action="{U_SEARCH}" method="post">
<input name="keywords" class="sb-search-input" placeholder="{L_SEARCH_KEYWORDS}" type="search" value="" id="search">
<input class="sb-search-submit" type="submit" value="">
<span class="sb-icon-search"></span>
</form>
</div>
<!-- ENDIF -->
<script type="text/javascript">new UISearch( document.getElementById('sb-search') );</script>
Есть немного, кнопка уезжает когда открывается поле поиска. В принципе её можно сделать чуть выше, сразу после меню, например, ну и цвет по желанию под стиль форума. Можно заключить кнопку и поиск в таблицу чтобы ничего никуда не съезжало.
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
- VirtorVir
- Сообщения: 3
- Зарегистрирован: 13 сен 2013, 09:40
- Пол: Муж
Форум со стилем subsilver2. Никак не могу толково прикрутить на него эту форму поиска. Не могли бы вы более подробно описать:что куда прописывать и вставлять.
VirtorVir
Если вы хотите поставить поиск в какой-то определённый участок, то тут нужно смотреть стиль, допиливать если придётся, менять цвета под дизайн, если требуется.
А так всё по инструкции, css добавляете в файл вашего стиля, html со структурой поиска в любое место, скорее всего куда нибудь в
Если вы хотите поставить поиск в какой-то определённый участок, то тут нужно смотреть стиль, допиливать если придётся, менять цвета под дизайн, если требуется.
А так всё по инструкции, css добавляете в файл вашего стиля, html со структурой поиска в любое место, скорее всего куда нибудь в
overall_header.html
, чтобы поиск был вверху форума или в overall_footer.html
, если хотите увидеть поиск в нижней его части.Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
Похожие темы
-
После обновления старого PHPBB форума
с версии 2 до версии 3.3.10 в меню форума появился link The team , при открытии которого выдает 404 ошибку... -
Все привет, с Новым 2023 годом, здоровья и успехов во всем.
Ребят, такой вопрос, нужно было сделать форум, не стал делать чистую установку, просто... -
darkmode,расширение которое переключает светлый,темный режим форума.
Расширение работает и для гостей и имеет переключатель в navbar .
Недостатки:... -
Добрый вечер.
Появилась необходимость запретить показ рекламы от гугл адсенс на некоторых страницах форума. Там есть такая функция как исключить... -
Расширение позволяющее добавить на форум свой стиль, скрипт или блок с произвольным содержимым. В расширении можно задать шапку форума, ico иконку...