TextBox
Пример 13.3. Форма, дополненная полями TextBox и применением темы
<html>
<head>
<title>Register for Spam</title>
<link rel="stylesheet" type="text/css"
href="http://o.aolcdn.com/dojo/1.1/dojo/resources/dojo.css" />
<link rel="stylesheet" type="text/css"
href="http://o.aolcdn.com/dojo/1.1/dijit/themes/tundra/tundra.css" />
<script
djConfig="parseOnLoad:true",
type="text/javascript"
src="http://o.aolcdn.com/dojo/1.1/dojo/dojo.xd.js">
</script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.TextBox");
function help() {
var msg="Basically, we want to sell your info to a 3rd party.";
alert(msg);
return false;
}
//простая проверка
function validate() {
var f = document.getElementById("registration_form");
if (f.first.value==""||f.last.value==""||f.email.value=="") {
alert("All fields are required.");
return false;
}
return true;
}
</script>
</head>
(body class="tundra")
<p>Just Use the form below to sign-up for our great offers:</p>
<form id="registration_form"
method="POST"
onsubmit="javascript:return validate()"
action="http://localhost:8080/register/">
First Name:
<input dojoType="dijit.form.TextBox" propercase=true
trim=true name="first">(br)
Last Name:
<input dojoType="dijit.form.TextBox" propercase=true
trim=true name="last">(br)
Your Email:
<input dojoType="dijit.form.TextBox"
length=25 name="email">(br)
(button type="submit")Sign Up!(/button)
(button type="reset")Reset(/button)
(button type="button"
onclick="javascript:help()")Help(/button)
</form>
(/body)
</html>
Помимо улучшенного внешнего вида диджит TextBox поможет сэкономить около десятка строк программного кода JavaScript. Конечно, вы можете переопределить точку расширения format, реализовав свою функцию форматирования и присвоив ее атрибуту format. Например, следующая функция форматирования принимает строку и выполняет ЧеРеДоВаНиЕ РеГиСтРа СиМвОлОв:
function mixedCapitalization(value) {
var newValue = "";
var upper = true;
dojo.forEach(value.toLowerCase(), function(x) {
if (upper)
newValue += x.toUpperCase();
else
newValue += x;
upper = !upper;
});
return newValue;
}
Задействовать эту функцию для работы совместно с диджитом TextBox очень просто:
<input dojoType="dijit.form.TextBox" format="mixedCapitalization"
trim=true name="first">
Если при взаимодействии с формой вызвать появление события blur, переместив указатель мыши за ее пределы, можно увидеть, как выполняется это преобразование. Точно так же, как и format, можно переопределить функцию parse, которая стандартизует возвращаемое значение диджита. Одной из типичных операций является преобразование числовых типов в значения типа Number или стандартизация строковых значений.
Комментарии:
Нету комментариев для вывода...