spry框架.pptVIP

Spry框架技术 主要内容 Spry菜单栏 Spry 选项卡面板 Spry 折叠式 Spry 可折叠面板 什么是Spry框架 Spry菜单栏 Spry菜单栏 插入Spry菜单栏 实例演示 Spry菜单栏 设置菜单栏属性 实例演示 Spry菜单栏 自定义菜单项样式 实例演示 Spry菜单栏 设置菜单项的尺寸 实例演示 Spry选项卡面板 Spry选项卡面板 实例演示 Spry折叠式面板 Spry折叠式面板 实例演示 Spry可折叠面板 Spry可折叠面板 实例演示 实现文字滚动 marquee标签介绍： （1）Behavior（行为）属性,设定内容的滚动方式。有三个选项：Scroll（滚动）、slide（滑入）、alternate（交替） （2）Direction（方向）属性：up（向上）down（向下）left（向左）、right（向右） （3）scrolldelay：控制每一次移动的时间间隔，单位为毫秒，数值越小，移动越快，且更平滑。 （4）scrollamount：控制每一次移动的像素数，数值越大，移动越快。 实现文字滚动 例1:MARQUEE scrollAmount=2 scrollDelay=75 热烈祝贺十一届全国人大一次会议 全国政协十一届一次会议隆重召开 /MARQUEE 例2:marquee onMouseOver=this.stop() onMouseOut=this.start() scrollamount=2 scrolldelay=75 direction=up height=70 1、栏目1 2、栏目2 3、栏目3 /marquee 实作练习： * * Spry 框架是一个 JavaScript 库，Web 设计人员使用它可以构建能够向站点访问者提供更丰富体验的 Web 页。有了 Spry，就可以使用 HTML、CSS 和极少量的 JavaScript 将 XML 数据合并到 HTML 文档中，创建构件（如折叠构件和菜单栏、Spry选项卡式面板等），向各种页面元素中添加不同种类的效果。 1、插入Spry菜单栏 是一组可导航的菜单按钮，可创建子菜单 方法：插入—布局—Spry菜单栏 注意（1）插入spry构件前，页面必须先保存，否则会弹出提示对话框。（2）插入spry菜单后保存页面，会自动保存生成的js文件和图片文件到SpryAssets文件夹中 图示： 保存页面时弹出 2、设置菜单栏属性 选中插入的spry菜单栏——属性面板中设置相关信息 属性面板中可设置三级菜单，如果要设置更多子菜单，可在代码中添加 3、自定义菜单项样式 （1）禁用菜单样式 （2）修改自动生成的css文档代码 4、设置菜单项的尺寸 选中菜单栏中的某一个——属性面板中设置 说明：1em指一个字体大小，默认8em，也可在css中修改相应的li的属性 1、插入Spry选项卡式面板 是一组面板，用来将内容放置在紧凑的空间中 方法：插入—布局—Spry选项卡面板 2、属性设置 3、自定义样式 4、面板宽度设置 1、插入Spry折叠式面板 一级可折叠的面板，用来将大量内容放置在紧凑的空间中 方法：插入—布局—Spry折叠式 2、属性设置 3、自定义样式 4、面板宽度设置 1、插入Spry可折叠式面板 是一个面板，可将页面内容放置于一个紧凑的小空间中 方法：插入—布局—Spry可折叠面板 2、属性设置 3、自定义样式 4、面板宽度设置 *