Метод clearPositioning делает данный элемент непозиционируемым и удаляет заданные для него координаты. Этот метод не принимает параметров и не возвращает результата:
elSearch.clearPositioning();
Реализация усовершенствованного поиска
Что ж, все, что нам нужно знать о свободно позиционируемых элементах, мы рассмотрели. Настала пора практических занятий.
В
Прежде всего, мы создадим новый контейнер, дадим ему имя csearch и поместим в него Web-форму поиска. В этот же контейнер, ниже Web-формы, мы вставим список, в котором будут выводиться результаты поиска. (Результаты мы будем формировать в виде пунктов списка, содержащих гиперссылки на найденные Web- страницы, — как и в
Когда посетитель выполнит поиск, мы проверим, присутствуют ли в списке search_result какие-либо пункты (т. е. выполнялся ли поиск ранее и был ли он удачным), и, если присутствуют, удалим их и скроем этот список. Если поиск увенчался успехом, мы сформируем в списке search_result пункты, содержащие гиперссылки на найденные Web-страницы, и откроем его. Таким образом, список search_result будет присутствовать на экране только в случае успешного поиска.
Когда посетитель щелкнет на любом месте Web-страницы (неважно — на гиперссылке, в том числе и гиперссылке в списке результатов поиска, на абзаце, на изображении или вообще на пустом месте), мы должны скрыть список search_result. Это нужно для того, чтобы этот список не присутствовал на экране постоянно и не мешал посетителю.
В остальном новый поиск будет работать так же, как и старый.
Создание контейнера с Web-формой поиска
Откроем Web-страницу index.htm в Блокноте, найдем созданный в
Листинг 21.4
<DIV ID='csearch'>
<FORM ACTION='#'>
<P>
<INPUT TYPE='search' ID='keyword' NAME='keyword' SIZE='20'>
<INPUT TYPE='button' ID='find' NAME='find' VALUE='Искать!'><BR>
<SELECT ID='search_in' NAME='search_in'>
<OPTION>В названиях</OPTION>
<OPTION>В ключевых словах</OPTION>
<OPTION SELECTED>В названиях и ключевых словах</OPTION>
</SELECT>
</P>
<UL ID='search_result'>
</UL>
</FORM>
</DIV>
Он создает контейнер csearch, а в нем — Web-форму поиска. В Web-форме присутствуют те же элементы управления: поле ввода искомого слова, кнопка запуска поиска и раскрывающийся список для выбора режима поиска. Ниже Web-формы мы поместили список search_result, в котором будут выводиться результаты поиска.
Далее нам нужно задать стиль для только что созданного контейнера csearch, который сделает его свободно позиционируемым. Откроем таблицу стилей main.css в Блокноте и добавим в нее CSS-код, приведенный в листинге 21.5.
Листинг 21.5
#csearch { background-color: #F8F8F8; position: absolute;
left: 600px; top: 0px; padding: 2px; border: thin solid #B1BEC6 }
Здесь мы, собственно, делаем контейнер csearch свободно позиционируемым, задаем для него начальные координаты, внутренние отступы и рамку. Внутренние отступы будут совсем небольшими, чтобы контейнер сохранял компактность, а рамка — сплошной — пусть Web-форма поиска будет сразу заметна.
А еще мы указываем для контейнера csearch цвет фона — такой же, как у Web- страницы. Если мы этого не сделаем, фон контейнера будет прозрачным, и сквозь него станет просвечивать содержимое Web- страницы, расположенное 'ниже' контейнера. А это будет выглядеть очень некрасиво.
Раз уж мы правим представление Web-страницы, давайте сразу зададим стили для элементов управления и списка search_result, чтобы сделать их привлекательнее. Рассмотрим эти стили отдельно друг от друга.
Мы задаем для абзаца, в котором поместили элементы управления, и списка search_result нулевые внешние отступы, чтобы сделать контейнер csearch компактнее:
#csearch P,
#search_result { margin: 0px }
Для элементов управления назначаем размер шрифта 10 пунктов:
INPUT, SELECT { font-size: 10pt }
Дело в том, что размер шрифта по умолчанию, принятый для элементов управления, слишком мал, что понравится далеко не всем посетителям.
Убираем у пунктов списка search_result маркеры и слишком большой отступ слева, где, собственно, выводятся эти маркеры:
#search_result LI { list-style-type: none; margin-left: -40px; }
Так мы сделаем контейнер csearch еще компактнее.
На этом с Web-формой и элементами управления покончено.
Написание Web-сценария, выполняющего поиск
Осталось создать (точнее, переделать уже созданный в
Откроем файл Web-сценария main.js в Блокноте и добавим в его начало такое выражение:
