A-A+

在Magento模板开发中如何共用jQuery与Prototype库

2012年08月17日 灵犀一指 在Magento模板开发中如何共用jQuery与Prototype库已关闭评论 阅读 1,050 人 次

作为一个开放开源的电子商务平台,Magento的成功自不必说,然而magento的开发人员可能从一开始就使用Prototype库,导致至今 也还末完成jQuery对Prototype的替换,因为实在是有太多的代码是使用Prototype写的,尽管jQuery对Prototype的替换 是事在必行。

为了能夠在Magento中使用jQuery丰富的web ui插件,程序员不得不面对这样的问题。

jquery与prototype兼容分两种情况,我们就让prototype可以正常使用,在使用jquery的时候做下代码的兼容处理。

第一种:先加载prototype,后加载jquery

<html>
<head>
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
  jQuery.noConflict();

// Put all your code in your document ready area
jQuery(document).ready(function($){
// Do jQuery stuff using $
  $("div").hide();
    });

// Use Prototype with $(…), etc. $(‘someid’).hide(); </script> </head> <body></body> </html> ———————————— 如上所示,红色部分就是对jquery做的一个兼容处理,这样就可以达到 jquery和prototype兼容了。jQuery.noConflict();要放在最前面,而jquery的代码就要放到jQuery(document).ready(function($){ ……… }); 内部。

第二种:先加载jquery,后加载prototype

<html>
<head>
<script src="jquery.js"></script>
<script src="prototype.js"></script>
<script>
// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
jQuery("div").hide();
});

// Use Prototype with $(...), etc.
$('someid').hide();
</script>
</head>
<body></body>
</html>

如上所示,不用调用jQuery.noConflict();,使用jQuery(document).ready(function(){ …….. });,在这个函数内部使用jQuery代替$。

标签:

评论已关闭!