Spry框架及验证构件.docxVIP

Spry 框架及验证构件 Spry 框架的原理 Spry 框架是一套包含 JavaScript 、CSS 和一些图片文件的客户端 JavaScript 库，支持 XML 数据集、动态区域、组件和动画效果。 Spry 框架原理如图 9-71 所示。 图 9-71 Spry 框架原理 虽然这些文件存放在服务器上，但实际上是被加载到浏览器中运行的。框架的用户将所有需要的文件链接到 HTML 文档中，以使用不同的组件，来获得更丰富的用户体验。 Spry 框架是和设计人员紧密相关的，因此框架中的每个元素都要遵循以下原则： 保持轻便 保持简洁 使用标准的技术 HTML、CSS 和 JavaScript 保持私有属性和语法最少化 尽可能减少教本编程 Spry 效果 Spry 效果是视觉增强功能，可以将它们应用于使用 JavaScript 的 HTML 页面上几乎所有的元素。效果通常用于在一段时间内高亮显示信息，创建动画过渡或者以可视方式修改 页面元素。设计者可以将效果直接应用于 HTML 元素，而无需其它自定义标签。 要向某个元素应用效果时，该元素当前必须处于选定状态，或者它必须具有一个 ID。例如，如果要向当前未选定的 div 标签应用高亮显示效果，该 div 必须具有一个有效的 ID 值。如果该元素尚且没有有效的 ID 值，将需要向 HTML 代码中添加一个 ID 值。 效果可以修改元素的不透明度、缩放比例、位置和样式属性（如背景颜色），以及可以组合两个或多个属性来创建有趣的视觉效果。 由于这些效果都基于 Spry，因此，当用户单击应用了效果的对象时，只有对象会进行动态更新，不会刷新整个 HTML 页面。 Spry 包括下列效果： 显示/渐隐 使元素显示或渐隐。 高亮颜色 更改元素的背景颜色。 向上遮帘/向下遮帘 模拟百叶窗，向上或向下滚动百叶窗来隐藏或显示元素。 上滑/下滑 上下移动元素。 增大/收缩 使元素变大或变小。 晃动 模拟从左向右晃动元素。 挤压 使元素从页面的左上角消失。 Spry 验证文本域构件 插入单击Spry 验证文本域构件是一个文本域，该域用于在站点访问者输入文本时显示文本的状态（有效或无效）。将光标置于文档中，单击【插入】面板中的【 Spry 验证文本域】按钮 ，即可插入一个 Spry 验证文本域构件，如图 9-67 所示。 插入 单击 图 9-67 插入 Spry 验证文本域构件 在已插入表单对象后，可单击相应的 在已插入表单对象后，可单击相应的 Spry 验证表单按钮，为表单添加 Spry 验证。如尚未为网页文档插入表单对象，则可直接将光标放置在需要插入 Spry 验证表单对象的位置，然后单 击相应的 Spry 验证表单按钮， Dreamweaver 会先插入表单，然后再为表单添加 Spry 验证。 在文档中插入 Spry 验证文本域后，单击蓝色的 Spry 文本域边框，在【属性】面板中可以设置 Spry 验证文本域的属性，如图 9-68 所示。 单击 单击 设置 图 9-68 设置属性 验证文本域构件具有许多状态（例如有效、无效或必需值等）用户可以根据所需的验证结果，使用【属性】面板来修改这些状态的属性，如表 9-1 所示。 表 9-1 Spry 文本域属性参数 名称 Spry 文本域 类型 初始状态 预 必需状态 状览 有效状态 状 态 焦点状态无效状态 验 onBlur 于证 onChange onSubmit 于 最小字符数状态最大字符数状态 最小值状态 最大值状态强制模式 功能 标识文本域的名称。该名称也是文本域的 ID 号。 确定该文本域需要验证的类型。 在浏览器中加载页面或用户重置表单时构件的状态。 当用户在文本域中没有输入必需文本时构件的状态。 当用户正确地输入信息且表单可以提交时构件的状态。当用户在构件中放置插入点时构件的状态。 当用户所输入文本的格式无效时构件的状态。（例如，用 06 而不是用 2006 表示年份。） 可以设置验证发生的时间（包括用户在构件外部单击时、输入内容时或尝试提交表单 时）。该项为“模糊”状态，即当用户在文本域的外部单击时验证。该项为“更改”状态，即当用户更改文本域中的文本时验证。 该项为“提交”状态，即当用户尝试提交表单时验证。 当用户输入的字符数少于文本域所要求的最小字符数时构件的状态。当用户输入的字符数多于文本域所允许的最大字符数时构件的状态。 当用户输入的值小于文本域所需的值时构件的状态。（适用于整数、实数和数据类型验证。） 当用户输入的值大于文本域所允许的最大值时构件的状态。（适用于整数、实数和数据类型验证。） 用户可以禁止在验证文本域构件中输入无效字符。 Spry 验证文本区域构件 Spry 验证文本区域构件也是一个文本区域， 该区域在用户输入几个