Jun 16

[原]Spry框架:构件应用 晴

linuxing , 14:39 , 编程 » JavaScript , 评论(0) , 引用(0) , 阅读(12041) , Via 本站原创 | |
    上一篇日志介绍了如何在网页上应用各种Spry效果,这些效果是通过客户端JavaScript函数作用于HTML页面元素实现的。Spry构件则需要HTML、CSS和JavaScript的交互作用才能实现。在Spry构件中,HTML用于实现构件的层次结构,CSS用于定义构件的外观样式,JavaScript用于创建构件对象并将静态的HTML元素转换为具有交互性的用户界面元素。

一、Spry构件概述
构件(Widget)是各种Ajax框架的一个共同特征。严格地说,构件并未应用Ajax技术,即构件通常不适用XMLHTTP请求对象,但构件属于下一代Web用户界面,因此也把构件归类于“Ajax”。
Spry框架支持一组用标准HTML、CSS和JavaScript编写的可重用构件。在网页中可以采用最简单的HTML和CSS代码方便的插入这些构件,然后设置构件的样式。
Spry构件是一个页面元素,它通过启用用于交互来提供更丰富的用户体验。Spry构件由三部分组成:
引用
a、构件结构:用来定义构件结构组成的HTML代码块;
b、构件行为:用来控制构件如何响应用户启动事件的JavaScript;
c、构件样式:用来指定构件外观的CSS。

Spry框架中的每个构件都与唯一的CSS和JavaScript文件相关联。CSS文件中包含设置构件样式所需的全部信息,而JavaScript文件则赋予构件功能。对于一个给定构件都有相关联的CSS样式表文件和JavaScript脚本文件,它们都是根据该构件来命名的,例如,与折叠构件相关联的文件是SpryAccordion.css和SpryAccordion.js。

二、通过可视化方式插入Spry构件
从Dreamweaver CS3中,可以通过菜单或工具栏插入构件:
点击在新窗口中浏览此图片
点击对应的按钮,插入构件:
点击在新窗口中浏览此图片
插入构件后,可以在属性检查器中设置相关属性,并通过样式面板对默认的样式进行修改,若构件为折叠等带隐含页面的外观,可用鼠标移动到相应面板的右下角处,自动显示“眼睛”的图标后,点击它即可切换到对应的面板上。

三、通过修改代码强化Spry构件
Spry构件设计的代码量比较大,而且不同的构建其使用的HTML代码块并不相同,因此,我们更多的是修改已插入的Spry构件,而完成可视化工具没有提供的功能。例如:设置构件的宽度、在菜单栏构件添加更多级别的子菜单。
菜单栏构件提供两种:水平菜单栏构件和垂直菜单栏构件。它们使用不同的CSS样式表。
1、添加JavaScript和CSS标记
插入菜单栏构件后,会自动在页面首部添加JavaScript和CSS标记:

<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

※ 在link标记中指定的SpryMenuBarHorizontal.css仅用于定义水平菜单栏构件的CSS规则。而垂直菜单栏构件则应为SpryMenuBarVertical.css的CSS文件

2、HTML代码
菜单栏构件使用ul和li标记表示每个菜单项。最外层容器元素是一个ul 标记,并且设定了一个id属性,以便下面的利用JavaScript代码,把静态的HTML代码转换为交互式的页面元素。
在首层ul标记中对于每个顶级菜单项都包含一个li 标记,而顶级菜单项(li 标记)又包含用来为每个菜单项定义子菜单的ul 和li 标记,子菜单中同样可以包含子菜单。顶级菜单和子菜单可以包含任意多个子菜单项。

<ul id="MenuBar1" class="MenuBarHorizontal">
  <li><a class="MenuBarItemSubmenu" href="#">项目 1</a>
      <ul>
        <li><a href="#">项目 1.1</a></li>
        <li><a href="#">项目 1.2</a></li>
        <li><a href="#">项目 1.3</a></li>
      </ul>
  </li>
  <li><a href="#">项目 2</a></li>
  <li><a class="MenuBarItemSubmenu" href="#">项目 3</a>
      <ul>
        <li><a class="MenuBarItemSubmenu" href="#">项目 3.1</a>
            <ul>
              <li><a href="#">项目 3.1.1</a></li>
              <li><a href="#">项目 3.1.2</a></li>
            </ul>
        </li>
        <li><a href="#">项目 3.2</a></li>
        <li><a href="#">项目 3.3</a></li>
      </ul>
  </li>
  <li><a href="#">项目 4</a></li>
</ul>

3、转为JavaScript对象
如果要实现交互式的效果,就必须把静态的HTML代码转换为一个具有交互性的用户界面组件。这些代码,必须放在HTML代码的后面。通过new运算符和Spry.Widget.MenuBar构造函数创建一个JavaScript对象,调用这个构造函数时,需要传递两个参数,第一个参数时菜单栏构件最外层容器的ID,第二个参数以一个对象直接量出现,其中imgDown和imgRight属性分别指定一个小图片的URL,可显示在菜单栏中。

<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>

4、CSS代码
在SpryMenuBarHorizontal.css和SpryMenuBarHorizontal.css文件中,包含用于设置菜单栏构件的CSS规则。通过编辑这些规则可以设置菜单栏的外观样式。这些CSS文件中的类名直接对应于菜单栏构件的HTML代码中指定的类名。
当然,也可以使用自己的类名来替换这些CSS文件中与样式相关的类名,这是不会影响菜单栏构件的功能的,仅是外观而已。
如希望在菜单栏文字前面或后面添加图片,修改背景颜色,那修改CSS或添加新的CSS类属性,就是最方便的做法。
演示:
Windows Media Player文件

代码:

四、其他Spry构件
Dreamweaver CS3 只为Spry 1.4构件提供了可视化设计工具,但Spry 1.6提供的几个Spry构件,包括滑动面板、HTML面板和工具提示等都需要手动编写代码。
这几个代码都是通过把静态HTML代码的div块,并根据特定的构件标记ID转换为JavaScript对象实例,然后调用对应的实例方法以实现交互的效果。具体可查看Spry 1.6.1自带说明。
Tags:
发表评论
表情
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
打开HTML
打开UBB
打开表情
隐藏
记住我
昵称   密码   游客无需密码
网址   电邮   [注册]