Главная Обратная связь Поможем написать вашу работу!

Дисциплины:

Архитектура (936)
Биология (6393)
География (744)
История (25)
Компьютеры (1497)
Кулинария (2184)
Культура (3938)
Литература (5778)
Математика (5918)
Медицина (9278)
Механика (2776)
Образование (13883)
Политика (26404)
Правоведение (321)
Психология (56518)
Религия (1833)
Социология (23400)
Спорт (2350)
Строительство (17942)
Технология (5741)
Транспорт (14634)
Физика (1043)
Философия (440)
Финансы (17336)
Химия (4931)
Экология (6055)
Экономика (9200)
Электроника (7621)






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



В этом разделе приведен исходный текст документа 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 со сценарием, выполняющим все описанные выше действия, представлен в листинге 2.

Листинг 2.

<HTML> <HEAD> <SCRIPT> <!-- function resetRCHBox() { bTitle=false; bHorzLine=false; bTable=false; szColor="Red"; } function chkRadio(form,value) { szColor = value; } function btnClick(form) { var szTxt=""; document.write("<HEAD></HEAD><BODY>"); if(bTitle=”true”) document.write("<H1>Switches Checkbox and Radio</H1>"); if(bHorzLine) document.write("<HR>"); if(bTable=”true”) { document.write("<TABLE>"); szTxt=" " + bTitle; document.write("<TR><TD><FONT COLOR=" + szColor + ">Title:</TD><TD>" + szTxt.bold() + "</TD></TR>"); szTxt=" " + bHorzLine; document.write("<TR><TD><FONT COLOR=" + szColor + ">HorzLine:</TD><TD>" + szTxt.bold() + "</TD></TR>"); szTxt=" " + bTable; document.write("<TR><TD><FONT COLOR=" + szColor + ">Table:</TD><TD>" + szTxt.bold() + "</TD></TR>"); document.write("<TR><TD><FONT COLOR=" + szColor + ">Color:</TD><TD>" + szColor.bold() + "</TD></TR>"); document.write("</TABLE>"); } else { document.write("<FONT COLOR=" + szColor + ">"); szTxt=" " + bTitle; document.write("<BR>Title: " + szTxt.bold()); szTxt=" " + bHorzLine; document.write("<BR>HorzLine: " + szTxt.bold()); szTxt=" " + bTable; document.write("<BR>Table: " + szTxt.bold()); document.write("<BR>Color: " + szColor.bold()); document.write("</FONT>"); } if(bHorzLine) document.write("<HR>"); document.write("</BODY>"); } // --> </SCRIPT> <TITLE>Переключатели checkbox и radio</TITLE> </HEAD> <BODY> <SCRIPT> <!-- var bTitle=false; var bHorzLine=false; var bTable=false; var szColor="Red"; // --> </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>

 





 



Список select

С помощью оператора <SELECT> вы можете разместить внутри формы список, допускающий выбор одной или просмотр нескольких строк. Формат оператора <SELECT> приведен ниже:

<SELECT NAME="Имя_списка_select" SIZE="Размер_списка" MULTIPLE onBlur="Обработчик_события" onChange="Обработчик_события" onFocus="Обработчик_события"> <OPTION VALUE="Значение" SELECTED> Текст <OPTION VALUE="Значение"> Текст ... <OPTION> Текст</SELECT>

Все параметры оператора <SELECT> необязательные, однако для того чтобы сценарий JavaScript мог работать со списком, необходимо указать по крайней мере параметр NAME, определяющий имя списка.

Параметр SIZE задает размер видимой части списка в строках.

Если указан необязательный параметр MULTIPLE, объект select является списком просмотра, а не списком выбора.

Для определения элементов списка предназначен оператор <OPTION>. Оператор <OPTION> может иметь два параметра - VALUE и SELECTED. Параметр VALUE определяет значение, которое передается расширению сервера Web. С помощью параметра SELECTED отмечается строка списка, выделенная по умолчанию при начальном отображении формы. После оператора <OPTION> следует текст, отображаемый в строках списка.

Свойства объекта select

Ниже перечислены свойства объекта select, доступные сценарию JavaScript:

Свойство Описание
length Количество элементов (строк) в списке
name Значение параметра NAME
options Массив объектов options, соответствующих элементам массива, заданным при помощи оператора <OPTION>
selectedIndex Номер выбранного элемента или первого элемента среди нескольких выбранных (если указан параметр MULTIPLE и пользователь выбрал в списке несколько элементов)

 

Одним из свойств списка select является массив options. В этом массиве хранятся элементы списка, определенные оператором <OPTION>. Каждый элемент такого массива есть ни что иное как объект со следующим набором свойств:

Свойство Описание
defaultSelected Отражает состояние параметра SELECTED
index Порядковый номер (индекс) элемента списка
length Количество элементов в выбранном объекте
name Значение параметра NAME
selected С помощью свойства selected сценарий JavaScript может выбрать данный элемент
selectedIndex Номер выбранного элемента
text Текст, указанный после оператора <OPTION>
value Значение параметра VALUE

 

Методы объекта select

Для объекта select определено два метода, не имеющих параметров, - focus и blur. Первый из этих методов позволяет передать списку фокус ввода, а второй - отобрать этот фокус у списка.


Просмотров 259

Эта страница нарушает авторские права




allrefrs.ru - 2021 год. Все права принадлежат их авторам!