Лекция 7. Переключатели

· Общие сведения

· Вычисление площади фигуры

· Свойства переключателя

· Свойства формы

· Определение выделенного элемента

· Уникальные имена

· Выбор параметров обтекания изображения текстом

· Размещение изображения относительно строки

· Изображение как часть строки

· Расположение текста и изображения в ячейке таблицы

· Фоновое изображение таблицы

· Фоновое изображение документа, таблицы и ячейки таблицы

· Упражнения

Общие сведения

Данные удобно представлять с помощью элемента управления "переключатель" (или "радиокнопка") в том случае, когда из нескольких вариантов может быть выбран лишь один. Например, для указания возраста можно задать интервалы:

· "моложе 20";

· "от 21 до 30";

· "от 31 до 40";

· "старше 41".

Пользователь может выбрать тот интервал, который определяет его возраст. Оценки, полученные на экзамене, также удобно представить переключателем, т. к. каждый студент способен получить лишь одну из оценок (2, 3, 4 или 5). Для представления информации о полученном зачете достаточно двух радиокнопок. С помощью переключателя можно представлять информацию о семейном положении, образовании и многое другое.

Предположим, что некоторая фирма принимает заказы на изготовление витражей. Заказчик должен выбрать форму витража, количество, указать размеры, материал и др. Требуется определить стоимость заказа. Мы рассмотрим лишь фрагмент, в котором выбирается форма витража. Этот выбор осуществляется с помощью переключателя (или радиокнопки). Элемент "переключатель" отображается в виде круглой кнопки и существует только в составе группы подобных элементов. Может быть осуществлен выбор лишь одного элемента группы. Все элементы группы должны иметь одинаковое значение параметра name. Обязательный параметр value должен иметь уникальное значение для каждого элемента группы.

Пусть для выбора фигуры задана следующая форма:

<FORM name="forml">

Введите значение

<input type="text" name="data" size=10><hr>

Укажите форму:<br>

<input type="radio" name="fv" value=l>квадрат<br>

<input type="radio" name="fv" value=2>Kpyr<br>

<input type="radio" name="fv" value=3>треугольник<hr>

<input type="reset" value="Отиенить"><hr>

Площадь: <input type="text" name="res" size=10>

</FORM>

В этой форме шесть элементов. Первый элемент служит для ввода строки текста. Следующие три элемента образуют группу и являются переключателями. Пятый элемент создает кнопку сброса, нажатие которой отменяет все сделанные изменения. Шестой элемент является элементом для ввода строки.

Так как объект forms имеет свойство-массив elements, в котором содержатся ссылки на элементы формы в порядке их перечисления в теге <FORM>, то получить доступ к первому элементу формы можно либо с помощью значения параметра name этого элемента (document.formi.data), либо используя объектную модель JavaScript (document.forms[0].elements[0]). Второй элемент рассматриваемой формы можно получить, если воспользоваться конструкцией document.forms[0].elements[1]. Это элемент-переключатель, определенный в составе группы элементов. В рассматриваемом примере группа элементов состоит из трех переключателей. В одну группу входят элементы с одинаковым значением параметра name. Доступ к следующим элементам группы может быть осуществлен так:document.forms[0].elements[2], document.forms [0].elements [3]. Обязательный параметр value должен иметь уникальное значение для каждого элемента группы. Пользователь может выбрать только один вариант.

Вычисление площади фигуры

Напишем сценарий, в котором в зависимости от длины стороны или радиуса и формы выбранного витража вычисляется его площадь. Для простоты будем считать, что витраж может иметь либо форму квадрата (задается его сторона), либо форму круга (задается радиус), либо форму равностороннего треугольника (задается его сторона).

Площадь рассматриваемых фигур считается по формуле kxа², где k — коэффициент, зависящий от формы выбранной фигуры; а — задаваемое пользователем значение. Вычисления будут проще, если коэффициент k указать в качестве значения параметра value соответствующего переключателя. Щелчок на элементе "переключатель" соответствует событию click, обработка которого заключается в вызове функции test. Функция имеет единственный параметр, значение параметра — value переключателя, которое служит для вычисления площади фигуры.

HTML-код приведен в листинге 4.1.