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

jQuery 和 Mootools 冲突

发布于 2024-11-25 14:21:32 字数 5780 浏览 0 评论 0原文

我知道有很多关于在 mootools 中使用 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[

$(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>
原文

I know that there are many post about hot to use jQuery with mootools, but I am doing something wrong.

The original head 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>

Now I have put the jQuery.noConflict(); and replaced the $ with the jQuery. After that, MooTools is working by jQuery isn't.

The header with some changes:

<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>

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

扫码二维码加入Web技术交流群

发布评论

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

评论（2）

罪#恶を代价 2024-12-02 14:21:32

试试这个...

如果你在 joomla 中使用 mootools 它将与 JQuery 冲突。这样 JQuery 将无法工作。

首先需要安装 SC 系统 JQuery 插件。

http://webappgenerator.com/releases/plg_system_scjquery

并对 JQuery 使用以下代码。

var j = jQuery.noConflict();

将 $ 符号替换为 (JQuery) 关键字

然后您将使用 jquery.

Try this...

If you use mootools in joomla it will conflict with JQuery. So that the JQuery is wont work.

First Need Install the SC System JQuery plugin.

http://webappgenerator.com/releases/plg_system_scjquery

And use the following code for JQuery.

var j = jQuery.noConflict();

Replace the $ sign with (JQuery) keyword

Then you will use the jquery.

回复 原文
太阳哥哥 2024-12-02 14:21:32

然后尝试

var j = jQuery.noConflict();

在您自己的库调用中使用 j 而不是 jQuery。

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

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

}(jQuery);

Try

var j = jQuery.noConflict();

and then use j rather than jQuery in your own calls to the lib.

You can also encapsulate all of your own code that use jQ like this:

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

}(jQuery);
回复 原文
~没有更多了~

关于作者

述情

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

胡图图

文章 0 评论 0

zt006

文章 0 评论 0

z祗昰~

文章 0 评论 0

冰葑

文章 0 评论 0

野の

文章 0 评论 0

天空

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文