- Веб-Шаблоны
- Шаблон интернет-магазина
- Шаблоны для CMS
- Facebook шаблоны
- Конструктор сайтов
JS Animated. Как активировать форму поиска
Ноябрь 24, 2014
Здравствуйте, из этого туториала вы узнаете, как активировать форму поиска в вашем шаблоне JS Animated.
JS Animated. Как активировать форму поискаВ некоторых случаях вам понадобится активировать форму поиска на сайте. С ее помощью посетителя сайта смогут оперативно находить интересующую их информацию на сайте.
Внимание! Форма поиска не работает, если сайт находится на локальном сервере. Такие формы работают только на хостингах с включенным PHP.
Для работы с формой необходимы эти файлы:
jquery.js – библиотека jQuery (форма будет активна только с этой версией библиотеки);
search.css – файл стилей, что используется при оформлении страницы результатов поиска;
search.php – страница, на которой отображаются результаты поиска;
search.js – скрипт, который отвечает за вывод результатов поиска на странице search.php;
results.php – PHP скрипт, с помощью которого осуществляется поиск.
Для активации формы поиска следуйте этой инструкции:
Скопируйте папку search в корневую папку сайта (там расположены ваши файлы *.html):
-
Переместите файл search.php из папки search в корневую папку (к файлам *.html).
-
Отредактируйте вашу форму для определения следующих параметров: action=»search.php» и method=»get», а также, укажите параметр ввода: name=»s»:
<form id="search" action="search.php" method="GET" accept-charset="utf-8"> <input type="text" name="s" /> <a onclick="document.getElementById('search').submit()">Search</a> </form>
Если вы хотите изменить слово «поиск», по умолчанию заданное как id=»search», измените его на строке 3 в файле search.js, что находится в папке search.
-
Скопируйте части хедера и футера с подключениями скриптов в раздел <head></head> на страницу search.php, обязательно добавьте подключение файла search.js. К примеру:
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all"> <link rel="stylesheet" href="css/fonts.css" type="text/css" media="all"> <link rel="stylesheet" href="css/style.css" type="text/css" media="all"> <script src="js/jquery.js"></script> <script src="search/search.js"></script>
-
Добавьте следующий блок к вашему содержимому для отображения результатов поиска:
<h3>Search result:</h3> <div id="search-results"></div>
-
Изменить оформление страницы результатов поиска можно в файле search.css.
Остальное оформление шаблона автоматически будет загружено из файла style.css посредством скрипта PHP.
Теперь форма поиска активна.
Вы также можете воспользоваться детальной видео-инструкцией:
JS Animated. Как активировать форму поиска