的成功，离不开它那个庞大的类库，不单是sun的类库，很多细节的实现都取自第三方（如xml解析采用Apache的实现）。
JSI暂时不大算编写丰富的公共API，但是我们可以集成其他成熟的类库，同时隔离他们的依赖，隔离各个脚本的执行上下文，消除命名冲突的危险。
这里我们详细介绍一个复杂一点的实例：类似 XP文件浏览器左侧的滑动折叠面板(任务菜单)效果。
我们先集成Scriptaculous Effect类库，并且在这个基础上按我个人的习惯对一个面板折叠效果做一个简单的封装，展示框架的类库封装功能。
1。集成Scriptaculous类库：
这里我们不做过多介绍，详细情况请参考集成实战；我们发布的版本中已经把Scriptaculous放置于us.aculo.script包中，您可以把这些作为系统内置的类库使用。
2。编写我们的折叠面板函数（example/effect.js）：
/**
* 滑动面板实现.
* 当指定元素可见时，将其第一个子元素向上滑动至完全被遮掩（折叠）。
* 当指定元素不可见时，将其第一个子元素向下滑动至完全显示（展开）。
*/
function slidePanel(panel){
panel = $(panel);
if(panel.style.display=='none'){
//调用Scriptaculous Effect的具体滑动展开实现
new Effect.SlideDown(panel);
}else{
//调用Scriptaculous Effect的具体滑动闭合实现
new Effect.SlideUp(panel);
}
}
3。编写包定义脚本（example/__$package.js）：
//添加slidePanel（滑动面板控制）函数
this.addScript("effect.js","slidePanel",null);
//给effect.js脚本添加对us.aculo.script包中effects.js脚本的装载后依赖this.addScriptDependence("effect.js",
"us/aculo/script/effects.js",false);
4。在网页上运用上面的类库：
<html>
<head>
<title>重用aculo Effect脚本实例title>
<link rel="stylesheet" type="text/css" href="/styles/default.css" />
<script src="/scripts/boot.js">script>
<script>![]()
$import("example.slidePanel");
script>
head>
<body>
<div class="menu_header"
onclick="slidePanel('menu_block1')">
面板 1
div>
<div class="menu_block" id="menu_block1">
<ul>
<li>text1li>
<li>text2li>
<li>text3li>
ul>
div>
body>
html>
onclick="slidePanel('menu_block1')"这个事件函数将在我们点击面板标题时触发，能后会调用Scriptaculous Effect的具体实现去实现我们需要的滑动折叠功能。
[1]
【责编:Peng】
--------------------next---------------------
阅读(479) | 评论(0) | 转发(0) |
