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

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

irbees2008 irbees2008 Опубликовано - 23 - мая Интерфейс
3561 - 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йту: 3459 дней
  • Новостей: 553
  • Комменты: 254
  • Зарегистрированно : 583
  • Онлайн всего: [4]
  • Гости: [3]
  • Поисковики: [1] Яндекс
  • Были сегодня : [2] Google, Яндекс
  • SQL запросов: 34
  • Генерация страницы: 0.887сек
  • Потребление памяти: 5.145 Mb 
  •   яндекс.ћетрика