Хаки и Скрипты Next Generation CMS

Голосовой поиск на JS

irbees2008 irbees2008 Опубликовано - 23 - мая Интерфейс
3335 - 0
  • Автор: Daniel-Hug
  • Адаптировал: irbees2008
  • Источник:
  • Уровень сложности исполнения: нужны навыки css html
  • Демо:

В предыдущей статье я писал о голосовом поиске на сайте,но как оказалось хром отказался от такого поиска,и работал этот поиск не во всех браузерах. Пришлось еще погуглить и нашёл альтернативу на JS и сейчас распишу как его установить.
Итак приступим
1.Скачиваем исходник Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. ,распаковываем и заливаем файл speech-input.css в папку со стилями шаблона и файл speech-input.js .
2.Подключаем стиль в хеад

Код:
<link rel="stylesheet" href="{{ tpl_url }}/css/speech-input.css">
3.Перед закрытием тега body подключаем скрипт
Код:
<script src="{{ tpl_url }}/js/speech-input.js"></script>
4. Открываем файл search.form.tpl и редактируем примерно так
Код:
<style>.si-wrapper input {font-size: 12px;	padding: 3px;}</style>
<form role="search" method="get" class="search-form" action="{form_url}">
<input type="hidden" name="category" value="" />
<input type="hidden" name="postdate" value="" />
<div class="si-wrapper">
<input type="search" class="si-input" placeholder="Поиск…" name="search" />
<button class="si-btn">speech input
<span class="si-mic"></span>
<span class="si-holder"></span>
</button>
</div>
<button type="submit">Найти</button>
</form>
5.Ну вроде все,кому что не понятно смотрим источник или исходники,стили можно править под себя.

Можешь почитать и вот эту статейку "Небольшое дополнение для слайдера и не только"

Опрос

Ваше мнение

Как вам наш дизайн сайта?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 3324 дня
  • Новостей: 542
  • Комменты: 254
  • Зарегистрированно : 571
  • Онлайн всего: [7]
  • Гости: [7]
  • Были сегодня : [4] Яндекс, Google, selischev, irbees2008
  • SQL запросов: 33
  • Генерация страницы: 0.901сек
  • Потребление памяти: 5.882 Mb 
  •   яндекс.ћетрика