jquery 스크립트를 Scriptaculous 프로토 타입으로 변환 하시겠습니까?

Question

안녕하세요 저는 여기 내 바닥 글 채팅 패널 jquery 내 코드를 have 그리고 Scriptaculous와 충돌입니다. 순수 js로 변환하거나 Scriptaculous 프로토 타입을 사용하고 싶습니다. 어떤 도움이 필요하십니까? 감사합니다.

$ (문서) .ready (함수() {

$.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>