Question

我正在使用一个名为Magebridge的joomla和magento桥梁的网站上工作。我已经开始开发一个joomla模板，它在主页和工具提示上使用一些jquery来处理像NivoSlider这样的东西。当我在普通的joomla网站上使用这个模板时，它工作正常，但是当我使用将Prototype带入混合的桥时，我会收到错误和其他不愉快的东西。

现在在搜索之后，似乎通常的解决办法是在noconflict模式下使用jquery，我现在已经尝试过多种不同的方式，但似乎无法让它工作。

我在内联脚本和外部.js文件的组合中使用jquery。查看该站点的最终源代码，我可以看到在jquery之前调用protoype（这是head部分的一部分）：

<head>
  <base href="http://127.0.0.1/meade/" />
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="robots" content="index, follow" />
  <meta name="generator" content="Joomla! 1.7 - Open Source Content Management" />
  <title> Home page </title>
  <link href="http://127.0.0.1/meade/component/search/?format=opensearch" rel="search" title="Search Meade Instruments" type="application/opensearchdescription+xml" />
  <link rel="stylesheet" href="/meade/media/com_magebridge/css/default.css" type="text/css" />
  <link rel="stylesheet" href="http://127.0.0.1/store.meade/skin/frontend/default/default/css/styles.css" type="text/css" media="all"/>
  <!--[if lt IE 8 ]>
<link rel="stylesheet" href="http://127.0.0.1/store.meade/skin/frontend/default/default/css/styles-ie.css" type="text/css" media="all"/>
<![endif]-->
  <link rel="stylesheet" href="http://127.0.0.1/store.meade/skin/frontend/base/default/css/widgets.css" type="text/css" media="all"/>
  <link rel="stylesheet" href="http://127.0.0.1/store.meade/skin/frontend/default/default/css/print.css" type="text/css" media="print"/>
  <script type="text/javascript" src="/meade/media/com_magebridge/js/footools.min.js"></script>
<script  type="text/javascript">
//<![CDATA[
var BLANK_URL = 'http://127.0.0.1/store.meade/js/blank.html';
var BLANK_IMG = 'http://127.0.0.1/store.meade/js/spacer.gif';
//]]>
</script>
  <script type="text/javascript" src="http://127.0.0.1/store.meade/js/index.php?c=auto&amp;f=,lib/ccard.js,prototype/validation.js,scriptaculous/builder.js,scriptaculous/effects.js,scriptaculous/dragdrop.js,scriptaculous/controls.js,scriptaculous/slider.js,varien/js.js,varien/form.js,varien/menu.js,mage/translate.js,mage/cookies.js"></script>
  <!--[if lt IE 7 ]>
<script type="text/javascript" src="http://127.0.0.1/store.meade/js/lib/ds-sleight.js"></script>
<![endif]-->
  <script type="text/javascript" src="http://127.0.0.1/store.meade/skin/frontend/base/default/js/ie6.js"></script>
  <script type="text/javascript">var Translator = new Translate({"Please use only letters (a-z or A-Z), numbers (0-9) or underscore(_) in this field, first character should be a letter.":"Please use only letters (a-z or A-Z), numbers (0-9) or underscores (_) in this field, first character must be a letter."});</script>

<link rel="stylesheet" href="/meade/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/meade/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/meade/templates/Meade/css/style.css" type="text/css" />
<link rel="stylesheet" href="/meade/templates/Meade/css/nivo-slider.css" type="text/css" />
<link rel="stylesheet" href="/meade/templates/Meade/nivo-slider/themes/default/default.css" type="text/css" />
<script type="text/javascript" src="/meade/templates/Meade/js/jquery-1.6.1.min.js"></script>

<script type="text/javascript" src="/meade/templates/Meade/js/jquery.nivo.slider.pack.js"></script>

现在我已经在官方的jquery网站上尝试过添加jQuery.noConflict（）;然后替换所有$（在我用jQuery添加的外部.js文件中（以及由于某种原因我无法粘贴到其中的一些内联jquery。但是那不起作用，我还尝试了另一种与jQuery.noConflict（）;和（function（$）{$（function（）{但似乎无法使用它的变体。所以我想我只是不知道我是否做了一个傻瓜语法错误或者我对如何使用noConflict模式的理解一般都是完全关闭的。

非常感谢任何帮助。

谢谢

编辑：

好的，这就是我现在所拥有的：

<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/js/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
</script> 
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
jQuery(window).load(function() {

    jQuery('#slider').nivoSlider({
        effect:'boxRainGrowReverse',
        controlNavThumbs:true,
        prevText: ' ',
        nextText: ' ',
        pauseTime: 4000
    });

});
</script>

我仍然遇到堆栈溢出错误，并且对象不支持错误。我已经看了nivoslider js文件，看起来它已经保护了$符号。如果您认为它可能是该文件的一部分，您可以在此处找到它：http://www.2shared.com/document/Dz0_2rBD/jquerynivosliderpack.html

Answer 1

你在哪里添加noConflict？只有你编写的Jquery需要被改变以通过它的全名（或者像$ j这样的别名）来引用jQuery对象。任何正确构建的插件都已经保护了美元符号。如果您需要将自己的脚本添加到页面，请点击jQuery docs。

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

编辑补充以反映已编辑的帖子：

是的，您现在已经在noConflict模式下正确地包含了jQuery，因此您需要使用“jQuery”而不是“$”来编写您的调用。

一旦你进入jQuery调用，如果你愿意，可以让美元符号返回，但是你必须从“函数”中提出要求。

jQuery(window).load(function($) {
    $('#slider').nivoSlider({

joomla + jquery + prototype。不能让noConflict工作。

1 个答案: