2007-04-15

百花齐放 日月同辉――采用JSI解决不同类库间的冲突

关键字: JSI

众所周知， Scriptaculous所依赖的Prototype库与jQuery存在冲突。所以同时使用比较困难。

JSI针对每一个装载的脚本都有完全独立的执行上下文。所以这个问题能在JSI上彻底解决。

下面的例子，我们将在同一个页面上同时使用Scriptaculous和 jQuery 类库。证实一下JSI隔离冲突功能。

示例页面（hello-jquery-aculo.html）：

xml 代码
 
  1. <html>  
  2.   
  3. <head>  
  4.   
  5. <title>Hello jQuery And Scriptaculous</title>  
  6.   
  7. <!-- 加入引导脚本 -->  
  8.   
  9. <script src="../scripts/boot.js"></script>  
  10.   
  11. <script>  
  12.   
  13. //导入jQuery  
  14.   
  15. $import("org.jquery.$");  
  16.   
  17. //导入Scriptaculous  
  18.   
  19. $import("us.aculo.script.Effect");  
  20.   
  21.    
  22.   
  23. $(document).ready(function(){  
  24.   
  25.   //使用jQuery添加一段问候语  
  26.   
  27.   $("<p id='helloBox' style='background:#0F0;text-align:center;font-size:40px;cursor:pointer;'>Hello jQuery And Scriptaculous</p>")  
  28.   
  29.     .appendTo('body');  
  30.   
  31.   $('#helloBox').ready(function(){  
  32.   
  33.     //使用Scriptaculous高亮显示一下刚才添加的内容  
  34.   
  35.     new Effect.Highlight('helloBox');  
  36.   
  37.   }).click(function(){  
  38.   
  39.     //当用户单击该内容后使用jQuery实现渐出  
  40.   
  41.     $('#helloBox').fadeOut();  
  42.   
  43.   });  
  44.   
  45.  });  
  46.   
  47. </script>  
  48.   
  49. </head>  
  50.   
  51. <body>  
  52.   
  53. <p>文档装载后，jQuery将在后面添加一段问候语；并使用Scriptaculous高亮显示（Highlight）；在鼠标点击后在使用jQuery渐出（fadeOut）。</p>  
  54.   
  55. </body>  
  56.   
  57. </html> 
评论
jindw
  • 浏览: 203617 次
  • 性别: Icon_minigender_1
  • 来自: 初到北京
  • 详细资料
搜索本博客
存档
最新评论