Подсвечиваем поисковые слова

Недавно заметил что сайт Django подсвечивает поисковые слова при переходе с поисковика. Там небольшой скрипт написанный на jQuery, хотя есть версия без jQuery.
Себе на сайт поставил версию с jQuery изменив только селектор для поиска(там искались все слова которые содержатся в тексте который имеет определённый класс, я стлал отмечать все слова которые содержаться внутри элемента с id content) и добавив поддержку Яндекса.
Что-бы поставить этот скрипт себе на сайт — надо поставит jQuery и после загрузки него добавить скрипт. В скрипте надо задать селектор элементов внутри которых поисковые слова будут подсвечиваться. Это сделано что-бы исключить подсвечивания в элементах управления. Он находится в 28-й строке:
var elems = $("#content");
Ещё надо добавить в ваш CSS такой текст:

@media screen {
.searchword0 { background: #ff9 }
.searchword1 { background: #cfc }
.searchword2 { background: #cff }
.searchword3 { background: #ccf }
.searchword4 { background: #fcf }
}

Вроде как всё.

Запись опубликована в рубрике Tips & trics с метками . Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>