Question

我知道有很多帖子关于使用jQuery与mootools热，但我做错了。

原始头部MooTools + jQuery：

<head>
<?php css(); ?>
<meta name="viewport" content="width=device-width" />
<meta content="text/html; charset=<?php print $this->getConfig('charset'); ?>" http-equiv="content-type" />
<?php
if(($this->getConfig('log_file') != null && strlen($this->getConfig('log_file')) > 0)
    || ($this->getConfig('thumbnails') != null && $this->getConfig('thumbnails') == true && $this->mobile == false))
{ 
?>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.livadi.gr/ib/sources/js/mootools.js"></script>
<script type="text/javascript">
//<![CDATA[

$(document).ready(function() {
<?php
    if($this->logging == true)
    { 
?>
        function logFileClick(path)
        {
             $.ajax({
                    async: false,
                    type: "POST",
                    data: {log: path},
                    contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                    cache: false
                });
        }

        $("a.file").click(function(){
            logFileClick("<?php print $this->location->getDir(true, true, false, 0);?>" + $(this).html());
            return true;
        });
<?php 
    }
    if(EncodeExplorer::getConfig("thumbnails") == true && $this->mobile == false)
    {
?>
        function positionThumbnail(e) {
            xOffset = 30;
            yOffset = 10;
            $("#thumb").css("left",(e.clientX + xOffset) + "px");

            diff = 0;
            if(e.clientY + $("#thumb").height() > $(window).height())
                diff = e.clientY + $("#thumb").height() - $(window).height();

            $("#thumb").css("top",(e.pageY - yOffset - diff) + "px");
        }

        $("a.thumb").hover(function(e){
            $("#thumb").remove();
            $("body").append("<div id=\"thumb\"><img src=\"?thumb="+ $(this).attr("href") +"\" alt=\"Preview\" \/><\/div>");
            positionThumbnail(e);
            $("#thumb").fadeIn("medium");
        },
        function(){
            $("#thumb").remove();
        });

        $("a.thumb").mousemove(function(e){
            positionThumbnail(e);
            });

        $("a.thumb").click(function(e){$("#thumb").remove(); return true;});
<?php 
    }
?>
    });
//]]>                
</script>
<?php 
}
?>
<title><?php if(EncodeExplorer::getConfig('main_title') != null) print EncodeExplorer::getConfig('main_title'); ?></title>
</head>

现在我放了jQuery.noConflict();并将$替换为jQuery。在那之后，MooTools正在通过jQuery工作。

标题有一些变化：

<head>
<?php css(); ?>
<meta name="viewport" content="width=device-width" />
<meta content="text/html; charset=<?php print $this->getConfig('charset'); ?>" http-equiv="content-type" />
<?php
if(($this->getConfig('log_file') != null && strlen($this->getConfig('log_file')) > 0)
    || ($this->getConfig('thumbnails') != null && $this->getConfig('thumbnails') == true && $this->mobile == false))
{ 
?>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.livadi.gr/ib/sources/js/mootools.js"></script>
<script type="text/javascript">
//<![CDATA[
    //no conflict jquery
    jQuery.noConflict();
    //jquery stuff

jQuery(document).ready(function() {
<?php
    if($this->logging == true)
    { 
?>
        function logFileClick(path)
        {
             jQuery.ajax({
                    async: false,
                    type: "POST",
                    data: {log: path},
                    contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                    cache: false
                });
        }

        jQuery("a.file").click(function(){
            logFileClick("<?php print $this->location->getDir(true, true, false, 0);?>" + $(this).html());
            return true;
        });
<?php 
    }
    if(EncodeExplorer::getConfig("thumbnails") == true && $this->mobile == false)
    {
?>
        function positionThumbnail(e) {
            xOffset = 30;
            yOffset = 10;
            jQuery("#thumb").css("left",(e.clientX + xOffset) + "px");

            diff = 0;
            if(e.clientY + $("#thumb").height() > $(window).height())
                diff = e.clientY + $("#thumb").height() - $(window).height();

            jQuery("#thumb").css("top",(e.pageY - yOffset - diff) + "px");
        }

        jQuery("a.thumb").hover(function(e){
            jQuery("#thumb").remove();
            jQuery("body").append("<div id=\"thumb\"><img src=\"?thumb="+ $(this).attr("href") +"\" alt=\"Preview\" \/><\/div>");
            positionThumbnail(e);
            jQuery("#thumb").fadeIn("medium");
        },
        function(){
            jQuery("#thumb").remove();
        });

        jQuery("a.thumb").mousemove(function(e){
            positionThumbnail(e);
            });

        jQuery("a.thumb").click(function(e){$("#thumb").remove(); return true;});
<?php 
    }
?>
    });
//]]>                
</script>
<?php 
}
?>
<title><?php if(EncodeExplorer::getConfig('main_title') != null) print EncodeExplorer::getConfig('main_title'); ?></title>
</head>

Answer 1

试试这个......

如果你在joomla中使用mootools，它将与JQuery冲突。所以JQuery不会工作。

首先需要安装SC System JQuery插件。

http://webappgenerator.com/releases/plg_system_scjquery

并使用以下代码进行JQuery。

var j = jQuery.noConflict();

将$ sign替换为（JQuery）关键字

然后你将使用jquery。

Answer 2

尝试

var j = jQuery.noConflict();

然后在你自己的lib调用中使用j而不是jQuery。

您还可以封装所有使用jQ的代码，如下所示：

(function($){
  // all your jquery code, use $ without compunction!!

}(jQuery);

jQuery和Mootools冲突

2 个答案: