重用aculo Effect脚本实例

基于JSPackager的开发可以分两种开发角色 :

类库开发者: 开发出方便实用的脚本库,定义脚本依赖.
类库使用者: 导入前者定义的函数/类(这时无需关系其依赖的其他脚本了),像普通js库一样使用.

右边是一个菜单折叠效果。是通过重用aculo Effect脚本实现的.

为此我们需要做如下工作:

类库开发者：

创建自己的effect包（example）：
package定义文件/scripts/example/__$package.js //添加slidePanel（滑动面板控制）函数 this.addScript("effect.js","slidePanel"); //给effect.js脚本添加对us.aculo.script包中effects.js脚本的装载期依赖 this.addScriptDependence("effect.js","us/aculo/script/effects.js",true);

脚本实现（/scripts/example/effect.js）：

/**
 * 滑动面板实现.
 * 当指定元素可见时，将其第一个子元素向上滑动至完全被遮掩（折叠）。
 * 当指定元素不可见时，将其第一个子元素向下滑动至完全显示（展开）。
 */
function slidePanel(panel){
  panel = document.getElementById(panel);
  if(panel.style.display=='none'){
    //调用Scriptaculous Effect的具体滑动展开实现
    new Effect.SlideDown(panel);
  }else{
    //调用Scriptaculous Effect的具体滑动闭合实现
    new Effect.SlideUp(panel);
  }
}

类库使用者：

test.html中引入引导脚本：script/boot.js,
添加包导入语句：$import("example.slidePanel");
在折叠面板的title上加上 onclick="slidePanel('panel1')"

详细文档请参阅用户指南类似实例