当前位置：文江博客话题详情

与 jQuery 冲突 +原型+歌剧/IE

发布于 2024-09-28 21:58:25 字数 600 浏览 3 评论 0原文

我正在使用带有原型的 IPBoard CMS，并且使用最新的 jQuery。

我已经实现了一个 jQuery 画廊图片查看器： - 它在 Chrome 和 Firefox 上运行良好。 - 我在使用 Opera 和 IE 8 时遇到问题

。我在这里创建了一个最小的示例：http://www.warriorlabs.net/index.php?app=ccs&module=pages&section=pages&folder=&id=22

您只需点击图片即可。

在 IE 8 或 Opera 中：

当我删除原型时，一切正常。

当我将 jQuery 原型与“noConflicted”画廊查看器一起保存时，jQuery 访问器返回的宽度和高度似乎存在错误。因此，加载框未居中，图片本身似乎映射到整个窗口。

有谁知道为什么会发生这种情况？

如果有一点帮助，我们将不胜感激。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

九局 2024-10-05 21:58:25

我实际上并没有同时使用原型和 jQuery，但根据我的理解，您应该将 jQuery.noConflict() 调用放在原型脚本之前。

尝试将文档头更改为如下所示：

<head>
    <script src="http://cdn.jquerytools.org/1.2.4/full/jquery.tools.min.js"></script>
    <script type="text/javascript">
        jQuery.noConflict();
    </script>
    <script type="text/javascript" src="http://prototypejs.org/assets/2009/8/31/prototype.js"></script>
    <script type="text/javascript" src="http://www.warriorlabs.net/jScript/facebox/facebox.js"></script>
</head>

编辑：
另外，还要从 facebox.js 的第一行中删除 jQuery.noConflict()，因为它会删除原型定义的 $ 函数。

旁注：
编写 jQuery 插件的常用方法是这样的：

(function($){
  //Inside this block we know that $ == jQuery
  //The global $ (i.e. window.$) might be something else
  //By using this anonymous function we make sure we don't polute the global namespace
  var v = "function scope";//this is a variable in the scope of the function
  window.globalV = "global scope";//this is a global variable
  $.fn.myPlugin = function(){
    //my plugin code, usually something like:
    return this.each(function(){
      //do something with each element
      $(this).show();
    });
    //returning this.each allows for chaining
  }
})(jQuery);

在 Chrome 中，我在演示页面上收到此错误：
未捕获类型错误：对象 [object DOMWindow] 的属性“$”不是函数 [prototype.js:4598]

I haven't actually worked with both prototype and jQuery at the same time, but by my understanding you should put the jQuery.noConflict() call before the prototype script.

Try changing your document head to something like this:

<head>
    <script src="http://cdn.jquerytools.org/1.2.4/full/jquery.tools.min.js"></script>
    <script type="text/javascript">
        jQuery.noConflict();
    </script>
    <script type="text/javascript" src="http://prototypejs.org/assets/2009/8/31/prototype.js"></script>
    <script type="text/javascript" src="http://www.warriorlabs.net/jScript/facebox/facebox.js"></script>
</head>

EDIT:
Also remove the jQuery.noConflict() from the first line in facebox.js as it removes the $ function defined by prototype.

SIDE NOTE:
The usual way of writing jQuery plugins is something like this:

(function($){
  //Inside this block we know that $ == jQuery
  //The global $ (i.e. window.$) might be something else
  //By using this anonymous function we make sure we don't polute the global namespace
  var v = "function scope";//this is a variable in the scope of the function
  window.globalV = "global scope";//this is a global variable
  $.fn.myPlugin = function(){
    //my plugin code, usually something like:
    return this.each(function(){
      //do something with each element
      $(this).show();
    });
    //returning this.each allows for chaining
  }
})(jQuery);

In Chrome I get this error on your demo page:
Uncaught TypeError: Property '$' of object [object DOMWindow] is not a function [prototype.js:4598]

回复收藏 0 原文

っ〆星空下的拥抱 2024-10-05 21:58:25

在原型核心代码中注释掉以下代码就可以解决这个问题。但如果您需要使用scrollto 函数，这可能不是最好的解决方案。

    //Commented out because of the conflict with jQuery.
  //scrollTo: function(element) {
   // element = $(element);
   // var pos = Element.cumulativeOffset(element);
   // window.scrollTo(pos[0], pos[1]);
   // return element;
 // },

This problem can be solved if you comment out the following code in the prototype core code. But this is perhaps not the best solution if you ever need to use the scrollto function.

    //Commented out because of the conflict with jQuery.
  //scrollTo: function(element) {
   // element = $(element);
   // var pos = Element.cumulativeOffset(element);
   // window.scrollTo(pos[0], pos[1]);
   // return element;
 // },

回复收藏 0 原文