Пример формы с переключателями

В этом разделе мы приведем исходный текст документа HTML со сценарием, предназначенным для динамического создания новой страницы при помощи сценария JavaScript. Параметры этой страницы определяются состоянием переключателей типа checkbox и radio, расположенными в этом документе.
Наш документ содержит одну форму, в которой есть три переключателя с независимой фиксацией типа checkbox (расположенные в группе Page elements), три переключателя с зависимой фиксацией (образующие группу Text color), и две кнопки - Create Page и Reset.
Если включен переключатель Show title, создаваемый сценарием JavaScript документ HTML будет снабжен заголовком. При включении переключателя Show horizontal lines информация о состоянии переключателей, отображаемая в документе, будет выделена сверху и снизу горизонтальными разделительными линиями.
Переключатель Table view влияет на способ отображения информации. Если он включен, информация будет показана в табличном виде, а если выключен - в виде списка.

Переключатели с зависимой фиксацией группы Text color, расположенные в исходном документе HTML, задают цвет строк при отображении информации в виде списка или цвет названий переключателей при табличном отображении.
В нижней части формы находятся две кнопки с надписями Create Page и Reset. Если нажать на первую из этих кнопок, будет вызвана функция JavaScript, которая определит текущее состояние переключателей и сформирует новый документ HTML. Этот документ появится в окне браузера вместо исходного. С помощью кнопки Reset можно установить начальное состояние переключателей.
Текст документа HTML со сценарием, выполняющим все описанные выше действия, представлен в листинге 3.2.
Листинг 3.2. Файл chapter3/checkradio/checkradio.php

");

if(bTitle)
document.write("Switches Checkbox and Radio");

if(bHorzLine)
document.write("");

if(bTable)
{
document.write("");

szTxt=" " + bTitle;
document.write("Title:" + szTxt.bold() + "");

szTxt=" " + bHorzLine;
document.write("HorzLine:" + szTxt.bold() + "");

szTxt=" " + bTable;
document.write("Table:" + szTxt.bold() + "");

document.write("Color:" + szColor.bold() + "");

document.write("");
}
else
{
document.write("");

szTxt=" " + bTitle;
document.write("Title: " + szTxt.bold());

szTxt=" " + bHorzLine;
document.write("HorzLine: " + szTxt.bold());

szTxt=" " + bTable;
document.write("Table: " + szTxt.bold());

document.write("Color: " + szColor.bold());

document.write("");
}

if(bHorzLine)
document.write("");

document.write("");
}
// -->

Переключатели checkbox и radio

Page elements:

Show title

Show horizontal lines

Table view

Text color:

Red

Green

Blue

В области заголовка документа HTML мы определили три функции с именами resetRCHBox, chkRadio и btnClick.
Первая из этих функций предназначена для инициализации переменных, в которых хранится текущее состояние переключателей:
function resetRCHBox()
{
bTitle=false;
bHorzLine=false;
bTable=false;
szColor="Red";
}
Функция resetRCHBox вызывается в тот момент, когда пользователь нажимает в исходном документе кнопку Reset. Она устанавливает значения четырех переменных.
Переменные bTitle, bHorzLine и bTable отражают состояние, соответственно, переключателей с независимой фиксацией Show title, Show horizontal lines и Table view. Если переключатель включен, в соответствующей переменной хранится значение true, если выключен - false.
В переменной szColor находится цвет текста, выбранный с помощью группы переключателей с зависимой фиксацией Text color.
Начальное состояние переменных, задаваемое функцией resetRCHBox, соответствует начальному состоянию переключателей сразу после загрузки исходного документа HTML в окно браузера.
Для того чтобы обеспечить вызов функции resetRCHBox при нажатии на кнопку Reset, в определении этой кнопки задан обработчик события onClick, как это показано ниже:

Обработка события заключается в простом вызове функции.
Теперь мы займемся переключателями с зависимой фиксацией.
Эти переключатели определены в форме следующим образом:
Red

Green

Blue
Когда пользователь изменяет состояние переключателя, делая по нему щелчок левой клавишей мыши, вызывается обработчик события onClick. Для всех кнопок этот обработчик выглядит одинаково:
if(this.checked)
{
chkRadio(this.form,this.value);
}
Прежде всего обработчик проверяет состояние переключателя, вызывая для этого метод checked. Ссылка на объект, для которого вызывается этот метод (то есть на переключатель), выполняется с помощью ключевого слова this.
В том случае, когда переключатель включен, обработчик вызывает функцию chkRadio, определенную в заголовке документа следующим образом:
function chkRadio(form,value)
{
szColor = value;
}
Хотя мы передаем функции два параметра (ссылку на форму, содержащую переключатель, и значение параметра VALUE текущего переключателя), используется только второй параметр. Значение этого параметра, определяющее цвет текста, сохраняется в переменной szColor.
Работа с переключателями типа checkbox выполняется немного проще:
Show title

Show horizontal lines

Table view
Когда пользователь включает переключатель, обработчик события onClick устанавливает в состояние true соответствующую переменную. Например, при изменении состояния переключателя Show title выполняются следующие действия:
if(this.checked)
{
bTitle=true;
}
Последний орган управления, который мы рассмотрим, это кнопка Create Page. Эта кнопка запускает процесс создания нового документа HTML. Для нее также определен обработчик события onClick:

Этот обработчик вызывает функцию btnClick, передавая ей в качестве параметра ссылку на форму.
Функция btnClick определена в области заголовка документа HTML, исходный текст которого представлен в листинге 3.2.
Внутри этой функции мы определили рабочую текстовую переменную szTxt, присвоив ей значение пустой строки:
var szTxt="";
Когда функция btnClick получает управление, прежде всего она формирует пустую область заголовка документа HTML:
document.write("");
Далее функция анализирует содержимое переменной bTitle:
if(bTitle)
document.write("Switches Checkbox and Radio");
Если перед тем как нажать кнопку Create Page пользователь включил переключатель Show title, в переменной bTitle будет находиться значение true. В этом случае сценарий снабдит формируемый документ заголовком “Switches Checkbox and Radio”, оформив его стилем .
Аналогичным образом анализируется содержимое переменной bHorzLine:
if(bHorzLine)
document.write("");
Эта переменная отражает состояние переключателя Show horizontal lines.
Далее функция btnClick анализирует содержимое переменной bTable, отвечающей за способ отображения информации о состоянии переключателей в создаваемом документе HTML:
if(bTable)
{
. . .
}
else
{
. . .
}
Если переключатель Table view находится во включенном состоянии, информация отображается в виде таблицы.
При формировании первого столбца таблицы цвет текста внутри ячейки устанавливается в соответствии с содержимым переменной szColor:
szTxt=" " + bTitle;
document.write("Title:" + szTxt.bold() + "");
Напомним, что эта переменная хранит значение цвета текста, установленное группой переключателей с зависимой фиксацией Text color.
Если состояние переключателей отображается в виде списка строк, цвет текста устанавливается следующим образом:
document.write("");