Spry 组件 是一个包含内建行为的页面元素，它提供给用户更好的用户交互体验。这些行为包括使用户显示或隐藏页面内容，改变页面的呈现样式，与菜单元素交互，还有其他更多的功能。
Spry 框架支持一组可重用的组件，由标准的HTML,CSS,Javascript构成。你可以方便地将这些组件加入到页面中然后以自己的方式进行样式设置。
Spry 框架的每个组件都关联着唯一的CSS和Javascript 文件。CSS文件包括格式化组件的所有定义，Javascript 文件则提供功能性教本。你必须将这两个文件链接到使用组件的页面上，否则将不会由任何样式或功能。获取更多的信息，请参阅后面的链接相关文件的话题。
组件所关联的CSS和Javascript 文件同组件是同名的，这样就很容易知道哪个文件用于哪个组件。（例如，关联折叠菜单（Accordion）的CSS和Javascript文件被命名为 SpryAccordion.css 和 SpryAccordion.js)Spry widgets 关联文件放在 widgets/accordion 目录中。
文字区域校验元件有对文字区域输入的文字进行校验的功能。用户可以方便的修改校验规则。
第一眼看去，文字区域校验元件和普通的文字区域没什么区别，但是区别是文字区域校验元件在客户端进行数据校验。
要创建一个文字区域校验元件，只需要一个简单的文字区域输入框，将其转变为 Spry元件只需要加入一些简单的元素。
下面显示的是一个文字区域校验元件的外观：
只需要在 TEXTAREA 外加一个HTML容器（比如<span>）就可以创建一个文字区域校验元件.元件由外层容器的ID来标识。这个容器允许元件显示错误信息。如果不使用外部容器，唯一ID应该是文字区域 TEXTAREA的ID，但是就不能使用错误提示信息了。只有CSS用来控制不同状态的样式。
文字区域校验元件有一组相关状态，这些状态用来描述在校验进行时的元件的状态。一个或多个状态可以在任何时刻应用到文字区域校验元件，这基于校验的结果和其它的一些事件。
文字区域校验元件可以有下面的状态：
当元件进入了一个状态或获得焦点，一个特定的CSS样式被应用到HTML容器。每种状态的样式定义存在于SpryValidationTextarea.css文件中。
错误信息通过增加一个span标签（或其它标签）来放置信息文字。通过增加CSS样式，你可以默认隐藏错误信息，只有当元件状态改变时容器将应用特定的样式。
下面的图示演示了一些状态：
你可以改变文字区域校验元件各种状态的样式文件。例如，如果你想修改一个状态背景颜色，你可以修改SpryValidationTextarea.css中相应的样式规则或者增加新的规则
HTML中也包含<script>标签。头部的脚本定义了校验元件的所有函数。后面的脚本包含了元件的构造函数。
下面是文字区域校验元件的HTML代码，包括错误信息和相关的JS：
上面的代码，你可以看到构造函数的参数：HTML的容器ID。
同时错误信息的SPAN标签也有样式。信息通过触发不同的状态应用不容的CSS来显示或隐藏。
上面的例子中，SPAN被用于创建文字区域元件结构。
除了SPAN你可以使用其它的标签，因为算法通过容器ID来识别元件并且错误信息是使用CSS样式表显示。
元件的实例化将HTML元素的ID传递给构造函数，然后查找容器中的需要校验的TEXTAREA元件标签。如果传递给构造函数的是TEXTAREA标签的ID，它将直接使用这个元素触发校验。然而，由于没有外部容器标签，所以不能使用错误信息，不同的CSS规则将触发不同的状态。
另一个元件的样例：
注意：一个容器中只能有一个textarea元素。
SpryValidationTextarea.css 包含了选单元件使用的各种状态的样式。样式名对应HTML中使用的错误信息的样式名。然而，如果父级容器有状态样式，那么样式选择器更复杂一些。
SpryValidationTextarea.css ：
/*Validation Textarea styling classes*/
.textareaRequiredMsg, .textareaMinCharsMsg, .textareaMaxCharsMsg, .textareaValidMsg {
display:none;
}
.textareaRequiredState .textareaRequiredMsg,
.textareaMinCharsState .textareaMinCharsMsg,
.textareaMaxCharsState .textareaMaxCharsMsg
{
display: inline;
color: #CC3333;
border: 1px solid #CC3333;
}
.textareaValidState textarea, textarea.textareaValidState {
background-color:#B8F5B1;
}
textarea.textareaRequiredState, .textareaRequiredState textarea,
textarea.textareaMinCharsState, .textareaMinCharsState textarea,
textarea.textareaMaxCharsState, .textareaMaxCharsState textarea {
background-color:#FF9F9F;
}
.textareaFocusState textarea, textarea.textareaFocusState {
background-color:#FFFFCC;
}
.textareaFlashState textarea, textarea.textareaFlashState{
color:red !important;
}
这个部分包含两个部分：
保证 SpryValidationTextArea.js 文件的路径正确。这取决于你放置这个文件的位置。
保证 SpryValidationTextArea.css 文件的路径正确。这取决于你放置这个文件的位置。
重要的是你需要确定ID和 Spry.Widget.ValidationTextarea方法中使用的ID相同。确定JavaScript在HTML代码后执行。
文字区域校验元件有一个 SpryValidationTextarea.css文件提供必要的样式。你可以随喜好修改对应的样式。
改变文字区域校验元件的样式就是你可以修改默认的样式。在SpryValidationTextarea.css文件中你将发现所有的需要修改的样式。
要改变文字区域校验元件的外观：
SpryValidationTextarea.css 文件中有详细的注释，解释了各个样式的用途。
文字区域校验元件的行为包括当校验时改变CSS样式名，不允许用户提交非法数值。
例如，当用户试图提交一个空值，提交被拦截，必选样式被用于元件容器。用户可以看到一个视觉提示或错误信息。选单校验元件都具有这些行为。若不需要这些行为，只要将相应CSS留空就可以了。这些样式有一些默认的属性，但是你也可以加入一些新的属性。并且Textarea提供一个字符计数器。
改变文字区域校验元件的行为：
下面的样式定义了当校验元件初始化时错误信息的外观 (隐藏错误信息)。你可以在CSS和HTML同时修改。我们只提供基本的默认值以便快速地使用。样式如下：
你不可以重命名或重置SpryValidationTextarea.css中的样式名，因为这些样式名在框架中已经写死。不过你可以通过在构造函数中将自定义的样式名作为参数传递给元件。下面是如何改变必选样式名的例子：
<script>
var TextareaWidgetObject = new Spry.Widget.ValidationTextarea("TextareaWidget", {requiredClass: "required", invalidCharsMaxClass: "max", invalidCharsMinClass: "min", validClass: "valid", textareaFlashClass: "flash"});
</script>
为了允许用户提交空值，元件应该有'{isRequired:false}' 参数，默认值为'true'：这意味着空值是不允许被提交的。然而，将isRequired属性设为'false'，就可以改变元件的默认校验行为了。
当你不希望用户输入的字符少于一个数目的时候，可以在构造函数加入minChars选项。使用这个参数定义一个最小数量，这个数值是一个正整数。相关状态的CSS是textareaMinCharsState，代码如下：
当你不希望用户输入的字符大于一个数目的时候，可以在构造函数加入maxChars选项。使用这个参数定义一个最大数量，这个数值是一个正整数。相关状态的CSS是textareaMaxCharsState，代码如下：
文字区域元件允许限制最大文字数，当达到最大数目时用户不能再继续输入更多的字符。要同时设置 maxChars参数和useCharacterMasking参数。当useCharacterMasking为true的时候可以开启限制功能，默认为true。当达到限制值时，textareaFlashState将被应用一秒钟。
校验元件通常在提交 'on submit'时进行，用户可以定义其它两种选项：失去焦点"blur"和改变"change"。validateOn:"blur"选项是在元件失去焦点时触发校验。validateOn:"change"选项是在改变时触发校验。你可以按如下方式加入选项：
当文字区域没有文字时，校验元件允许你设置一个提示信息，这通过提示选项参数。这个参数接收一个文字型值，当文字区域获得焦点或有一个默认值的时候，提示值自动消失。这个选项不依赖验证类型；你都可以进行定义：
校验元件允许显示输入的字符数。为了使用这个功能，你要在元件容器中TEXTAREA之后插入一个HTML标签，并设置一个唯一ID，建议使用<span>。然后需要在构造函数中加入两个参数counterType和counterId。
counterType 定义计数器的类型，有两种计数类型： "chars_count" 和 "chars_remaining".
- "chars_count" 显示已经输入的字符数。
-
当你有最大字符数目限制的时候，你可以使用 "chars_remaining" 来显示还剩余可以输入的字符数。
counterId 显示计数的HTML标签的ID。这个是必选参数。
下面是一个有计数器的例子：
注意属性可以用{}合并，以逗号分开。
Copyright © 2006. Adobe Systems Incorporated. All rights reserved.Localization(Chinese Simplified) by Dorian Lee
www.sprycn.com版权所有，转载请保留此信息。