Java's success can not be separated from its vast class library, not only Sun's class library, many details of the implementation are taken from the third party (such as XML parsing using Apache implementation).
JSI is not a public API at the moment, but we can integrate other mature class libraries while isolating their dependencies, isolating the execution context of each script, and eliminating the risk of naming conflicts.
Here we detail a more complex example: the sliding folding Panel (Task menu) effect, similar to the left side of the Windows XP file browser.
We first integrated the Scriptaculous effect class library, and on this basis to a panel folding effect to do a simple encapsulation, show the framework of the Class library encapsulation function.
1. Integrated Scriptaculous class Library:
Here we do not do too much introduction, details please refer to the integration of actual combat; we have placed scriptaculous in the Us.aculo.script package in our release version, which you can use as a built-in class library.
2. Write our folding panel function (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. To write a package definition script (example/__$package.js):
Add Slidepanel (sliding Panel control) function
This.addscript ("Effect.js", "Slidepanel", null);
Add to the Effect.js script the load-dependent this.addscriptdependence of the effects.js script in the Us.aculo.script package ("Effect.js", "us/aculo/script/ Effects.js ", false);
4. Use the above class library on the Web page:
<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>
<body>
<div class="menu_header"
onclick="slidePanel('menu_block1')">
面板 1
</div>
<div class="menu_block" id="menu_block1">
<ul>
<li>text1</li>
<li>text2</li>
<li>text3</li>
</ul>
</div>
</body>
onclick= "Slidepanel (' Menu_block1 ')" This event function will be triggered when we click on the panel header and then invoke scriptaculous effect to achieve the sliding folding function we need.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
