jQueryの競合

Question

私はいくつかのJqueryライブラリを持っています。これらの矛盾をどのように解決するかについては完全にはわかりません。私が持っている図書館を掲示します。まず、私はjavascriptのは、私は私のヘッダーと正確な順序で持っている含まれて掲載します彼らはは：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script> 
    <script type="text/javascript" src="scripts/javascript.js"> </script> 
    <script type="text/javascript" src="scripts/prototype.js"></script> 
    <script type="text/javascript" src="scripts/scriptaculous.js?load=effects,builder"></script> 
    <script type="text/javascript" src="scripts/lightbox.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>   
    <script type="text/javascript" src="scripts/jquery.easing.1.3.js"></script> 
    <script type="text/javascript" src="scripts/jquery.mousewheel.min.js"></script> 

これらは私が実行しているライブラリです。これはindex.htmlを上にあり、カスタムスクロールバーのためである：

<script> 
$(window).load(function() { 
mCustomScrollbars(); 
}); 

function mCustomScrollbars(){ 
$("#about").mCustomScrollbar("vertical",300,"easeOutCirc",1.05,"auto","yes","yes",15); 
$("#graph").mCustomScrollbar("vertical",300,"easeOutCirc",1.05,"auto","yes","yes",15); 
$("#int").mCustomScrollbar("vertical",300,"easeOutCirc",1.05,"auto","yes","yes",15); 
$("#arch").mCustomScrollbar("vertical",300,"easeOutCirc",1.05,"auto","yes","yes",15); 
$("#serv").mCustomScrollbar("vertical",300,"easeOutCirc",1.05,"auto","yes","yes",15); 
$("#contact").mCustomScrollbar("vertical",300,"easeOutCirc",1.05,"auto","yes","yes",15); 
} 

$.fx.prototype.cur = function(){ 
if (this.elem[this.prop] != null && (!this.elem.style || this.elem.style[this.prop] == null)) { 
    return this.elem[ this.prop ]; 
} 
var r = parseFloat(jQuery.css(this.elem, this.prop)); 
return typeof r == 'undefined' ? 0 : r; 
} 
</script> 
<script src="scripts\jquery.mCustomScrollbar.js"></script> 

これはJavaScriptで位置アコーディオンメニューのためにある、次のとおりです

$(document).ready(function() { 
$('.portfolio').click(function() { 
    $('.accordionContent').slideUp('normal'); 
    if($(this).next().is(':hidden') == true) { 
     $(this).next().slideDown('normal'); 
    } 
});  
$('.accordionContent').hide(); 
}); 
}); 

そして最後にではなく、少なくともをボタンを示しライブラリー私はを含むことを意味していますそれを理解したよう

$(document).ready(function() { 
$('#about, #graph, #int, #arch, #serv, #contact').hide(); 

$('#about_button').click(function() { 
$(this).removeClass("about").addClass("highlightabout"); 
$('#graph_button').removeClass("highlightgraph").addClass("graph"); 
$('#int_button').removeClass("highlightint").addClass("int"); 
$('#arch_button').removeClass("highlightarch").addClass("arch"); 
$('#serv_button').removeClass("highlightserv").addClass("serv"); 
$('#contact_button').removeClass("highlightcontact").addClass("contact"); 
$('#graph, #int, #arch, #serv, #contact, #box7').hide(); 
$('#about').show(); 
           } 
$('#graph_button').click(function() { 
$(this).removeClass("graph").addClass("highlightgraph"); 
$('#about_button').removeClass("highlightabout").addClass("about"); 
$('#int_button').removeClass("highlightint").addClass("int"); 
$('#arch_button').removeClass("highlightarch").addClass("arch"); 
$('#serv_button').removeClass("highlightserv").addClass("serv"); 
$('#contact_button').removeClass("highlightcontact").addClass("contact"); 
$('#about, #int, #arch, #serv, #contact, #box7').hide(); 
$('#graph').show(); 
}); 
}); 

：JavaScriptでも、（それが長いように私はそれのすべてを掲載しませんが）メニューが表示されるように上のファイルを含めますこれらのライブラリのすべてまたは1つ前に？

ありがとうございました！

UPDATE：あなたも、あなたはすでにmentionendとしてjQuery.noConflict()を使用する必要が$定義プロトタイプを、使用していると私のjavascriptの仕事http://jsfiddle.net/hSRDn/

Answer 1

を表示するjsfiddle。すべてのライブラリが含まれた後

が、任意のjQueryコードが書き込まれる前に、noConflict()機能を使用します：あなたは2つの選択肢がありjQuerys documentationによると

<script type="text/javascript" src="other_lib.js"></script> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
    $.noConflict(); 
    // Code that uses other library's $ can follow here. 
</script> 

このことは、jQueryのプロトタイプに戻っ$を与えます。あなたは$の代わりにjQueryを使用する必要があります。たとえば、次のようにこの関数内

<script type="text/javascript" src="other_lib.js"></script> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
    $.noConflict(); 
    jQuery(document).ready(function($) { 
    // Code that uses jQuery's $ can follow here. 
    }); 
    // Code that uses other library's $ can follow here. 
</script> 

：このような（文書ロード機能で例えば）

<script type="text/javascript"> 
    $.noConflict(); 
    // Code that uses other library's $ can follow here. 
    jQuery('#some-elemtent').hide(); // jQuery usage 
    $('some-element').observe(....) // prototype usage 

</script> 

それとも、あなただけの関数スコープ内のjQueryを使用する場合は、それに$をバインドすることができます$は、プロトタイプの代わりにjQuery定義を参照します。

Answer 2

まずは、jQueryライブラリを1つだけ使用してください。あなたは1つ以上を必要としません。 2番目：実際には、ライブラリの数を減らすことを考えてください。 3番目：$.noConflict()は、jQueryの直後に使用する必要があります。その後、ドル記号はjQueryのエイリアスにはなりません。$の代わりにjQueryを使用する必要があります。