Проблема с загрузкой нескольких плагинов jQuery - PullRequest
Новая
       22

Проблема с загрузкой нескольких плагинов jQuery

0 голосов
/ 09 августа 2011

У меня проблема с использованием нескольких (2) плагинов jQuery. Я немного погуглил, но не могу найти решение, хотя полагаю, оно довольно простое. Я новичок в jQuery, поэтому, пожалуйста, будьте осторожны :)

Я постараюсь сделать это коротким. У меня есть два плагина: один drag'n'drop (используя Prototype и Scriptaculous ) и один плагин всплывающей подсказки ( TipTip ). Это код, используемый для загрузки файлов и библиотеки: 

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>

<script type="text/javascript" src="js/prototype.js"></script> 
<script type="text/javascript" src="http://webdesign.torn.be/tutorials/assets/js/scriptaculous/scriptaculous.js?load=effects,dragdrop"></script>

<script type="text/javascript" src="js/jquery.tipTip.js"></script>
<script type="text/javascript" src="js/jquery.tipTip.minified.js"></script>

Я вызываю функции, используя это: 

// CALLING THE TIPTIP-PLUGIN
<script type="text/javascript">
    $(function(){
    $(".heroStr").tipTip();
    });
</script>

// CALLING THE DRAG'N'DROP-PLUGIN
<script type="text/javascript">
    //<![CDATA[  
    document.observe('dom:loaded', function() {  
        var changeEffect;  
    Sortable.create("selectedSetupTop", {containment: ['listStr', 'listAgi', 'listInt', 'selectedSetupTop', 'selectedSetupMid', 'selectedSetupBot', 'selectedSetupFor'], tag:'img', overlap:'vertical', constraint:false, dropOnEmpty: true,
        onChange: function(item) {
            var list = Sortable.options(item).element;
            $('changeNotification').update(Sortable.serialize(list).escapeHTML());
            if(changeEffect) changeEffect.cancel();
            changeEffect = new Effect.Highlight('changeNotification', {restoreColor:"transparent" });
        },          
        onUpdate: function(list) {
            new Ajax.Request("saveImageOrder.php", {
                method: "post",
                onLoading: function(){$('activityIndicator').show(), $('activityIndicator2').hide()},
                onLoaded: function(){$('activityIndicator').hide(), $('activityIndicator2').show()},
                parameters: { data: Sortable.serialize(list), container: list.id }
            });             
        }
    });
    });  
// ]]>  
</script>

Когда я использую код выше, работает только drag'n'drop. Если я удалю файлы Prototype- и Scriptaculous, всплывающая подсказка сработает, но, конечно, drag'n'drop работать не будет.

Как мне удается запустить оба одновременно? Буду признателен за помощь, заранее спасибо!

/ cheezen

Ответы [ 2 ]

1 голос
/ 09 августа 2011

Вы должны использовать jQuery.noConflict() документы , чтобы избежать столкновения $ между jQuery и Prototype.

Но вместо этого я бы предложил вам использовать jQueryUI для обработки перетаскивания вместо prototype + scriptaculous.Кроме того, я рекомендую вам обновить jQuery до последней версии, та, которую вы используете, действительно устарела.

1 голос
/ 09 августа 2011

jQuery и другие библиотеки используют переменную $ для большинства своих функций. Если вы включите более одного (jQuery, Prototype, MooTools и т. Д.), Они могут растоптать друг друга. Вернитесь к переменной jQuery при использовании tipTip. (Который нужно включить только один раз) 

$.noConflict();  //Release the $ variable
jQuery(function($){  //Shorthand for $(document).ready(), callback locally renames jQuery to $
    $(".heroStr").tipTip();
});

Кроме того, хотя вы можете использовать оба одновременно, Prototype не является плагином jQuery, это отдельный фреймворк.

...