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

<OPTION>TT</OPTION>

<OPTION>HEAD</OPTION>

<OPTION>TD</OPTION>

</SELECT>

</P>

</FORM>

.

var clItems = Ext.getDom('answer'). options;

if ((clItems[0].selected) && (clItems[2].selected)

&& (clItems[3].selected) && (clItems[6].selected)) {

var s = 'Вы ответили правильно!';

} else {

var s = 'Неправильно! Будьте внимательнее.';

}

В листинге 20.17 мы создали что-то наподобие онлайнового экзамена. Посетителю требуется выбрать в списке answer пункты, представляющие теги HTML, с помощью которых создаются таблицы. Если все эти пункты выбраны, ответ считается правильным.

Свойство form возвращает экземпляр объекта HTMLElement, представляющий Web-форму, в которой находится данный элемент управления:

var htelForm = Ext.getDom('answer'). form;

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

Ext.getDom('email'). focus();

Метод blur делает данный элемент управления, наоборот, неактивным; при этом фокус ввода переносится на следующий в порядке обхода элемент управления. Данный метод также не принимает параметров и не возвращает результата:

Ext.getDom('email'). blur();

Метод select выделяет все содержимое поля ввода или области редактирования. Он не принимает параметров и не возвращает результата:

Ext.getDom('email'). select();

Метод click позволяет имитировать щелчок на кнопке. Он не принимает параметров и не возвращает результата (листинг 20.18).

Листинг 20.18

<FORM ACTION='#'>

<P>

Найти:

<INPUT TYPE='search' ID='keyword' NAME='keyword' SIZE='40'>

<INPUT TYPE='button' ID='find' NAME='find' VALUE='Искать!'>

</P>

</FORM>

.

Ext.getDom('find'). click();

Свойства и методы объекта Element, применяемые для работы с элементами управления

А теперь обратимся к объекту Element библиотеки Ext Core и посмотрим, что он может предложить нам для работы с элементами управления.

Метод getValue возвращает значение, введенное в поле ввода или область редактирования, в виде строки или числа:

<экземпляр объекта Element>.getValue(<преобразовать в число>)

Если этому методу передать в качестве параметра значение false, он вернет значение поля ввода или области редактирования в виде строки. Если же ему передать значение true, он попытается преобразовать это значение в число и в случае успеха вернет его; в противном случае он вернет это значение в виде строки:

var sEmail = Ext.get('email'). getValue(false);

Метод focus делает данный элемент управления активным. Он не принимает параметров и не возвращает результата. Если вызвать этот метод у элемента Web- страницы, не являющимся элементом управления, ничего не произойдет:

Ext.get('email'). focus();

Метод blur делает данный элемент управления неактивным; при этом фокус ввода переносится на следующий в порядке обхода элемент управления:

Ext.get('email'). blur();

Данный метод также не принимает параметров и не возвращает результата. Если вызвать его у элемента Web-страницы, не являющимся элементом управления, ничего не произойдет.

Метод select поддерживает еще один селектор —:checked. Он соответствует всем установленным флажкам и переключателям:

var clChecked = Ext.get('cmain'). select(':checked');

События элементов управления

Специфические события, поддерживаемые элементами управления, перечислены в табл. 20.1. Их немного.

Элементы управления также поддерживают события dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover и mouseup, описанные в табл. 15.1.

Реализация поиска на Web-сайте

Теоретическая часть, посвященная Web-формам и элементам управления, закончена. Давайте попрактикуемся.

Для практики мы реализуем давно задуманное — поиск на нашем Web-сайте. Поиск будет осуществляться на основе информации, хранящейся в базе данных, которую мы создали еще в главе 18. База данных — вещь универсальная и может пригодиться для многих дел. Мы уже убедились в этом, когда в главе 19 создавали раздел 'См. также' у Web- страниц, куда поместили связанные с ними материалы.

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