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

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

на обложку

Дронов Владимир

Шрифт:

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

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

— если список позволяет

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

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

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

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

Листинг 20.16

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

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

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

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

</SELECT>

</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

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

<OPTION>TABLE</OPTION>

</SELECT>

</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>

Ext.getDom("find"). click;

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

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

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

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

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