《016添加Spry构件和行为效果.ppt》由会员分享，可在线阅读，更多相关《016添加Spry构件和行为效果.ppt（19页珍藏版）》请在三一文库上搜索。
1、第16章 添加Spry构件和行为效果 重点内容： 使用Spry显示数据 使用各种Spry验证表单元素 向网页中添加Spry菜单栏构件 向网页中添加Spry选项卡式面板构件 向网页中添加Spry折叠式构件 向网页中添加Spry可折叠式面板构件,一、 关于Spry构件和行为效果 Spry构件是预置的一组用户界面组件，可以使用CSS自定义这些组件，然后将其添加到网页中，通过启用用户交互来提供更丰富的用户体验。Spry构件由以下3部分组成: （1）构件结构：用来定义构件结构组成的HMTL代码块。 （2）构件行为：用来控制构件如何响应用户启动事件的JavaScript。 （3）构件样式：用来指定构件外观
2、的CSS。,二、 添加Spry构件 1.插入Spry构件 在“插入记录”|“Spry”子菜单中选择要插入的Spry构件名称，或者通过“Spry”工具栏插入Spry构件。,“Spry”工具栏,二、 添加Spry构件 2.使用Spry显示数据 Spry XML数据集:选择“插入记录”|“Spry”| “Spry XML数据集”命令，打开“Spry XML数据集”对话框。进行设置后，单击“确定”按钮将数据集与页面相关联。与此同时，“应用程序”面板的“绑定”面板中显示出该数据集的所有数据。,二、 添加Spry构件 2.使用Spry显示数据 Spry区域构件:要插入Spry区域构件，可选择“插入记录”|
3、“Spry”|“Spry区域”命令，打开“插入Spry区域”对话框，进行所需的设置。,二、 添加Spry构件 2.使用Spry显示数据 Spry重复项构件:要插入Spry重复项构件，选择“插入记录”|“Spry”|“Spry重复项”命令，打开“插入Spry重复项”对话框，进行所需的设置。,二、 添加Spry构件 2.使用Spry显示数据 Spry重复列表构件:选择“插入记录”|“Spry”| “Spry重复列表”命令，打开“插入Spry重复列表”对话框，完成相关设置后单击“确定”按钮，会打开一个提示对话框，提示用户需要添加Spry区域，单击“确定”按钮后，即可在页面上显示重复列表区域。,二、
4、添加Spry构件 2.使用Spry显示数据 Spry表构件:选择“插入记录”|“Spry”|“Spry表”命令，打开“插入Spry表”对话框，完成相关设置后单击“确定”按钮，会打开一个提示对话框，提示用户需要添加Spry区域。单击“是”按钮后，将在文档中插入一个表格。,二、 添加Spry构件 3.使用Spry验证文本域构件 插入Spry验证文本域构件选择表单中的文本域，然后选择“插入记录”|“Spry”|“Spry验证文本域”命令，即可插入一个Spry验证文本域构件。使用属性检查器中的各选项可设置不同的验证值。,二、 添加Spry构件 4.使用Spry验证文本区域构件 选择表单中的文本域，然后
5、选择“插入记录”| “Spry”|“Spry验证文本区域”命令，插入Spry验证文本区域构件。选择验证文本区域构件后，使用属性检查器中的各选项可设置不同的验证值。,二、 添加Spry构件 5.使用Spry验证选择构件 选择表单中的下拉列表框，然后选择“插入记录” |“Spry”|“Spry验证选择”命令，插入Spry验证选择构件。选择表单中的内验证选择构件后，使用属性检查器中的各选项可设置不同的验证值。,二、 添加Spry构件 6.使用Spry验证复选框构件 选择表单中的复选框，然后选择“插入记录”| “Spry”|“Spry验证复选框”命令，即可插入Spry验证复选框构件。,二、 添加Spr
6、y构件 7.使用Spry菜单栏构件 选择“插入记录”|“Spry”|“Spry菜单栏”命令，可插入Spry水平菜单栏构件和垂直菜单栏构件。,水平菜单栏构件,垂直菜单栏构件,二、 添加Spry构件 8.使用Spry选项卡式面板构件 选择“插入记录”|“Spry”|“Spry选项卡式面板”命令，插入Spry选项卡式面板构件。 9.使用Spry折叠式构件 选择“插入记录”|“Spry”|“Spry折叠式”命令，插入Spry折叠式构件。,二、 添加Spry构件 10.使用Spry可折叠面板构件 可折叠面板构件是一个面板，可将内容存储到紧凑的空间中。用户单击构件的标签即可隐藏或显示存储在可折叠面板中的内
7、容。 选择“插入记录”|“Spry”|“Spry可折叠面板”命令，插入Spry 可折叠面板构件。 选择Spry可折叠式面板构件后，使用属性检查器中的各选项可设置不同的参数值。,三、 添加行为效果 增大/收缩：使对象变大或变小。 挤压：使对象从页面的左上角消失。 显示/渐隐：使对象显示或渐隐。 晃动：模拟从左向右晃动对象。 滑动：上下移动对象。 遮帘：模拟百页窗，向上或向下滚动来隐藏或显示对象。 高亮颜色：更改对象的背景颜色。,三、 添加行为效果 1.应用行为效果 选择要应用行为效果的对象，展开“行为”面板，单击“添加行为”按钮从弹出的下拉菜单中打开“效果”子菜单，从其中选择要应用的各种效果。 2.删除行为效果 如果要删除某对象的行为 效果，可先选择该对象，然后 打开“行为”面板，选择列表 框中要删除的效果，单击“删除事件”按钮即可。,四、 思考 如何创建绑定数据集？ 如何向Spry文本区域中添加数据？ 如何添加挤压行为效果？ 如何设置Spry验证复选框构件？ 如何创建Spry可折叠面板构件？,本章小结： 掌握使用Spry构件显示数据的方法。 掌握使用Spry构件验证表单元素的方法。 了解使用Spry构件创建菜单栏、选项卡式面板、折叠式面板、可折叠面板的方法。 了解为页面元素添加各种行为效果的方法。,