Javascript 将jquery脚本转换为原型Scriptaculous？

您好，我的代码在jquery中，用于我的页脚聊天面板，它与Scriptaculous冲突。我希望它转换成纯js或使用Prototype Scriptaculous。 有什么帮助吗？ 谢谢大家!

$（文档）.ready（函数（）{

$.fn.adjustPanel=function（）{
$（this.find（“ul，.subpanel”）.css（{'height'：'auto'}）；
var windowHeight=$（window）.height（）；//获取浏览器视口的高度
var panelsub=$（this）.find（“.subpanel”）.height（）；//获取子面板的高度
var panelAdjust=windowHeight-100；//视口高度-100px（设置子面板的最大高度）
var ulAdjust=panelAdjust-25；//调整子面板后计算ul尺寸（27px为底板高度）
如果（panelsub>=panelAdjust）{//如果子面板高于最大高度。。。
$（this.find（“.subpanel”）.css（{'height'：panelAdjust}）；//将subpanel调整为最大高度
$（this.find（“ul”）.css（{'height'：ulAdjust}）；//将子面板ul调整为新大小
}
如果（panelsub

您可以。

使用

例如：

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

---

用以下代码替换上面的代码

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

$.noConflict（）；
jQuery（文档）.ready（函数（$）{
//使用jQuery的$的代码如下所示。
///////////////////////////////////////////////////////////////////////////////
$（文档）.ready（函数（）{
$.fn.adjustPanel=函数（）{
$（this.find（“ul，.subpanel”）.css（{'height'：'auto'}）；
var windowHeight=$（window）.height（）；//获取浏览器视口的高度
var panelsub=$（this）.find（“.subpanel”）.height（）；//获取子面板的高度
var panelAdjust=windowHeight-100；//视口高度-100px（设置子面板的最大高度）
var ulAdjust=panelAdjust-25；//调整子面板后计算ul尺寸（27px为底板高度）
如果（panelsub>=panelAdjust）{//如果子面板高于最大高度。。。
$（this.find（“.subpanel”）.css（{'height'：panelAdjust}）；//将subpanel调整为最大高度
$（this.find（“ul”）.css（{'height'：ulAdjust}）；//将子面板ul调整为新大小
}
如果（panelsub

@devzone:您是否使用

jQuery

而不是

$

，并包括

jQuery.noConflict（）；

？

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