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

var sEmail = Ext.getDom("email"). value;

Свойство checked позволяет получить или задать состояние флажка или переключателя — установлен он или нет. Значение true обозначает, что флажок или переключатель установлен, значение false — сброшен:

Ext.get("updates"). on("click", function() { var htelEmail = Ext.getDom("email"); htelEmail.disabled = this.checked;

});

Здесь мы привязываем к флажку updates функцию — обработчик события click, которую тут же и объявляем. Эта функция делает доступным для посетителя поле ввода email, если флажок установлен, и недоступным — если он сброшен. Наша задача упрощается тем, что переменная this, доступная в теле функции- обработчика события и хранящая элемент Web-страницы, в котором обрабатывается событие, хранит этот элемент в виде экземпляра объекта HTMLElement. Спасибо разработчикам Ext Core!

Еще один пример приведен в листинге 20.15.

Листинг 20.15

<FORM ACTION="#">

<P>

<INPUT TYPE="radio" ID="updates_yes" NAME="updates" CHECKED>

Я хочу получать письма со списком обновлений Web-сайта

</P>

<P>

<INPUT TYPE="radio" ID="updates_no" NAME="updates">

Я не хочу получать письма со списком обновлений Web-сайта

</P>

<P>Почтовый адрес: <INPUT TYPE="text" ID="email" NAME="email"></P>

</FORM>

.

Ext.get("updates_yes"). on("click", function() { var htelEmail = Ext.getDom("email"); htelEmail.disabled = this.checked;

});

В листинге 20.15 мы выполняем аналогичные действия, но уже с группой из двух переключателей updates2. Обратим внимание, что мы проверяем состояние только первого переключателя этой группы — updates_yes. В группе может быть включен только один переключатель, и если посетитель включит второй переключатель этой группы, первый переключатель отключится. Фактически группа из двух переключателей ведет себя как флажок.

Свойство selectedIndex задает или возвращает номер выбранного в списке пункта в виде числа. При этом:

— если список позволяет выбирать одновременно только один пункт, возвращается номер именно этого пункта;

— если список позволяет выбирать сразу несколько пунктов, возвращается номер первого выбранного пункта;

— если ни один пункт в списке не выбран, возвращается значение –1.

Понятно, что пользы от свойства selectedIndex будет больше в том случае, если список позволяет выбирать только один пункт одновременно. Хотя в любом случае его можно применять для проверки, выбран ли в списке хоть один пункт. Листинг 20.16 иллюстрирует пример.

Листинг 20.16

<FORM ACTION="#">

<P>

Выполнять поиск по

<SELECT ID="search_in" NAME="search_in">

<OPTION>названиям</OPTION>

<OPTION>ключевым словам</OPTION>

<OPTION SELECTED>названиям и ключевым словам</OPTION>

</SELECT>

</P>

</FORM>

.

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

if (iIndex == -1) {

//если в списке не выбран ни один пункт, делаем одно

} else {

//если в списке выбран какой-либо пункт, делаем другое

}

Свойство options возвращает коллекцию пунктов списка. Эта коллекция является

экземпляром объекта HTMLOptionsCollection:

var clItems = Ext.getDom("search_in"). options;

Свойство length объекта HTMLOptionsCollection возвращает число элементов в коллекции, т. е. количество пунктов в списке:

var iItemsCount = clItems.length;

Для доступа к отдельным пунктам в этой коллекции мы можем использовать числовые индексы, как и в случае массива:

var htelSecondItem = clItems[1];

Здесь мы получаем второй пункт списка.

Отдельный пункт списка представляется экземпляром объекта HTMLOptionElement. Он поддерживает уже знакомое нам свойство disabled, позволяющее разрешить или запретить доступ к данному пункту списка.

А еще он поддерживает свойство selected, указывающее, выбран ли данный пункт списка. Значение true обозначает, что пункт списка выбран, а значение false — не выбран. Это свойство удобно применять, чтобы выяснить, какие пункты выбраны в списке, позволяющем выбирать сразу несколько пунктов (листинг 20.17).

Листинг 20.17

<FORM ACTION="#">

<P>

С помощью каких тегов HTML формируется таблица?

<SELECT ID="answer" NAME="answer" SIZE="5" MULTIPLE>

<OPTION>TR</OPTION>

<OPTION>DIV</OPTION>

<OPTION>TABLE</OPTION>

<OPTION>TH</OPTION>

<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-страниц, куда поместили связанные с ними материалы.

Чтобы усложнить себе задачу и упростить жизнь посетителям, мы реализуем поиск, во-первых, по названиям Web-страниц, во-вторых, по ключевым словам, связанным с каждой Web-страницей. Ключевым словом в данном случае называется специальным образом подобранное кодовое слово, характеризующее конкретный материал. Скажем, для материала, рассказывающего о теге <AUDIO>, ключевыми словами будут "мультимедиа" и "аудио", поскольку он описывает способ размещения на Web-страницах аудиороликов, относящихся к мультимедийным материалам.