Spry 组件 是一个包含内建行为的页面元素，它提供给用户更好的用户交互体验。这些行为包括使用户显示或隐藏页面内容，改变页面的呈现样式，与菜单元素交互，还有其他更多的功能。

Spry 框架支持一组可重用的组件，由标准的HTML,CSS,Javascript构成。你可以方便地将这些组件加入到页面中然后以自己的方式进行样式设置。

Spry 框架的每个组件都关联着唯一的CSS和Javascript 文件。CSS文件包括格式化组件的所有定义，Javascript 文件则提供功能性教本。你必须将这两个文件链接到使用组件的页面上，否则将不会由任何样式或功能。获取更多的信息，请参阅后面的链接相关文件的话题。

组 件所关联的CSS和Javascript 文件同组件是同名的，这样就很容易知道哪个文件用于哪个组件。（例如，关联折叠菜单（Accordion）的CSS和Javascript文件被命名为 SpryAccordion.css 和 SpryAccordion.js)Spry widgets 关联文件放在 widgets/accordion 目录中。

• 选择校验元件的结构
• 选择校验元件的样式
• 使用选择校验元件
• 选择校验元件的行为

选择校验元件的结构

一个列表校验元件是一个可以提供对选定项目进行校验的select元件。当校验触发，如果选择的项目不符合要求，用户将接到一个视觉反馈。
你只需要一个简单的选择框就可以通过一些简单的元素将其变为spry元件。

下面是一个展开的元件：

你可以通过给SELECT增加一个容器来创建一个元件。这个容器有一个唯一的ID。如果不使用容器，唯一ID应该加在SELECT标签上。

选单校验元件有一组默认的状态。这些状态用来描述在校验进行时的元件的状态。一个或多个状态可以在任何时刻应用到选单校验元件，这基于校验的结果和其它的一些事件。

选单校验元件可以有下面的状态：

• Initial state – 初始状态，当页面加载完成或表单被重置。
• Required state - 必选状态，声明了当表单提交时，没有选项被选中，或值为空。
• Invalid state - 错误状态，声明了当表单提交时，选择的项目为错误值（由用户定义）
• Valid state - 正确状态，确认选中值是正确的。
• Focus state – 焦点状态，当选单获得焦点时的状态。

当元件进入了一个状态或获得焦点，一个特定的CSS样式被应用到HTML容器。每种状态的样式定义存在于SpryValidationSelect.css文件中。

错误信息通过增加一个span标签（或其它标签）来放置信息文字。通过增加CSS样式，你可以默认隐藏错误信息，只有当元件状态改变时容器将应用特定的样式。

下面的图示演示了一些状态：

你可以改变选单校验元件各种状态的样式文件。例如，如果你想修改一个状态背景颜色，你可以修改SpryValidationSelect.css中相应的样式规则或者增加新的规则

HTML中也包含<script>标签。头部的脚本定义了校验元件的所有函数。后面的脚本包含了元件的构造函数。

上面的代码，你可以看到构造函数的参数：HTML的容器ID。

同时错误信息的SPAN标签也有样式。信息通过触发不同的状态应用不容的CSS来显示或隐藏。

选单校验元件的结构

上面的例子中，SPAN被用于创建选单元件结构。

• 容器 <SPAN id="container">
  • SELECT 标记
  • 错误信息 <SPAN>

除了SPAN你可以使用其它的标签，因为算法通过容器ID来识别元件并且错误信息是使用CSS样式表显示。

元件的实例化将HTML元素的ID传递给构造函数，然后查找容器中的需要校验的SELECT元件标签。如果传递给构造函数的是SELECT标签的ID，它将直接使用这个元素触发校验。然而，由于没有外部容器标签，所以不能使用错误信息，不同的CSS规则将触发不同的状态。

• <SELECT id="container"> tag

注意：一个容器中只能有一个SELECT元素。

选单校验元件的CSS

SpryValidationSelect.css 包含了选单元件使用的各种状态的样式。样式名对应HTML中使用的错误信息的样式名。然而，如果父级容器有状态样式，那么样式选择器更复杂一些。

SpryValidationSelect.css：

.selectRequiredMsg, .selectInvalidMsg { display: none;}.selectRequiredState .selectRequiredMsg,.selectInvalidState .selectInvalidMsg { display: inline; color: #CC3333; border: 1px solid #CC3333;}.selectValidState select, select.selectValidState { background-color: #B8F5B1;}select.selectRequiredState, .selectRequiredState select,select.selectInvalidState, .selectInvalidState select { background-color: #FF9F9F;}.selectFocusState select, select.selectFocusState { background-color: #FFFFCC;}

使用选单校验元件

这个部分包含两个部分：

• 插入一个选单校验元件
• 改变选单校验元件的样式

插入一个选单校验元件

1. 将SpryValidationSelect.js 加入你的站点。这个文件在widgets/ValidationSelect目录下。例如，在站点的根目录创建一个叫“includes”，将 SpryValidationSelect.js上传置这个目录中。SpryValidationSelect.js包含所有需要的代码。

2. 将 SpryValidationSelect.css文件加入到你的站点。你可以将其放在主目录或CSS目录下。

3. 在页面代码中，在头部链接SpryValidationSelect.js文件:

4. 在页面代码中，在头部链接SpryValidationSelect.css文件:

5. 插入一个选单元件。

6. 增加下面的项目：

7. 在SELECT外加入一个span容器。

8. 在元件的HTML代码后加入如下JS初始化代码：

重要的是你需要确定ID和 Spry.Widget.ValidationSelect方法中使用的ID相同。确定JavaScript在HTML代码后执行。

9. 保存页面。下面是全部代码：

改变选单校验元件的样式

选单校验元件有一个 SpryValidationSelect.css文件提供必要的样式。你可以随喜好修改对应的样式。

改变选单校验元件的样式就是你可以修改默认的样式。在SpryValidationSelect.css文件中你将发现所有的需要修改的样式。

要改变选单校验元件的外观：

1. 打开SpryValidationSelect.css。你可以在widgets/select目录中找到这个文件。
2. 找到想要改变的样式。例如，你希望改变必选状态的样式，你需要编辑 .selectRequiredState规则。
3. 保存修改。

SpryValidationSelect.css 文件中有详细的注释，解释了各个样式的用途。

选单校验元件的行为

选单校验元件的行为包括当校验时改变CSS样式名，不允许用户提交非法数值。

例如，当用户试图提交一个空值，提交被拦截，必选样式被用于元件容器。用户可以看到一个视觉提示或错误信息。选单校验元件都具有这些行为。若不需要这些行为，只要将相应CSS留空就可以了。这些样式有一些默认的属性，但是你也可以加入一些新的属性。

改变选单校验元件的行为：

1. 打开SpryValidationSelect.css文件。你可以在widgets/ValidationSelect目录中找到。

2. 找到要修改的样式。选单校验元件内置了一些状态样式，可以对元素（错误信息元素）增加这些状态。
   下面的的样式定义了校验元件的相关样式：

3. 任意修改或增加CSS规则。

你不可以重命名或重置SpryValidationSelect.css中的样式名，因为这些样式名在框架中已经写死。不过你可以通过在构造函数中将自定义的样式名作为参数传递给元件。下面是如何改变必选样式名的例子：

将选单校验元件作为非必选

为了允许用户提交空值，元件应该有'{isRequired:false}' 参数，默认值为'true'：这意味着空值是不允许被提交的。然而，将isRequired属性设为'false'，就可以改变元件的默认校验行为了。

使选单校验元件不接受标记为错误的值

有时你不希望提交一些你认为是错误的值。这可以通过加入invalidValue选项。有了这个选项，你可以定义一个错误的值，这个值不能通过校验。相对应的CSS样式是selectInvalidState。例如，我们可以将分隔符的值定义为'-1'。代码如下：