Spry框架及验证构件

Spry框架及验证构件

1．Spry框架的原理

Spry框架是一套包含JavaScript、CSS和一些图片文件的客户端JavaScript库，支持XML数据集、动态区域、组件和动画效果。Spry框架原理如图9-71所示。

图9-71 Spry框架原理

虽然这些文件存放在服务器上，但实际上是被加载到浏览器中运行的。框架的用户将所有需要的文件链接到HTML文档中，以使用不同的组件，来获得更丰富的用户体验。

Spry 框架是和设计人员紧密相关的，因此框架中的每个元素都要遵循以下原则：

●保持轻便

●保持简洁

●使用标准的技术HTML、CSS和JavaScript

●保持私有属性和语法最少化

●尽可能减少教本编程

2．Spry效果

Spry效果是视觉增强功能，可以将它们应用于使用JavaScript的HTML页面上几乎所有的元素。效果通常用于在一段时间内高亮显示信息，创建动画过渡或者以可视方式修改页面元素。设计者可以将效果直接应用于HTML元素，而无需其它自定义标签。

要向某个元素应用效果时，该元素当前必须处于选定状态，或者它必须具有一个ID。例如，如果要向当前未选定的div标签应用高亮显示效果，该div必须具有一个有效的ID 值。如果该元素尚且没有有效的ID值，将需要向HTML代码中添加一个ID值。

效果可以修改元素的不透明度、缩放比例、位置和样式属性（如背景颜色），以及可以组合两个或多个属性来创建有趣的视觉效果。

由于这些效果都基于Spry ，因此，当用户单击应用了效果的对象时，只有对象会进行动态更新，不会刷新整个HTML 页面。

Spry 包括下列效果：

● 显示/渐隐 使元素显示或渐隐。

● 高亮颜色 更改元素的背景颜色。

● 向上遮帘/向下遮帘 模拟百叶窗，向上或向下滚动百叶窗来隐藏或显示元素。 ● 上滑/下滑 上下移动元素。

● 增大/收缩 使元素变大或变小。

● 晃动 模拟从左向右晃动元素。

● 挤压 使元素从页面的左上角消失。

1．Spry 验证文本域构件

Spry 验证文本域构件是一个文本域，该域用于在站点访问者输入文本时显示文本的状态（有效或无效）。将光标置于文档中，单击【插入】面板中的【Spry

验证文本域】按钮

，即可插入一个Spry 验证文本域构件，如图9-67所示。

图9-67 插入Spry 验证文本域构件

在文档中插入Spry 验证文本域后，单击蓝色的Spry 文本域边框，在【属性】面板中可以设置Spry 验证文本域的属性，如图9-68所示。

单击

插入

图9-68 设置属性

验证文本域构件具有许多状态（例如有效、无效或必需值等）用户可以根据所需的验证结果，使用【属性】面板来修改这些状态的属性，如表9-1所示。

表9-1 Spry 文本域属性参数

2．Spry 验证文本区域构件

Spry 验证文本区域构件也是一个文本区域，该区域在用户输入几个文本句子时显示文本的状态（有效或无效）。如果文本区域是必填域，而用户没有输入任何文本，该构件将返回一条消息，声明必须输入值。

将光标置于在文档中，单击【插入】面板中的【Spry 验证文本区域】按钮

，即可插入一个Spry 验证文本区域构件同，如图9-69所示。 单击

设置

单击

插入

图9-69 插入Spry验证文本区域构件

在文档中选择蓝色的Spry文本区域后，即可在【属性】面板中设置Spry验证文本区域的属性，如图9-70所示。

设置

单击

图9-70 设置属性

在Spry验证文本区域的【属性】面板中，比Spry验证文本域增加了两个选项。

●计数器

计数器是一个单选按钮组，提供了3种选项供用户选择。当用户选择“无”时，将不在Spry验证结果的区域显示任何内容。

如用户选择“字符计数”，则Dreamweaver会为Spry验证区域添加一个字符技术的脚本，显示文本区域中已输入的字符数。

当用户设置了最大字符数之后，Dreamweaver将允许用户选择“其余字符”选项，以显示文本区域中还允许输入多少字符。

●禁止额外字符

如用户已设置最大字符数，则可选择“禁止额外字符”复选框。其作用是防止用户在文本区域中输入的文本超过最大字符数。

当选择该复选框后，如用户输入的文本超过最大字符数，则无法再向文本区域中输入

新的字符。