JQuery и Mootools конфликтуют - PullRequest
Новая
       43

JQuery и Mootools конфликтуют

0 голосов
/ 21 июля 2011

Я знаю, что есть много сообщений о том, как использовать 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>

Ответы [ 2 ]

1 голос
/ 30 июля 2011

Попробуйте это ...

Если вы используете mootools в Joomla, это будет конфликтовать с JQuery.Чтобы JQuery не работал.

Сначала нужно установить плагин SC System JQuery. 

http://webappgenerator.com/releases/plg_system_scjquery

И использовать следующий код для JQuery. 

var j = jQuery.noConflict();

Заменитьзнак $ с ключевым словом (JQuery)

Тогда вы будете использовать jquery.

0 голосов
/ 21 июля 2011

Попробуйте 

var j = jQuery.noConflict();

и затем используйте j, а не jQuery в ваших собственных вызовах lib.

Вы также можете инкапсулировать весь свой собственный код, использующий jQ, например: 

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

}(jQuery);
...