JS_EssayStyle

本文介绍了一种通过JavaScript实现博客左侧菜单样式的动态调整方法。该方法可以改变菜单项的显示形式,增强用户交互体验,并详细解释了如何加载子项及处理鼠标悬停等事件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

//SCRIPT_START
function c2()
{
    alert('hello w');
}
//Change Left Menu (Eassay)
function ChangeEssayStyle()
{
     var oLeftMenu = document.getElementById("leftmenu");
     var arrLi =oLeftMenu.getElementsByTagName('li');  
           arrLi = arrLi[0].parentNode.getElementsByTagName('li');
      for(var i=0;i<arrLi.length;i++)
         if(arrLi[i].className=='listitem')
         {
            arrLi[i].removeChild(arrLi[i].getElementsByTagName('a')[1]);
            var href = arrLi[i].getElementsByTagName('a')[0].href;
            var reg1 = /<a(.*)<//a>/ig;
            var strTmp = arrLi[i].innerHTML;
                  strTmp = strTmp.replace(reg1,'<span style="cursor:pointer;color:blue;" status="out" onmouseover="mhovItem(this)" onmouseout="motItem(this)" onclick="mclItem(this)"$1 <//span>');
            arrLi[i].innerHTML = strTmp; arrLi[i].getElementsByTagName('span')[0].href = href;
         }
}
function mhovItem( oItem )
{
    oItem.status = oItem.status=="clicked"?click:"over";
    oItem.style.border = "1px solid rgb(128,128,128)";
    oItem.style.backgroundColor = "rgb(192,192,192)";
}
function motItem( oItem )
{
    if( oItem.status=="clicked" )
       return;
    oItem.status = "out";
    oItem.style.border = "";
    oItem.style.backgroundColor = "Transparent";
}
function mclItem( oItem )
{
   var oListItem = oItem.parentNode;
   if( oItem.status=="clicked" )
   {
         oItem.status="over"; mhovItem(oItem);
         for( var i=0; i<oListItem.childNodes.length; i++ )
         {
            if(oListItem.childNodes[i].name=="AddItems")
            {
                oListItem.removeChild(oListItem.childNodes[i]); i--;
            }
         }
         return;
   }
   oItem.status="clicked";
   oItem.style.backgroundColor = "white";
   oItem.style.border="1px solid gray";
   var strHref = oItem.href;
   var tmpDiv = document.createElement('div');
       tmpDiv.style.backgroundColor='transparent';
       tmpDiv.style.fontSize='8pt';
       tmpDiv.name="AddItems";
       tmpDiv.innerHTML = "Loading...";
       oListItem.appendChild(tmpDiv);
       LoadSubItem(oItem);
}

function  LoadSubItem(oHref)
{
        var  oListItem = oHref.parentNode;
        var  xmlhttp = new _xmlhttp(oHref.href,true);
               xmlhttp.OnStatus200 = LoadSubItem_CallBack( oListItem);
               xmlhttp.openRef("GET",true,null,null);
               xmlhttp.sendRef();
}
function LoadSubItem_CallBack( oListItem )
{
   return function()
   {
        oListItem.removeChild(oListItem.childNodes[oListItem.childNodes.length-1]);
        var strContent = this.getResponseText();
        var rePostTitle = /<div class="postTitle"[/w|/W]*?//div>/g ;
        var arrPostTitle = new Array();
        while( arrPostTitle = rePostTitle.exec(strContent) )
        {
            var strPassageInfo = arrPostTitle[0];
            // Get PassageInfo;
            var reArticleTitle = /">.*?</i;//PassageTitle;
            var reArticleHref  = /href=/".*/"/i;//Passage href
            var arrArticleTitle = reArticleTitle.exec(strPassageInfo);
            var strArticleTitle = arrArticleTitle[0].slice(2,-1);
            var arrArticleHref  = reArticleHref.exec(strPassageInfo);
            var strHref = arrArticleHref[0].slice(6,-1);

            var oSubItem = document.createElement("div");
                  oSubItem.name = 'AddItems';
            oListItem.appendChild(oSubItem);
            oSubItem.innerHTML="&nbsp;&nbsp;-";
            var oChild = document.createElement("span");
                  oChild.style.fontSize = '8pt';
                  oChild.style.cursor = 'pointer';
                  oChild.style.backgroundColor='transparent';
                  oChild.href = strHref;
                  oChild.oriText = strArticleTitle;
                  oChild.bShowTip = "false";
                  oChild.innerHTML = AdjustStringAccordingParent(strArticleTitle,oChild,oSubItem);
                  oSubItem.appendChild(oChild);
                  oChild.onmousemove = function(){mhovSubItem(this,arguments[0]);};
                  oChild.onmouseout = function(){ motSubItem(this);};
                  oChild.onclick = function(){mclSubItem(this);};
        }
   }//return function end
}

function mhovSubItem(oItem,evt)
{
var event = this.event?this.event:evt;
if( oItem.bShowTip!="true")
{
oItem.style.backgroundColor="rgb(157,254,129)";
oItem.style.border = "1px solid rgb(0,255,128)";
var nLeft = event.clientX + 6;
var nTop = oItem.offsetTop+oItem.offsetHeight+2;
var toolTip = document.createElement("div");
toolTip.id="tooltip";
   toolTip.style.position="absolute";
   toolTip.style.left = nLeft;
   toolTip.style.top = nTop;
   toolTip.style.border = "1px solid rgb(241,239,226)";
   toolTip.style.borderBottom = "1px solid rgb(113,111,100)";
   toolTip.style.borderRight = "1px solid rgb(113,111,100)";
   toolTip.style.backgroundColor = "white";
 
   var toolTipContent = document.createElement('div');
          toolTipContent.style.border='2px solid rgb(223,223,223)';
          toolTipContent.style.color = 'rgb(53,53,53)';
          toolTipContent.style.fontFamily = 'monospace';
          toolTipContent.style.fontWeight = 'bold';
          toolTipContent.innerHTML = "<nobr>"+oItem.oriText+"<//nobr><//div>";
   toolTip.appendChild(toolTipContent);
   oItem.parentNode.appendChild(toolTip);
   oItem.bShowTip = "true";
   }
}
function motSubItem( oItem )
{
   oItem.style.background="transparent";
   oItem.style.border="none";
   var oToolTip = document.getElementById("tooltip");
   var oTmp = oItem.parentNode;
   oTmp.removeChild(oToolTip);
   oItem.bShowTip = "false";
}

function mclSubItem( oItem )
{
    ShowPageStatus("Loading:"+oItem.oriText);
    var  xmlhttp = new _xmlhttp(oItem.href,true);
           xmlhttp.OnStatus200 = mclSubItem_CallBack(oItem);
           xmlhttp.openRef("GET",true,null,null);
           xmlhttp.setRequestHeader("Content-Type","text/xml");
           xmlhttp.sendRef();
}
function mclSubItem_CallBack( oItem )
{
    return function()
    {
       ShowPageStatus("Showing:"+oItem.oriText);
        var strContent = this.getResponseText();
        var re3 = /<div class=/"postText/">.*<//div>/i;
        var re2 = /<div class=/"postTitle/">.*<//div>/i;
        var re1 = /<div class=/"postFoot/">.*<//div>/i;
        var arrIndex  = re3.exec(strContent);
        if( arrIndex==null)
        {
            alert("Locate postText  Error!");
            return;
        }
        var   strText = arrIndex[0];
                 strText = matchTag(strText , 'div');
        arrIndex = re2.exec(strContent);
        if( arrIndex==null )
             alert("Locate postTitle error!");
       var   strTitle = arrIndex[0];
               strTitle = matchTag(strTitle,'div');
       arrIndex = re1.exec(strContent);
       if( arrIndex==null)
              alert("Locate postFoot error!");
       var  strFoot = arrIndex[0];
              strFoot = matchTag(strFoot,'div');
        var   oPostText = ShowNewEssay(strTitle, strText ,strFoot);
       
        ShowComment( oItem.href, document.getElementById('main'));
    
      
        var re4 = /<div id=/"commentform/"[/w|/W]*<//div>/i;
        if( (arrIndex = re4.exec(strContent)) ==null )
        {
             alert("Locate comment form error!");
             return;
        }
        var strCommentForm = matchTag( arrIndex[0],'div' );
              strCommentForm = matchTag( arrIndex[0],'div' );
        var re5 = /<form name=/"Form1/"[/w|/W]*?<//div>/i;
        if( (arrIndex = re5.exec(strContent)) == null )
        {
              alert("Loacate Hidden Parameter1 of form error!");
              return;
        }
        var strHiddenParameter = matchTag( arrIndex[0],'div');
        var re6 = /<input type=/"hidden/" name=/"__EVENTVALIDATION/".*>/i;
        if( (arrIndex = re6.exec(strContent)) == null )
        {
              alert("Loacate Hidden Parameter2 of form error!");
              return;
        }
        strHiddenParameter += arrIndex[0];
       ShowCommentForm( strCommentForm,strHiddenParameter,document.getElementById('main'),oItem.href);
        ShowPageStatus("Finished:"+oItem.oriText);
    }//return function end;
}
function AdjustStringAccordingParent( strData , oTmpObj , oParentObj)
{
     oTmpObj.innerHTML= strData.substr(0,1);  
     oParentObj.appendChild(oTmpObj);
     var nPerHeight = oTmpObj.offsetHeight + 3;//
   
     oTmpObj.innerHTML= strData;
     if( oTmpObj.offsetHeight<=nPerHeight )
        return strData;//Only one line, return original string.
   
     var strTmp = strData;;
     while( oTmpObj.offsetHeight > nPerHeight )
     {
         strTmp = strTmp.substr(0,strTmp.length-2);
         oTmpObj.innerHTML= strTmp+"...";
     }
     var strReturn = oTmpObj.innerHTML;
     oParentObj.removeChild(oTmpObj);
     return  strReturn; 
}
function ShowNewEssay( strTitle, strContent ,strFoot)
{  
     var oMain = document.getElementById('main');
     var arrPosts = getElementsByClassName(oMain, 'post');
     //Show Title
     var oPostTitle = getElementsByClassName( arrPosts[0], 'postTitle')[0];
            oPostTitle.innerHTML = strTitle;
     //Show Content
     var arrPostTexts = getElementsByClassName( arrPosts[0],'postText');
     var oPostText = arrPostTexts[0];
     var oScript = oPostText.getElementsByTagName('script')[0];
     oPostText.innerHTML = strContent;

   
     //Show postFoot
    if(  arrPostFoots = getElementsByClassName( arrPosts[0],'postFoot'))   
    {
        var oPostFoot = arrPostFoots[0];
               oPostFoot.innerHTML = strFoot;
     }
    return oPostText;
}
function ShowComment( strHref, oParent )
{
    var    oComment = null;
             oComment  = document.getElementById('comment');
    if( oComment==null )
     {
           oComment = document.createElement('div');
           oComment.id = 'comment';
           oParent .appendChild(oComment);
      }
    oComment.innerHTML = 'Loading comments......';
   var   oTime = new Date();
    var  xmlhttp = new _xmlhttp(getCommentFileName( strHref )+"?id="+oTime.getTime(),true);
           xmlhttp.openRef("GET",false,null,null);
           xmlhttp.sendRef();
    oComment.innerHTML = xmlhttp.getResponseText();
}


function ShowCommentForm(strCodes, strFormHiddenPara, oParent,strHref)
{
     var oCommentForm = null;
     if( (oCommentForm = document.getElementById('commentform')) == null )
     {
            oCommentForm = document.createElement('div');
            oCommentForm.id = 'commentform';
            oParent.appendChild(oCommentForm);
     }
     oCommentForm.innerHTML = (strCodes+strFormHiddenPara);
   
     //Show Verify Code
     var oImgPath,oImgArea,oImg;
     try
     {
           if( (oImgPath=document.getElementById('VCImageSrc'))==null )
               throw "cannot find [VCImageSrc] Element ";
        if( (oImgArea = document.getElementById('VCImageSpan'))==null )
            throw "cannot find [VCImageSpan] Element ";
        oImg = document.createElement('img');
        oImg.alt = 'Verify Code';
        oImg.src = "http://blog.youkuaiyun.com"+oImgPath.value;
        oImgArea.appendChild(oImg);
        oImgArea.parentNode.parentNode.style.display = "";
      }
      catch(e1)
      {
           alert(e1);
           return false;
      }
     
      //Change Submit Button to Normal Button for AJAX
      try
      {
      var   oEVENTTARGET,oEVENTARGUMENT,oVIEWSTATE,oName,oNetAddr,oComment,oVerifyCodes,oBtnSubmit,oEVENTVALIDATION;
          oEVENTTARGET = getElementById('__EVENTTARGET',document,2);
          oEVENTARGUMENT = getElementById('__EVENTARGUMENT',document,2);
          oVIEWSTATE = getElementById('__VIEWSTATE',document,2);
            oName = getElementById('PostComment.ascx_tbName',document,2);
            oNetAddr = getElementById('PostComment.ascx_tbUrl',document,2);
            oComment = getElementById('PostComment.ascx_tbComment',document,2);
            oVerifyCodes = getElementById('PostComment.ascx_ValidationKey',document,2);    
            oBtnSubmit= getElementById('PostComment.ascx_btnSubmit',document,2);
            oEVENTVALIDATION = getElementById('__EVENTVALIDATION',document,2);     
       var  arrPost = new Array(oEVENTTARGET,oEVENTARGUMENT,oVIEWSTATE,oName,oNetAddr,oComment,oVerifyCodes,oBtnSubmit,oEVENTVALIDATION);
     
        var oMyBtn = document.createElement('input');
            oMyBtn.type = 'button';
            oMyBtn.className = 'Button';
            oMyBtn.value = 'Ajax Submit';
          oMyBtn.onclick = MySubmit(strHref,arrPost,strHref, oParent);   
      
        oBtnSubmit.parentNode.insertBefore(oMyBtn,oBtnSubmit);
        oBtnSubmit.style.display = 'none';
      }
      catch(e2)
      {
           alert('Exception:'+e2);
           return false;
      }
}
 function MySubmit(strAction,arrSendContent,strCommentHref, oCommentParent)
{
    return function()
    {
          var  xmlhttp = new _xmlhttp(strAction,true);
                 xmlhttp.openRef("POST",false,null,null);
                 xmlhttp.setRequestHeader("Referer","http://www.163.com");
                 alert("http://www.163.com");
                 xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
         var strSend='';
         try
         {
             if( arrSendContent.constructor!=Array)
                   throw("Exception: arrSendContent is not an Array");
              for( var i=0; i<arrSendContent.length; i++ )
                                             strSend+=(encodeURIComponent(arrSendContent[i].name)+'='+encodeURIComponent(arrSendContent[i].value)+'&');
          strSend = strSend.substr(0,strSend.length-1);
      }
      catch(e1)
      {
          alert(e1+"/nPadding Post Data Error");
      }
      xmlhttp.sendRef(strSend);
      xmlhttp.getResponseText();
      ShowComment( strCommentHref, oCommentParent);
    }//return function End;
}//MySubmit End;


 function matchTag( strChaos, tagName )
{
        var   reTag = eval('/<(///)?'+tagName+'.*?>/ig');
        var   nStack = 0;
        while( (arrTest = reTag.exec(strChaos))!=null)
        {  
              nStack += ((RegExp.$1)==''?1:-1);
              if( !nStack )
                      break;
        }
        if( nStack != 0 )
          return "Error: matchTag() cannot match tag:"+tagName;
       
     var  reTagStart = eval('/<'+tagName+'.*?>/i');
     var  arrTag = reTagStart.exec(strChaos);
     return strChaos.substring(arrTag.index+arrTag[0].length,arrTest.index);
}
//Change Left Menu (Eassay) End
//SCRIPT_END
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值