ln项目中小框架动态向上收缩效果实现

       这次在完成ln项目中学习了不少东西，我负责的是开发界面的部分，使用的开发软件是Dreamweaver CS5，这款软件是一款非常不错的开发原型的工具，它不仅可以让你快速的拖放控件到指定的位置，还可以让你随意更改界面代码部分，有些轻微的操作，鼠标不能完成的，可以通过修改代码来快速的实现，它是一款很不错的视觉化编辑与原始码编辑同步的设计工具。好了再说多了就有点做广告的嫌疑了，下面我主要介绍一下我用它解决的一些技术性的问题。

       一、fieldset（字段集）的动态收缩效果

       首先说一下思想来源：fieldset在dreamweaver里是不可以直接通过鼠标操作来实现动态收缩效果的（至少我还没有发现）。dreamweaver可以给div添加动态效果（比如：挤压、滑动和遮帘等），实现起来很简单（下面我还会具体介绍），实现了动态效果之后，我看看了代码，发现最主要的一步操作是软件的标签检查器会自动找到div标签的id，而找不到fieldset标签的id，我就想如果我先给div加上动态效果后，然后在代码里将其id赋值给fieldset的id，到那时就会是js文件和标签的关系了，js写的函数会不会也像dreamweaver软件的标签检查器一样，区分div和fieldset？结果试了之后发现，js不管是哪个标签的id都识别，就这样，我轻松的得到了能够给fieldset添加动态效果的代码。

       其次具体介绍一下实现的步骤：

       1）、我们在页面上放一个div，然后给他一个id，到页面上选择你要添加效果的按钮，再到标签检查器里找到行为--效果--具体选择的效果，点击后会出来提示框，如下图所示：





       2）、  进行相关设置后如下图（具体的值可以自己定）：


   
       3）、最后点击确定按钮，然后保存全部，这时工程会多出一个js文件，是dreamweaver自动为我们添加的，我们不需要管它里面到底是什么，知道它是实现这些效果的javascript代码就可以了。下面展示一下实现后的效果图：
收缩前的效果



收缩后的效果



      最后将源码分享给大家：
      1）、这是调用js文件的代码和需要添加的方法，这段代码需要放在头部位置，SpryEffects.js文件需要拷贝到指定的文件夹，注意文件引用的路径。

<script src="js/SpryEffects.js" type="text/javascript"></script>
<script type="text/javascript">
function MM_effectBlind(targetElement, duration, from, to, toggle)
{
Spry.Effect.DoBlind(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
}
</script>

      2）、这是fieldset的代码，这段代码需要放在body里，注意id的命名必须和方法里的名字一样。

<fieldset id="angentInfo" class="jsFrame">
<legend>
<img src="image/flag.png" onclick="MM_effectBlind('angentInfo', 1000, '100%', '20%', true)"/>
<span class="jstitle">用户确认信息</span>
</legend>
<table class="comtable">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</fieldset>