Выдвижная форма поиска для phpBB.
Изображение
В спокойном состоянии наша форма находится в свёрнутом состоянии, при нажатии по иконке поиска строка раздвигается и отображает форму, куда вы можете ввести запрос.

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


Небольшой план того, что у нас должно получиться:
  • Сначала нужно чтобы показывалась только кнопка с иконкой поиска.
  • При нажатии по иконке, нам нужно чтобы появлялась форма поиска.
  • Этот компонент должен быть гибким, чтобы мы могли использовать его в адаптивных шаблонах.
  • После ввода запроса, нам нужно, чтобы начать поиск можно было после клика по иконке, либо нажатием 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]

Скачать вариант от кабинета админа:
ExpandingSearchBar.rar
7.82 КБ 364 скачивания
Комментарии: 12

eska 10 июл 2013, 21:17 Сообщение

А у меня в оверал хидер нет такого(((
CabinetAdmin » Сегодня, 11:42 писал(а):<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
...
<!-- ENDIF -->
  • 0

CabinetAdmin 10 июл 2013, 21:19 Сообщение

Если нету, значит у вас нет формы для быстрого поиска, как на чистом просильвере. Просто ставьте блок с поиском в любое место, туда где хотите увидеть этот блок.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

eska 10 июл 2013, 21:24 Сообщение

Я так понимаю, что я могу вставить не чмстый код быстрого поиска, а уже переделанный вами в первом вашем сообщении, этот код:

Код: Выделить всё

<!-- 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>
В любое место оверал хидер? а не подскажите как его поставить сверху иконки "ГАЗ ЧАТ" я думаю так будет ему самое мместо
  • 0

CabinetAdmin 10 июл 2013, 21:53 Сообщение

Да, этот код. В любое, найдите то место где у вас установлена кнопка - поставьте перед ней.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

eska 10 июл 2013, 21:56 Сообщение

Она у меня в индекс боди стоит)
  • 0

CabinetAdmin 10 июл 2013, 22:05 Сообщение

Ну тогда в конец хедера. Можно конечно и индексе поставить, но тогда поиск будет только на главной странице.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

eska 10 июл 2013, 22:26 Сообщение

Вроде вышло, но как-то кривоватенько(
  • 0

CabinetAdmin 11 июл 2013, 08:53 Сообщение

Есть немного, кнопка уезжает когда открывается поле поиска. В принципе её можно сделать чуть выше, сразу после меню, например, ну и цвет по желанию под стиль форума. Можно заключить кнопку и поиск в таблицу чтобы ничего никуда не съезжало.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

VirtorVir 13 сен 2013, 22:30 Сообщение

Форум со стилем subsilver2. Никак не могу толково прикрутить на него эту форму поиска. Не могли бы вы более подробно описать:что куда прописывать и вставлять.
  • 0

CabinetAdmin 14 сен 2013, 13:33 Сообщение

VirtorVir
Если вы хотите поставить поиск в какой-то определённый участок, то тут нужно смотреть стиль, допиливать если придётся, менять цвета под дизайн, если требуется.

А так всё по инструкции, css добавляете в файл вашего стиля, html со структурой поиска в любое место, скорее всего куда нибудь в overall_header.html, чтобы поиск был вверху форума или в overall_footer.html, если хотите увидеть поиск в нижней его части.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

eska 11 дек 2013, 12:33 Сообщение

В теме стиля мы это всё добавляли или уже корректировали то, что стояло до этого?
  • 0

CabinetAdmin 11 дек 2013, 14:23 Сообщение

Добавляли, у этой формы свои стили.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

Похожие темы