scriptaculous и JQuery не сотрудничают - PullRequest
Новая
       4

scriptaculous и JQuery не сотрудничают

0 голосов
/ 28 апреля 2011

Я использую слайдер jQuery для просмотра изображений и анимации слайдера Scriptaculous на одной странице.Они отлично работают, если я помещаю их на две отдельные страницы.

Когда я так упорядочиваю код. 

<script type="text/javascript" src="/scripts/prototype.js"></script>     
<script type="text/javascript" src="/scripts/scriptaculous.js?load=effects"></script>               
<script type="text/javascript" src="/scripts/lightbox.js"></script> 

<script type="text/javascript" src="/scripts/coda-slider-2.0/jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="/scripts/coda-slider-2.0/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="/scripts/coda-slider-2.0/jquery.coda-slider-2.0.js"></script>

<script type="text/javascript">
    jQuery(document).ready(function(){      
        jQuery('#coda-slider-1').codaSlider({
        dynamicArrows: false,
        dynamicTabs: false
    });
    });            
</script>

Работает слайд Scriptaculous и перестает работать слайд jQueryКогда я заказываю этот способ. 

<script type="text/javascript" src="/scripts/coda-slider-2.0/jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="/scripts/coda-slider-2.0/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="/scripts/coda-slider-2.0/jquery.coda-slider-2.0.js"></script>

<script type="text/javascript">
    jQuery(document).ready(function(){      
        jQuery('#coda-slider-1').codaSlider({
        dynamicArrows: false,
        dynamicTabs: false
    });
    });            
</script>

<script type="text/javascript" src="/scripts/prototype.js"></script>     
<script type="text/javascript" src="/scripts/scriptaculous.js?load=effects"></script>               
<script type="text/javascript" src="/scripts/lightbox.js"></script>

jQuery начинает работать, а слайд Scriptaculous перестает работать.Затем я искал какое-то решение, и было заявлено, что с помощью jQuery.noConflict ();и замена селектора $ на jQuery может решить проблему, но это не так.Я помещаю эти две вещи в код и пробую таким образом. 

script type="text/javascript" src="/scripts/prototype.js"></script>     
<script type="text/javascript" src="/scripts/scriptaculous.js?load=effects"></script>               
<script type="text/javascript" src="/scripts/lightbox.js"></script> 

<script type="text/javascript" src="/scripts/coda-slider-2.0/jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="/scripts/coda-slider-2.0/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="/scripts/coda-slider-2.0/jquery.coda-slider-2.0.js"></script>

<script type="text/javascript">
    jQuery.noConflict();
    jQuery(document).ready(function(){      
        jQuery('#coda-slider-1').codaSlider({
        dynamicArrows: false,
        dynamicTabs: false
    });
    });            
</script>

Это только заставляет jQuery работать независимо от того, в каком порядке он работает, и заставляет Scriptaculous перестать работать.Вот.Приветствия.

Ответы [ 5 ]

3 голосов
/ 28 апреля 2011

Я не очень хорошо разбираюсь в Scriptaculous, но сразу две вещи:

  1. Если вы планируете использовать jQuery с другой библиотекой (тогда позвоните .noConflict()), сначала загрузите jQuery , затем вызовите .noConflict(), , а затем загрузите другие библиотеки.В этом случае прототип и сценарий.Безопаснее, если я не ошибаюсь.

  2. Убедитесь, что плагин слайдера jQuery coda действительно поддерживает .noConflict().Я думаю, что это то, что Дерек выше пытался сказать - после того, как вы вызвали .noConflict(), jQuery выпускает переменную $ обратно в открытый доступ (например, для использования scripttaculous).Если ползунок coda интенсивно использует переменную $ (без адаптации к .noConflict()), это может быть большой проблемой.

1 голос
/ 28 апреля 2011

jquery.coda-slider-2.0.js зависит от $, вам нужно обновить все ссылки на $ в этом файле до jQuery и продолжать использовать noConflict ()

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

<script type="text/javascript" src="/scripts/coda-slider-2.0/jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="/scripts/coda-slider-2.0/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="/scripts/coda-slider-2.0/jquery.coda-slider-2.0.js"></script>

<script type="text/javascript">
    jQuery.noConflict();
    jQuery(document).ready(function(){      
        jQuery('#coda-slider-1').codaSlider({
        dynamicArrows: false,
        dynamicTabs: false
    });
    });            
</script> 

<script type="text/javascript" src="/scripts/prototype.js"></script>     
<script type="text/javascript" src="/scripts/scriptaculous.js?load=effects"></script>               
<script type="text/javascript" src="/scripts/lightbox.js"></script>

С этим файлом для jquery.coda-slider-2.0.js

Если это не сработает, вы, вероятно, захотите либо отказаться от jQuery и найти аналогичный плагин для прототипа, либо наоборот. Если вы используете только прототип для лайтбокса, jQuery также предлагает хороший плагин лайтбокс .

1 голос
/ 28 апреля 2011

Скорее всего, это не сработает - Scriptaculous зависит от Prototype.

Ваш лучший вариант - найти jQuery-совместимую замену для используемого вами эффекта Scriptaculous.

0 голосов
/ 07 февраля 2013

Это только расширение пункта 2 Ричарда Нила Илагана (с чем я полностью согласен). Для работы с jQuery в режиме noConflict все плагины должны иметь общий вид: 

jQuery(function() {
    (function($) {
        $.fn.codaSlider = function() {
            // Plugin's code goes here.     
            // Within this function, $ refers to jQuery.
        };
    })(jQuery);
});

Внешняя функция выполняется при загрузке страницы и получает доступ к jQuery без использования '$' (так что это безопасно для Prototype). Внутренняя Самоисполняющаяся Функция предназначена просто для создания области видимости, в которой $ ссылается на jQuery. Внутри SEF $ относится к jQuery, как и ожидают наивные плагины, которые не поддерживают noConflict «из коробки». Поэтому код для такого плагина часто можно скопировать и вставить в тело SEF выше, и он будет просто работать (тм).

Это лучше, чем изменение всего экземпляра '$' на 'jQuery', потому что оно не изменит символов '$' в регулярных выражениях и т. Д., И оставит исходный код без изменений, кроме отступа, что упрощает объединение в будущих изменениях .

НТН

0 голосов
/ 01 апреля 2012

jQuery и Prototype оба используют селектор $. noConflict () должен исправить этот конфликт, но если это не так, вы можете найти знаки $ в вашем документе и заменить их на document.getElementById

...