百花齐放 日月同辉――采用JSI解决不同类库间的冲突
16lz
2021-01-22
众所周知, Scriptaculous所依赖的Prototype库与jQuery存在冲突。所以同时使用比较困难。
JSI针对每一个装载的脚本都有完全独立的执行上下文。所以这个问题能在JSI上彻底解决。
下面的例子,我们将在同一个页面上同时使用Scriptaculous和 jQuery 类库。证实一下JSI隔离冲突功能。
示例页面(hello-jquery-aculo.html):
< html >
< head >
< title > HellojQueryAndScriptaculous </ title >
<!-- 加入引导脚本 -->
< script src ="../scripts/boot.js" ></ script >
< script >
//导入jQuery
$import("org.jquery.$");
//导入Scriptaculous
$import("us.aculo.script.Effect");
$(document).ready(function(){
//使用jQuery添加一段问候语
$("<pid='helloBox'style='background:#0F0;text-align:center;font-size:40px;cursor:pointer;'>HellojQueryAndScriptaculous</p>")
.appendTo('body');
$('#helloBox').ready(function(){
//使用Scriptaculous高亮显示一下刚才添加的内容
newEffect.Highlight('helloBox');
}).click(function(){
//当用户单击该内容后使用jQuery实现渐出
$('#helloBox').fadeOut();
});
});
</ script >
</ head >
< body >
< p > 文档装载后,jQuery将在后面添加一段问候语;并使用Scriptaculous高亮显示(Highlight);在鼠标点击后在使用jQuery渐出(fadeOut)。 </ p >
</ body >
</ html >
JSI针对每一个装载的脚本都有完全独立的执行上下文。所以这个问题能在JSI上彻底解决。
下面的例子,我们将在同一个页面上同时使用Scriptaculous和 jQuery 类库。证实一下JSI隔离冲突功能。
示例页面(hello-jquery-aculo.html):
< html >
< head >
< title > HellojQueryAndScriptaculous </ title >
<!-- 加入引导脚本 -->
< script src ="../scripts/boot.js" ></ script >
< script >
//导入jQuery
$import("org.jquery.$");
//导入Scriptaculous
$import("us.aculo.script.Effect");
$(document).ready(function(){
//使用jQuery添加一段问候语
$("<pid='helloBox'style='background:#0F0;text-align:center;font-size:40px;cursor:pointer;'>HellojQueryAndScriptaculous</p>")
.appendTo('body');
$('#helloBox').ready(function(){
//使用Scriptaculous高亮显示一下刚才添加的内容
newEffect.Highlight('helloBox');
}).click(function(){
//当用户单击该内容后使用jQuery实现渐出
$('#helloBox').fadeOut();
});
});
</ script >
</ head >
< body >
< p > 文档装载后,jQuery将在后面添加一段问候语;并使用Scriptaculous高亮显示(Highlight);在鼠标点击后在使用jQuery渐出(fadeOut)。 </ p >
</ body >
</ html >
更多相关文章
- Ajax调用php脚本返回404错误
- 使用jquery的$ .ajax来获取node.js脚本的输出,而不是它的代码
- Chrome显示错误为:由于内容安全策略,拒绝执行内联脚本
- 提交表单时需要运行php脚本
- 用无序列表键入文本脚本
- Python脚本利用openoffice将office文档转为html或者pdf。
- 您试图显示配置为只允许执行和脚本权限的目录中的 HTML 页
- 我使用生成html文件的python制作了一个脚本。如何使用Web爬网程
- 通过脚本自动屏蔽非法IP(转http://bbs.5y6s.com/htm_data/21/080