多个jQuery.noConflict()实例

时间:2010-05-30 00:41:17

标签: javascript twitter mootools jquery

我正在处理几个包含MenuFader(http://css-tricks.com/examples/MenuFader/),twitter feed和时间戳的jQuery脚本。另外,我有几个Mootools脚本,其中包括Barackslideshow(http://devthought.com/wp-content/moogets/BarackSlideshow/demo.html)。最后,我有一个滚动的自动收报机,其中有来自twitter主页的工具提示。

我最初与Jquery MenuFader和Mootools BarackSlideshow发生冲突,但很容易用jQuery.noconflict()修复此问题;并用jQuery替换了所有相应的$。

不幸的是,在我从Twitter添加滚动滚动条后,Mootools BarackSlideshow和Jquery MenuFader不再有效。

我试图实现jQuery.noconflict();然后$ .noconflict();那么var j = jQuery.noconflict();并像以前一样替换$,但我无法让脚本很好地播放。

非常感谢任何帮助......我一整天都在努力。我是javascript的新手,但是设法通过一点点持久性来解决大多数问题。请看下面的脚本:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"     type="text/javascript"></script>
<script src="http://a2.twimg.com/a/1274914417/javascripts/fronts.js" type="text/javascript"></script> 

<script type="text/javascript"> 
//<![CDATA[

      $( function () {

  setTimeout(function() { $(".twtr-widget").append($("<div></div>").attr("class", "twtr-fade")); }, 0);

  (function() {
    var tabIndex = $("[tabindex]:last").attr("tabIndex");
    var setTabIndex = function() {
      $(this).attr("tabindex", ++tabIndex);
    }
    $(".footer-nav a").each(setTabIndex);
    $(".language-select a").each(setTabIndex);
  })();

    $("#signup_submit").scribe({
    event_name: "signup_submit_click",
    experiment: "ab_signup_button",
    bucket: "sign_up"
  }, "www_ab_tests");

  $('#signin_menu').isSigninMenu();

      new FrontPage().init();

      });

//]]>

1 个答案:

答案 0 :(得分:1)

noConflict只是简单地改变了jQuery库的名称。

尝试使用其他可能也想使用名称$的框架,但就是这样做。它没有解决与其他框架的任何其他类型的一般冲突。例如,当一个框架使用jQuery的内部ID标记克隆,更改或删除元素时,可能会出现奇怪的不可判断错误。当它们像jQuery一样广泛和侵入时,在单个页面上使用多个框架仍然是一个非常糟糕的想法。 (特别是jQuery 1.3,它对它触及的元素非常混杂。)

同样,两个在相同元素上运行的高级插件很可能会产生不需要的行为交互。假设一个插件将行为绑定到一个元素,但是另一个插件删除该元素以用渐进增强版本替换它。或者一个插件尝试读取不再具有可见宽度的元素的offsetWidth,因为另一个插件在其父级上调用了hide()

脚本和插件可能假装是完全封装的行为,你可以抛弃它们而不了解它们是如何工作的,但事实并非如此。如果将两个脚本(未经故意设计为一起工作)绑定到相同的元素,则它们可能会干扰或失败。尽量保持受不同插件影响的元素相互分离,以减少这种潜力。