Рейтинговые книги
Читем онлайн HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов - Владимир Дронов

Шрифт:

-
+

Интервал:

-
+

Закладка:

Сделать
1 ... 71 72 73 74 75 76 77 78 79 ... 86

Листинг 21.3

#search { position: absolute; left: 200px; top: 100px; width: 300px; height: 200px; z-index: 2;

clip: rect(100px, 200px, 200px, 0px) }

Средства библиотеки Ext Core для управления свободно позиционируемыми элементами

Настала пора рассмотреть методы объекта Element библиотеки Ext Core, с помощью которых мы можем управлять свободно позиционируемыми элементами Web- страницы. Их немного.

Метод position задает способ позиционирования, z-индекс и координаты данного элемента:

<экземпляр объекта Element>.position(<способ позиционирования>[, <z-индекс>[, <горизонтальная координата>[, <вертикальная координата>]]])

Первым — обязательным — параметром передается соответствующее значение атрибута стиля position в виде строки: "absolute", "relative" или "fixed". Остальные — необязательные — параметры определяют, соответственно, z-индекс, горизонтальную и вертикальную координаты в пикселах; все эти значения задаются в виде чисел.

Пример:

var elSearch = Ext.get("search");

elSearch.position("absolute", 2);

Методы setX и setY задают, соответственно, горизонтальную и вертикальную координаты данного элемента относительно верхнего левого угла Web-страницы:

<экземпляр объекта Element>.setX|setY(<значение координаты>)

Значение координат указывают в пикселах в виде числа:

elSearch.setX(400);

elSearch.setY(200);

Метод setLocation задает сразу обе координаты данного элемента также относительно верхнего левого угла Web-страницы:

<экземпляр объекта Element>.setLocation(<горизонтальная координата>,<вертикальная координата>)

Оба значения координат задают в виде чисел в пикселах:

elSearch.setLocation(400, 200);

Метод clearPositioning делает данный элемент непозиционируемым и удаляет заданные для него координаты. Этот метод не принимает параметров и не возвращает результата:

elSearch.clearPositioning();

Реализация усовершенствованного поиска 

Что ж, все, что нам нужно знать о свободно позиционируемых элементах, мы рассмотрели. Настала пора практических занятий.

В главе 20 мы реализовали на нашем Web-сайте систему поиска. Получилось, мягко говоря, не очень профессионально, о чем уже говорилось в начале этой главы. Давайте улучшим ситуацию.

Прежде всего, мы создадим новый контейнер, дадим ему имя csearch и поместим в него Web-форму поиска. В этот же контейнер, ниже Web-формы, мы вставим список, в котором будут выводиться результаты поиска. (Результаты мы будем формировать в виде пунктов списка, содержащих гиперссылки на найденные Web- страницы, — как и в главе 20.) Дадим этому списку имя search_result и сделаем его изначально скрытым.

Когда посетитель выполнит поиск, мы проверим, присутствуют ли в списке search_result какие-либо пункты (т. е. выполнялся ли поиск ранее и был ли он удачным), и, если присутствуют, удалим их и скроем этот список. Если поиск увенчался успехом, мы сформируем в списке search_result пункты, содержащие гиперссылки на найденные Web-страницы, и откроем его. Таким образом, список search_result будет присутствовать на экране только в случае успешного поиска.

Когда посетитель щелкнет на любом месте Web-страницы (неважно — на гиперссылке, в том числе и гиперссылке в списке результатов поиска, на абзаце, на изображении или вообще на пустом месте), мы должны скрыть список search_result. Это нужно для того, чтобы этот список не присутствовал на экране постоянно и не мешал посетителю.

В остальном новый поиск будет работать так же, как и старый.

Создание контейнера с Web-формой поиска

Откроем Web-страницу index.htm в Блокноте, найдем созданный в главе 20 фрагмент кода, создающий Web-форму поиска, и удалим его. Вместо него мы вставим сразу после открывающего тега <BODY> код, приведенный в листинге 21.4.

Листинг 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-сценария, выполняющего поиск

Осталось создать (точнее, переделать уже созданный в главе 20) Web-сценарий, который, собственно, будет выполнять поиск.

Откроем файл Web-сценария main.js в Блокноте и добавим в его начало такое выражение:

var cSearchHeight = 0;

Оно объявляет служебную переменную, в которой будет сохранена изначальная высота контейнера csearch. Это значение мы будем использовать для позиционирования данного контейнера. Его высота в процессе работы будет постоянно меняться, поэтому для его позиционирования нам понадобится изначальное значение высоты.

Далее найдем тело функции, передаваемой методу onReady объекта Ext. В самом его начале поместим два выражения:

Ext.get("search_result"). setDisplayed(false);

cSearchHeight = Ext.get("csearch"). getHeight();

Первое выражение сразу скроет список search_result, а второе присвоит изначальную высоту контейнера csearch объявленной ранее служебной переменной.

Функцию adjustContainers, задающую размеры контейнеров, мы объявили еще в главе 16 и с тех пор ни разу к ней не возвращались. Настала пора внести в объявление этой функции некоторые правки.

Вот выражения, которые мы добавим в самый конец adjustContainers:

var elCSearch = Ext.get("csearch"); elCSearch.setLocation(clientWidth — elCSearch.getWidth(), Ext.get("cmain"). getY() — cSearchHeight);

Они позиционируют контейнер csearch так, чтобы он в любом случае находился над верхним левым углом контейнера cmain. Кстати, здесь используется значение изначальной высоты контейнера csearch, которое мы сохранили ранее.

Теперь найдем объявление функции searchData, написанной нами в главе 20. Переделаем его так, как показано в листинге 21.6.

Листинг 21.6

function searchData() {

var elSearchResult = Ext.get("search_result"); elSearchResult.select("A"). removeAllListeners(); elSearchResult.dom.innerHTML = ""; elSearchResult.setDisplayed(false);

var sKeyword = Ext.get("keyword"). getValue(false);

if (sKeyword!= "") {

var iSearchMode = Ext.getDom("search_in"). selectedIndex;

var aResult = [];

searchInArray(sKeyword, aHTML, aResult, iSearchMode); searchInArray(sKeyword, aCSS, aResult, iSearchMode); searchInArray(sKeyword, aSamples, aResult, iSearchMode); if (aResult.length > 0) {

var s = "";

for (var i = 0; i < aResult.length; i++) {

s += "<LI><A HREF="" + aResult[i].url + "">" +

aResult[i].name + "</A></LI>";

}

var htelResult = elSearchResult.insertHtml("beforeEnd", s); Ext.fly(htelResult). select("A"). on("click", function(e, t) {

var href = Ext.fly(this). getAttribute("href");

1 ... 71 72 73 74 75 76 77 78 79 ... 86
На этой странице вы можете бесплатно читать книгу HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов - Владимир Дронов бесплатно.
Похожие на HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов - Владимир Дронов книги

Оставить комментарий