將jquery Script轉換爲Prototype Scriptaculous？

Question

您好我的代碼在這裏在jQuery中爲我的頁腳聊天面板而且它與Scriptaculous衝突。我希望它轉換成純js或使用Prototype Scriptaculous。 任何幫助？ 謝謝！

$（文件）。就緒（函數（）{

$.fn.adjustPanel = function(){ 
    $(this).find("ul, .subpanel").css({ 'height' : 'auto'}); 

    var windowHeight = $(window).height(); //Get the height of the browser viewport 
    var panelsub = $(this).find(".subpanel").height(); //Get the height of subpanel 
    var panelAdjust = windowHeight - 100; //Viewport height - 100px (Sets max height of subpanel) 
    var ulAdjust = panelAdjust - 25; //Calculate ul size after adjusting sub-panel (27px is the height of the base panel) 

    if (panelsub >= panelAdjust) {  //If subpanel is taller than max height... 
     $(this).find(".subpanel").css({ 'height' : panelAdjust }); //Adjust subpanel to max height 
     $(this).find("ul").css({ 'height' : ulAdjust}); //Adjust subpanel ul to new size 
    } 
    else if (panelsub < panelAdjust) { //If subpanel is smaller than max height... 
     $(this).find("ul").css({ 'height' : 'auto'}); //Set subpanel ul to auto (default size) 
    } 
}; 
//Execute function on load 
$("#chatpanel").adjustPanel(); //Run the adjustPanel function on #chatpanel 
$("#alertpanel").adjustPanel(); //Run the adjustPanel function on #alertpanel 

//Each time the viewport is adjusted/resized, execute the function 
$(window).resize(function() { 
    $("#chatpanel").adjustPanel(); 
    $("#alertpanel").adjustPanel(); 
}); 


    //Click event on Chat Panel + Alert Panel 
$("#chatpanel a:first, #alertpanel a:first,#alertpanel2 a:first,#likes a:first,#twiter a:first").click(function() { //If clicked on the first link of #chatpanel and #alertpanel... 
    if($(this).next(".subpanel").is(':visible')){ //If subpanel is already active... 
     $(this).next(".subpanel").hide(); //Hide active subpanel 
     $("#footpanel li a").removeClass('active'); //Remove active class on the subpanel trigger 
    } 
    else { //if subpanel is not active... 
     $(".subpanel").hide(); //Hide all subpanels 
     $(this).next(".subpanel").toggle(); //Toggle the subpanel to make active 
     $("#footpanel li a").removeClass('active'); //Remove active class on all subpanel trigger 
     $(this).toggleClass('active'); //Toggle the active class on the subpanel trigger 
    } 
    return false; //Prevent browser jump to link anchor 
}); 

//Click event outside of subpanel 
$(document).click(function() { //Click anywhere and... 
    $(".subpanel").hide(); //hide subpanel 
    $("#footpanel li a").removeClass('active'); //remove active class on subpanel trigger 
}); 
$('.subpanel ul').click(function(e) { 
    e.stopPropagation(); //Prevents the subpanel ul from closing on click 
}); 

Answer 1

您可以use jQuery with other libraries

Answer 2

使用jQuery noConflict

例：

var j = jQuery.noConflict(); 
// Do something with jQuery 
j("div p").hide(); 
// Do something with another library's $() 
$("content").style.display = 'none'; 

Answer 3

替換上面代碼這

<script type="text/javascript"> 

    $.noConflict(); 



jQuery(document).ready(function($) { 
// Code that uses jQuery's $ can follow here. 


/////////////////////////////////////////////////////////////////////////////// 

$(document).ready(function(){ 


$.fn.adjustPanel = function(){ 
    $(this).find("ul, .subpanel").css({ 'height' : 'auto'}); 

    var windowHeight = $(window).height(); //Get the height of the browser viewport 
    var panelsub = $(this).find(".subpanel").height(); //Get the height of subpanel 
    var panelAdjust = windowHeight - 100; //Viewport height - 100px (Sets max height of subpanel) 
    var ulAdjust = panelAdjust - 25; //Calculate ul size after adjusting sub-panel (27px is the height of the base panel) 

    if (panelsub >= panelAdjust) {  //If subpanel is taller than max height... 
     $(this).find(".subpanel").css({ 'height' : panelAdjust }); //Adjust subpanel to max height 
     $(this).find("ul").css({ 'height' : ulAdjust}); //Adjust subpanel ul to new size 
    } 
    else if (panelsub < panelAdjust) { //If subpanel is smaller than max height... 
     $(this).find("ul").css({ 'height' : 'auto'}); //Set subpanel ul to auto (default size) 
    } 
}; 
//Execute function on load 
$("#chatpanel").adjustPanel(); //Run the adjustPanel function on #chatpanel 
$("#alertpanel").adjustPanel(); //Run the adjustPanel function on #alertpanel 

//Each time the viewport is adjusted/resized, execute the function 
$(window).resize(function() { 
    $("#chatpanel").adjustPanel(); 
    $("#alertpanel").adjustPanel(); 
}); 


    //Click event on Chat Panel + Alert Panel 
$("#chatpanel a:first, #alertpanel a:first,#alertpanel2 a:first,#likes a:first,#twiter a:first").click(function() { //If clicked on the first link of #chatpanel and #alertpanel... 
    if($(this).next(".subpanel").is(':visible')){ //If subpanel is already active... 
     $(this).next(".subpanel").hide(); //Hide active subpanel 
     $("#footpanel li a").removeClass('active'); //Remove active class on the subpanel trigger 
    } 
    else { //if subpanel is not active... 
     $(".subpanel").hide(); //Hide all subpanels 
     $(this).next(".subpanel").toggle(); //Toggle the subpanel to make active 
     $("#footpanel li a").removeClass('active'); //Remove active class on all subpanel trigger 
     $(this).toggleClass('active'); //Toggle the active class on the subpanel trigger 
    } 
    return false; //Prevent browser jump to link anchor 
}); 

//Click event outside of subpanel 
$(document).click(function() { //Click anywhere and... 
    $(".subpanel").hide(); //hide subpanel 
    $("#footpanel li a").removeClass('active'); //remove active class on subpanel trigger 
}); 
$('.subpanel ul').click(function(e) { 
    e.stopPropagation(); //Prevents the subpanel ul from closing on click 
}); 


/////////////////////////////////////////////////////////////////////////////// 

}); 




    </script>