Как мне получить jQuery и Mootools на одной странице Contao? - PullRequest
Новая
       28

Как мне получить jQuery и Mootools на одной странице Contao?

0 голосов
/ 27 февраля 2020

Я работаю на сайте Contao, который должен быть обновлен с 2.11.6 до 3.5.40, потому что провайдер вскоре форсирует обновление PHP с 5.6 до 7.3. Обновленный сайт должен выглядеть и ощущаться как старый.

Я уже выполнил обновление Contao, и все страницы выглядят нормально, кроме home page , которая использует два расширения: 

• MenuMatic 0.68.3 for the main navigation (all pages use this)
• FlexSlider 1.4.3 directly underneath the menu (only on the home page)

MenuMati c использует Mootools, FlexSlider использует jQuery. Кажется, что два расширения не работают вместе. Если я включаю только Mootools, меню работает (при наведении курсора на один из верхних элементов выпадает подменю); если я добавлю элемент содержимого FlexSlider с jQuery, слайдер будет работать, но не выпадающее меню. Я не нашел ползунка с опцией затухания, которая работает с Mootools на contao 3.5.

MenuMati c вставляет эти скрипты на страницу: 

<!-- Load the MenuMatic Class -->
<script src="js/MenuMatic_0.68.3.js" type="text/javascript" charset="utf-8"></script>

<!-- Create a MenuMatic Instance -->
<script type="text/javascript" >
    window.addEvent('domready', function() {
    var myMenu = new MenuMatic();
    });
</script>

Вот что я пробовал: 

• use a pure CSS menu: works on a simple html page, not on the Contao home page – no dropdown
• insert jQuery.noConflict() in the FlexSlider inline script
• wrap flexslider.js with jQuery(document).ready(function( $ ) { ... });

Встроенный скрипт FlexSlider с noConflict: 

<script type="text/javascript">
    /* <![CDATA[ */
    jQuery.noConflict();
    (function($) {
    $(window).load(function() {
        $("#schule").flexslider({
        slideshowSpeed: 6000,
        animationSpeed: 3000,
            animation: "fade",
        direction: "horizontal",
                    controlNav: false,
                    directionNav: false,
            randomize: false,
            pauseOnHover: false,
                pauseOnAction: true,
        useCSS: false,
            touch: true
        });
    });
    })(jQuery);
    /* ]]> */
</script>

Вы можете помочь?

См. Мой ответ ниже.

Ответы [ 2 ]

1 голос
/ 27 февраля 2020

Замените ваш скрипт MenuMati c на https://gist.github.com/DimitarChristoff/7354353, например.

0 голосов
/ 27 февраля 2020

Я нашел ответ в двух местах:

1) https://gist.github.com/DimitarChristoff/7354353

Изменить js / Menumatic_0.68.3. js

от 

var MenuMatic = new Class( {...} );
var MenuMaticSubMenu = new Class( {...} );

до 

var MenuMatic;
var MenuMaticSubMenu;
(function ($) {
    MenuMatic = new Class( {...} );
    MenuMaticSubMenu = new Class( {...} );
}(document.id));

2) jQuery / Mootools Conflict - Не удается найти решение

Изменить активы / jquery / core /1.11.3/jquery.min.js

добавить jQuery.noConflict(); в конце.

noConflict в скрипте FlexSlider не был необходим.

Требуется другая настройка. В макете страницы источник jQuery и Mootools должен быть установлен на CDN with local fallback. Не знаю почему.

Меню и слайдер работают вместе!

...