论坛首页 → Web前端技术论坛 →

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

浏览 6660 次
锁定老帖子 主题：百花齐放 日月同辉――采用JSI解决不同类库间的冲突
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • jindw
  • 等级: 三钻会员
  • 性别:
  • 文章: 731
  • 积分: 1481
  • 来自: 初到北京
   发表时间：2007-04-15  

众所周知， 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> 
返回顶楼
         
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics