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

В этом разделе мы приведем исходный текст документа HTML со сценарием, предназначенным для динамического создания новой страницы при помощи сценария JavaScript. Параметры этой страницы определяются состоянием переключателей типа checkbox и radio, расположенными в этом документе (рис. 3.3).

Рис. 3.3. Форма с переключателями различных типов

Наш документ содержит одну форму, в которой есть три переключателя с независимой фиксацией типа checkbox (расположенные в группе Page elements), три переключателя с зависимой фиксацией (образующие группу Text color), и две кнопки - Create Page и Reset.

Если включен переключатель Show title, создаваемый сценарием JavaScript документ HTML будет снабжен заголовком. При включении переключателя Show horizontal lines информация о состоянии переключателей, отображаемая в документе, будет выделена сверху и снизу горизонтальными разделительными линиями.

Переключатель Table view влияет на способ отображения информации. Если он включен, информация будет показана в табличном виде, а если выключен - в виде списка (рис. 3.4).

Рис. 3.4. Отображение состояния переключателей в виде списка

Внешний вид страницы при включении всех трех переключателей группы Page elements показан на рис. 3.5.

Рис. 3.5. Отображение состояния переключателей в виде таблицы с заголовком, выделенной линиями

Переключатели с зависимой фиксацией группы Text color, расположенные в исходном документе HTML, задают цвет строк при отображении информации в виде списка или цвет названий переключателей при табличном отображении.

В нижней части формы находятся две кнопки с надписями Create Page и Reset. Если нажать на первую из этих кнопок, будет вызвана функция JavaScript, которая определит текущее состояние переключателей и сформирует новый документ HTML. Этот документ появится в окне браузера вместо исходного. С помощью кнопки Reset можно установить начальное состояние переключателей.

Текст документа HTML со сценарием, выполняющим все описанные выше действия, представлен в листинге 3.2.

Листинг 3.2. Файл chapter3/checkradio/checkradio.html
<HTML>
<HEAD>
<SCRIPT>
    
</SCRIPT>
    <TITLE> Переключатели checkbox и radio</TITLE>
</HEAD>
<BODY>
<SCRIPT>
    
</SCRIPT>
    <FORM NAME="myform">
     <B>Page elements:</B>
     <P><INPUT TYPE="checkbox" NAME="chkTitle"
        onClick="if(this.checked) {bTitle=true;}"> Show title
     <BR><INPUT TYPE="checkbox" NAME="HorzLine"
       onClick="if(this.checked) {bHorzLine=true;}"> Show horizontal lines
     <BR><INPUT TYPE="checkbox" NAME="Table"
        onClick="if(this.checked) {bTable=true;}"> Table view
     <P><B>Text color:</B>
     <P><INPUT TYPE="radio" NAME="Color" CHECKED VALUE="Red"
        onClick="if(this.checked) {chkRadio(this.form,this.value);}"> Red
     <BR><INPUT TYPE="radio" NAME="Color" VALUE="Green"
        onClick="if(this.checked) {chkRadio(this.form,this.value);}"> Green
     <BR><INPUT TYPE="radio" NAME="Color" VALUE="Blue"
        onClick="if(this.checked) {chkRadio(this.form,this.value);}"> Blue

     <TABLE>
       <TR><TD><INPUT TYPE="button" NAME="btn" VALUE="Create Page"
       onClick="btnClick(this.form);"></TD>
       <TD><INPUT TYPE="reset" NAME="resetBtn" VALUE="Reset"
        onClick="resetRCHBox();"></TD></TR>
     </TABLE>
    </FORM>
</BODY>
</HTML>
В области заголовка документа 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, как это показано ниже:
<INPUT TYPE="reset" NAME="resetBtn" VALUE="Reset"
        onClick="resetRCHBox();">
Обработка события заключается в простом вызове функции.
Теперь мы займемся переключателями с зависимой фиксацией.
Эти переключатели определены в форме следующим образом:
<INPUT TYPE="radio" NAME="Color" CHECKED VALUE="Red"

  onClick="if(this.checked)
    {chkRadio(this.form,this.value);}"> Red
<BR><INPUT TYPE="radio" NAME="Color" VALUE="Green"
onClick="if(this.checked)
    {chkRadio(this.form,this.value);}"> Green
<BR><INPUT TYPE="radio" NAME="Color" VALUE="Blue"
onClick="if(this.checked)
    {chkRadio(this.form,this.value);}"> Blue
Когда пользователь изменяет состояние переключателя, делая по нему щелчок левой клавишей мыши, вызывается обработчик события onClick. Для всех кнопок этот обработчик выглядит одинаково:
if(this.checked)
{
chkRadio(this.form,this.value);
}
Прежде всего обработчик проверяет состояние переключателя, вызывая для этого метод checked. Ссылка на объект, для которого вызывается этот метод (то есть на переключатель), выполняется с помощью ключевого слова this.
В том случае, когда переключатель включен, обработчик вызывает функцию chkRadio, определенную в заголовке документа следующим образом:
function chkRadio(form,value)
{
szColor = value;
}
Хотя мы передаем функции два параметра (ссылку на форму, содержащую переключатель, и значение параметра VALUE текущего переключателя), используется только второй параметр. Значение этого параметра, определяющее цвет текста, сохраняется в переменной szColor.
Работа с переключателями типа checkbox выполняется немного проще:
<INPUT TYPE="checkbox" NAME="chkTitle"
onClick="if(this.checked) {bTitle=true;}"> Show title
<BR><INPUT TYPE="checkbox" NAME="HorzLine"
  onClick="if(this.checked) {bHorzLine=true;}"> Show horizontal lines
<BR><INPUT TYPE="checkbox" NAME="Table"
onClick="if(this.checked) {bTable=true;}"> Table view
Когда пользователь включает переключатель, обработчик события onClick устанавливает в состояние true соответствующую переменную. Например, при изменении состояния переключателя Show title выполняются следующие действия:

if(this.checked)
{
bTitle=true;
}
Последний орган управления, который мы рассмотрим, это кнопка Create Page. Эта кнопка запускает процесс создания нового документа HTML. Для нее также определен обработчик события onClick:
<INPUT TYPE="button" NAME="btn" VALUE="Create Page"
onClick="btnClick(this.form);">
Этот обработчик вызывает функцию btnClick, передавая ей в качестве параметра ссылку на форму.
Функция btnClick определена в области заголовка документа HTML, исходный текст которого представлен в листинге 3.2.
Внутри этой функции мы определили рабочую текстовую переменную szTxt, присвоив ей значение пустой строки:
var szTxt="";
Когда функция btnClick получает управление, прежде всего она формирует пустую область заголовка документа HTML:
document.write("<HEAD></HEAD><BODY>");
Далее функция анализирует содержимое переменной bTitle:
if(bTitle)
document.write("<H1>Switches Checkbox and Radio</H1>");
Если перед тем как нажать кнопку Create Page пользователь включил переключатель Show title, в переменной bTitle будет находиться значение true. В этом случае сценарий снабдит формируемый документ заголовком “Switches Checkbox and Radio”, оформив его стилем <H1>.
Аналогичным образом анализируется содержимое переменной bHorzLine:
if(bHorzLine)
document.write("<HR>");
Эта переменная отражает состояние переключателя Show horizontal lines.
Далее функция btnClick анализирует содержимое переменной bTable, отвечающей за способ отображения информации о состоянии переключателей в создаваемом документе HTML:
if(bTable)
{
. . .
}
else
{
. . .
}
Если переключатель Table view находится во включенном состоянии, информация отображается в виде таблицы.
При формировании первого столбца таблицы цвет текста внутри ячейки устанавливается в соответствии с содержимым переменной szColor:
szTxt=" " + bTitle;
document.write("<TR><TD><FONT COLOR=" + szColor
+ ">Title:</TD><TD>" + szTxt.bold() + "</TD></TR>");
Напомним, что эта переменная хранит значение цвета текста, установленное группой переключателей с зависимой фиксацией Text color.
Если состояние переключателей отображается в виде списка строк, цвет текста устанавливается следующим образом:
document.write("<FONT COLOR=" + szColor + ">");

Содержание раздела