周欣然《网页设计技术与应用》第13章　使用Spry构件.pptVIP

第13章　使用Spry构件 　　　　本章重点：Spry折叠构件、菜单栏构件、验证文本域构件、验证复选框构件与重复区域构件等多种构件的使用方法 。 第13章　使用Spry构件 13.1 使用Spry构件——新功能展示 13.2 Spry构件 13.3 使用Spry显示数据 13.4 Spry效果 13.1 用“Spry”构件布局页面 13.1.1 案例综述 　　Spry功能不仅增加了页面的布局形式，简化并增强了表单的验证功能，还与XML数据相结合，方便构造动态数据显示。 13.1 用“Spry”构件布局页面 13.1.2 案例分析 　　该实例主要用于展示Spry构件的各种功能，其页面布局由四个部分组成，它们分别是： ① 页眉部分——表格中插入Banner图片； ② 导航部分——表格中插入Spry菜单栏； ③ 主要信息栏——表格中插入多种Spry构件。 ④ 页尾部分——版权信息。 13.1 使用“Spry”构件-----新功能展示 13.1.3 实现步骤 页面头部制作 导航栏制作（插入Spry菜单栏） 主要信息栏的制作 （1）插入“Spry折叠式” （2）插入“Spry选项卡式面板面板” （3）插入“Spry折叠面板” （4）使用“Spry验证表单域” 制作页面尾部 13.2 Spry构件 Spry框架支持一组用标准HTML、CSS和javaScript编写的可重用控件。常用的Spry控件有：Spry菜单栏、Spry选项卡式面板、Spry折叠式、Spry可折叠面板。 Spry 构件由以下几个部分组成： 构件结构:用来定义构件结构组成的 HTML 代码块。 构件行为:用来控制构件如何响应用户启动事件的 JavaScript。 构件样式:用来指定构件外观的 CSS。 13.2 Spry构件 13.2.1 Spry菜单栏 1．插入Spry菜单栏 ① “插入”栏|“Spry”类型|“Spry菜单栏”按钮 或 菜单栏“插入”|“布局对象”|“Spry菜单栏” 或 “插入”|“Spry”|“Spry菜单栏”命令。 ② 在弹出的“Spry菜单栏”对话框中选择“水平”或“垂直”，然后单击“确定”按钮。 13.2 Spry构件 13.2.1 Spry菜单栏 2．编辑Spry菜单栏属性 “菜单项”：单击列表框中的具体菜单项，在“文本”文本框中编辑输入文本即重新定义该列表项的内容。 “添加菜单项”按钮：表示为该菜单项添加了“子菜单”。 “删除菜单项”按钮：将该菜单项与“子菜单”同时删除。 “上移项”或“下移项”按钮：进行菜单项的显示排序。 “链接”：输入链接的目标页面地址，或者单击“浏览”按钮以浏览到相应的文件。 “目标”：指定要在何处打开所链接的页面。 13.2 Spry构件 13.2.1 Spry菜单栏 3．设置Spry菜单栏样式 设置方法：先选中要设置的菜单（单击选中）。然后在“属性”面板中选择“样式”就可以进行设置 13.2 Spry构件 13.2.2 Spry选项卡式面板 Spry选项卡面板是一组面板，用来将内容存储到紧凑的空间中。单击面板上的标签来隐藏或显示存储在选项卡式面板中的内容，单击不同的选项卡面板会相应地打开。 13.2 Spry构件 13.2.2 Spry选项卡式面板 1．插入选项卡式面板 ① “插入”栏|“Spry”类型|“Spry选项卡面板 ”按钮 或 菜单栏“插入”|“布局对象”|“Spry选项卡面板 ” 或 “插入”|“Spry”|“Spry选项卡面板 ”命令。 ②对于插入到网页中的“Spry选项卡式面板”，单击左上角的蓝色区域即表示选择了该“Spry选项卡式面板”，进行编辑操作。。 13.2 Spry构件 13.2.2 Spry选项卡式面板 2．设置选项卡式面板属性 ① 在“文档”窗口中单击选项卡左上角的蓝色区域选择该“Spry选项卡式面板”。 ② 在“属性”面板中，单击“添加面板”按钮或“删除面板”按钮。 ③在“属性”面板中，从“默认面板”下拉列表中选择默认情况下要打开的面板。 ④在“属性”面板中，通过“在列表中向上移动面板”按钮和“在列表中向下移动面板”按钮对页面中的“Spry选择卡”进行左右排序。 13.2 Spry构件 13.2.2 Spry选项卡式面板 3．编辑选项卡式面板 ① 将鼠标定位在选项卡标题所在区域即可对该标题进行编辑操作。 ② 对于插入到页面中各“Spry选项卡式面板”所对应的内容，鼠标移动到相应的“Spry选项卡”标题时，会显示“单击以显示面板内容”按钮，单击该按钮即可显示面板内容。 ③ 面板内容中所插入的内容与普通网页内容操作无异，如插入文本、图像、表格等。 13.2 Spry构件