Joomla + jquery + prototype.不能让noConflict工作

joomla + jquery + prototype. Can't get noConflict to work.

本文关键字：noConflict 工作 prototype jquery Joomla 不能      更新时间：2023-09-26

我在一个网站上工作，使用joomla和magento的桥称为Magebridge。我已经开始开发一个joomla模板，它使用一些jquery来处理主页和工具提示上的NivoSlider等内容。当我在一个正常的joomla网站上使用这个模板时，它工作得很好，但是当我使用将Prototype带入混合的桥时，我得到了错误和其他不愉快的东西。

现在搜索后，似乎一般的解决方案，这将是在无冲突模式下使用jquery，我现在已经尝试了许多不同的方式，但似乎不能让它工作。

我在内联脚本和外部。js文件的组合中使用jquery。查看站点的最终源代码，我可以看到原型在jquery之前被调用(这里是头部部分的一部分):

<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 ();然后替换所有的$(在外部。js文件中，我添加了jQuery)，以及在一些内联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

哪里添加了noConflict?只有您编写的Jquery需要更改，以引用Jquery对象的全名(或别名，如$j)。任何正确构建的插件都已经保护了美元符号。如果您需要在页面中添加自己的脚本，请遵循jQuery文档。

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

编辑添加以反映编辑后的文章:

是的，你现在已经在noConflict模式下包含了jQuery，所以你需要用"jQuery"而不是"$"来写你的调用。

一旦你进入了jQuery调用，如果你愿意，你可以把美元符号拿回来，但是你必须从"函数"中请求它。

jQuery(window).load(function($) {
    $('#slider').nivoSlider({
相关文章：