# 95: JavaScript для нескольких систем пользовательского поиска Google - CSS-хитрости

Anonim

Все наши системы пользовательского поиска Google настроены (мы настраиваем разные системы для каждого раздела сайта). Наш пользовательский интерфейс для поиска готов к работе. У нас есть готовые шаблоны для каждой подстраницы результатов поиска. У нас есть только один последний шаг, чтобы все связать воедино: заставить работать маленькие ссылки «Искать в:».

Мы так много подготовились, что это будет довольно легко. Все, что нам нужно сделать, это изменить actionатрибут в форме, в которой находится наша форма поиска, когда вы щелкаете по разным областям для поиска. Легкий и неприглядный материал jQuery, если я когда-либо его видел.

Для каждой ссылки «Искать в:» мы дадим ей data-urlатрибут. Этот атрибут будет содержать значение, которое мы намереваемся переместить в actionатрибут формы при нажатии на ссылку. Это именно то, что мы делаем всего в паре строк JS. Мы кратко обсудим, как метод .attr () может быть одновременно «получателем» и «сеттером», что является обычным явлением в jQuery.

Остальное время мы тратим на написание небольшого количества дополнительных CSS и jQuery, чтобы установить «активный» класс для ссылок, чтобы, когда пользователь нажимает «Форумы» (или любой другой), он получает обратную связь, что это ограничение поиска в настоящее время активен (становится белым и подчеркнутым, как по умолчанию).