资源描述:
《添加Spry构件和行为效果》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库。
1、第16章添加Spry构件和行为效果重点内容:使用Spry显示数据使用各种Spry验证表单元素向网页中添加Spry菜单栏构件向网页中添加Spry选项卡式面板构件向网页中添加Spry折叠式构件向网页中添加Spry可折叠式面板构件一、关于Spry构件和行为效果Spry构件是预置的一组用户界面组件,可以使用CSS自定义这些组件,然后将其添加到网页中,通过启用用户交互来提供更丰富的用户体验。Spry构件由以下3部分组成:(1)构件结构:用来定义构件结构组成的HMTL代码块。(2)构件行为:用来控制构件如何响应用户启动事件的JavaScript。(3)构件样式:用来指
2、定构件外观的CSS。二、添加Spry构件1.插入Spry构件在“插入记录”
3、“Spry”子菜单中选择要插入的Spry构件名称,或者通过“Spry”工具栏插入Spry构件。“Spry”工具栏二、添加Spry构件2.使用Spry显示数据SpryXML数据集:选择“插入记录”
4、“Spry”
5、“SpryXML数据集”命令,打开“SpryXML数据集”对话框。进行设置后,单击“确定”按钮将数据集与页面相关联。与此同时,“应用程序”面板的“绑定”面板中显示出该数据集的所有数据。二、添加Spry构件2.使用Spry显示数据Spry区域构件:要插入Spry区域构件,可选择
6、“插入记录”
7、“Spry”
8、“Spry区域”命令,打开“插入Spry区域”对话框,进行所需的设置。二、添加Spry构件2.使用Spry显示数据Spry重复项构件:要插入Spry重复项构件,选择“插入记录”
9、“Spry”
10、“Spry重复项”命令,打开“插入Spry重复项”对话框,进行所需的设置。二、添加Spry构件2.使用Spry显示数据Spry重复列表构件:选择“插入记录”
11、“Spry”
12、“Spry重复列表”命令,打开“插入Spry重复列表”对话框,完成相关设置后单击“确定”按钮,会打开一个提示对话框,提示用户需要添加Spry区域,单击“确定”按钮后,即可
13、在页面上显示重复列表区域。二、添加Spry构件2.使用Spry显示数据Spry表构件:选择“插入记录”
14、“Spry”
15、“Spry表”命令,打开“插入Spry表”对话框,完成相关设置后单击“确定”按钮,会打开一个提示对话框,提示用户需要添加Spry区域。单击“是”按钮后,将在文档中插入一个表格。二、添加Spry构件3.使用Spry验证文本域构件插入Spry验证文本域构件选择表单中的文本域,然后选择“插入记录”
16、“Spry”
17、“Spry验证文本域”命令,即可插入一个Spry验证文本域构件。使用属性检查器中的各选项可设置不同的验证值。二、添加Spry构件4.使用
18、Spry验证文本区域构件选择表单中的文本域,然后选择“插入记录”
19、“Spry”
20、“Spry验证文本区域”命令,插入Spry验证文本区域构件。选择验证文本区域构件后,使用属性检查器中的各选项可设置不同的验证值。二、添加Spry构件5.使用Spry验证选择构件选择表单中的下拉列表框,然后选择“插入记录”
21、“Spry”
22、“Spry验证选择”命令,插入Spry验证选择构件。选择表单中的内验证选择构件后,使用属性检查器中的各选项可设置不同的验证值。二、添加Spry构件6.使用Spry验证复选框构件选择表单中的复选框,然后选择“插入记录”
23、“Spry”
24、“Spry验证
25、复选框”命令,即可插入Spry验证复选框构件。二、添加Spry构件7.使用Spry菜单栏构件选择“插入记录”
26、“Spry”
27、“Spry菜单栏”命令,可插入Spry水平菜单栏构件和垂直菜单栏构件。水平菜单栏构件垂直菜单栏构件二、添加Spry构件8.使用Spry选项卡式面板构件选择“插入记录”
28、“Spry”
29、“Spry选项卡式面板”命令,插入Spry选项卡式面板构件。9.使用Spry折叠式构件选择“插入记录”
30、“Spry”
31、“Spry折叠式”命令,插入Spry折叠式构件。二、添加Spry构件10.使用Spry可折叠面板构件可折叠面板构件是一个面板,可将内容存储
32、到紧凑的空间中。用户单击构件的标签即可隐藏或显示存储在可折叠面板中的内容。选择“插入记录”
33、“Spry”
34、“Spry可折叠面板”命令,插入Spry可折叠面板构件。选择Spry可折叠式面板构件后,使用属性检查器中的各选项可设置不同的参数值。三、添加行为效果增大/收缩:使对象变大或变小。挤压:使对象从页面的左上角消失。显示/渐隐:使对象显示或渐隐。晃动:模拟从左向右晃动对象。滑动:上下移动对象。遮帘:模拟百页窗,向上或向下滚动来隐藏或显示对象。高亮颜色:更改对象的背景颜色。三、添加行为效果1.应用行为效果选择要应用行为效果的对象,展开“行为”面板,单击“添加行
35、为”按钮从弹出的下拉菜单中打开“效果”子菜单,从其中选择要应用的各