Yahoo, netease Ajax tag navigation effect implementation

ajax| Navigation | yahoo

After many improvements, can be used directly on the general Web site, now release the source program download (encoding for Utf-8, to gb3212 method is: With Notepad open, save when the corresponding encoding), hope for everyone useful (although not necessarily practical).
Because only the label navigation, all content will be reflected in the channel page, where all with Ajax read.

function of the realization of ideas :

Yahoo China

• Click Trigger
• block Lock: a{display:block;height:16px;} /* Lock A to block level, then define height and Width * *
• Click the pop-up link again: return False when a read is required in the OnClick event of the tag;
• Ajax Read Data
• Data staging
• Window Smooth Shrink

Netease

• Mouse over delay trigger: onmouseover var waitinterval=window.settimeout ("func ();"); onmouseout cleartimeout (Waitinterval);
• block Lock, Ajax read data, data staging, window smooth contraction

Other functions:

• Cookie Memory
• Last server time to read data
• Sliding Door Technology

Online effect:
Http://www.lorlo.com/tab.html

SOURCE Download: Click here to download source files

JS file Analysis:

Code Copy Box
function GetObject (objectId) {if (document.getElementById && document.getElementById (objectId)) {//The consortium do M return document.getElementById (objectId); else if (document.all && document.all (objectId)) {//MSIE 4 DOM return document.all (objectId); else if (document.layers && Document.layers[objectid]) {//NN 4 DOM. Note:this won ' t find nested L Ayers return Document.layers[objectid]; else {return false; The Var responsecont;var xmlhttp;var xh=new object (), var rqtp=new object (), Var datestr,dstr;var requesttype;var etype=0; var newsstring;var ajccache=new Object (); var url;var mousedelaytime=200;//Mouse Induction delay var Waitinterval;var Browser = new Object (); Browser.ismozilla = (typeof document.implementation!= ' undefined ') && (typeof Document.implementation.createDocument!= ' undefined ') && (typeof htmldocument!= ' undefined '); Browser.isie = window. ActiveXObject? True:false; Browser.isfiRefox = (Navigator.userAgent.toLowerCase (). IndexOf ("Firefox")!=-1); Browser.isopera = (Navigator.userAgent.toLowerCase (). IndexOf ("opera")!=-1); function Setcookie (name,value,expires) {//write Cookievar exp=new Date (); Exp.settime (Exp.gettime () +expires*60000);d ocument.cookie=name+ "=" +escape (value) + "; Expires= "+exp.togmtstring ();//+";d omain=arkoo.com;path=/";} function Readcookie (name) {//Read Cookievar oregex=new RegExp (name+ ' = ([^;] +) ', ' I '); var omatch=oregex.exec (Document.cookie); if (omatch&&omatch.length>1) return unescape (oMatch[1) ); else return ';} function Createxmlhttprequest () {//Initialize Mozilla XMLHttpRequest Object if window. XMLHttpRequest) {xmlHttp = new XMLHttpRequest (); }//Initialize for ie/windows ActiveX version else if (window. ActiveXObject) {try{xmlHttp = new ActiveXObject ("msxml2.xmlhttp.3.0"); catch (e) {try{xmlHttp = new ActiveXObject ("Microsoft.XMLHTTP"); catch (e) {NEWSSTring = "<div class= ' loading ' >loading rquest content fail, please try it again latter...</div>";} }}}function getnews (tagid,x) {url = "tab/" +tagid+ ' _ ' +x+ '. html '; var url2=url;requesttype = Tagid;if (ajccache[url]== NULL) {var loadstatustext= "<div class= ' loading ' > Loading request content, please wait...</div> "; rqtp[tagid]=tagid; Createxmlhttprequest (); var Hdr=tagid; Xh[tagid]=xmlhttp; if (etype==1) getObject (requesttype+ ' _cnt '). InnerHTML = Loadstatustext; Xh[tagid].onreadystatechange = function () {//only if XmlHttp shows "complete" if (Xh[tagid].readystate = 4) {// Only HTTP to process if (window.location.href.indexOf ("http") ==-1 | | xh[tagid].status = = Newsstrin g = Xh[tagid].responsetext; Datestr=xh[tagid].getresponseheader ("Date"); Dstr = new Date (DATESTR); Setcookie (' Dstr ', dstr,10000000); Inject centent to Tab-pane Shownews (rqtp[tagid],newsstring); ajccache[url2]=newsstring; }} xh[tagid].open ("Get", url, True); Xh[tagid].setrequestheader ("If-modified-since", "0"); Xh[tagid].send (null);} Else{shownews (Requesttype,ajccache[url]);} function Shownews (requesttype,newsstring) {//<![ cdata[Responsecont = getObject (requesttype+ ' _cnt '); responsecont.innerhtml = newsstring; GetObject ("Pdate"). Innerhtml=dstr;if (GetObject ("Alta")) {ATA (GetObject ("Alta")); HideText (); ]]>}function Tabnews (tagid,x) {var lim=getobject (tagid+ "_mn"). getElementsByTagName (' Li '); var mnt=getobject (tagid+ "_mn"). getElementsByTagName (' li '). length; if (!mnt) mnt=4; for (Var i=0;i<mnt;i++) {if (i = = (x-1)) {if (i==0) {lim[i].classname= "tabactive1"; } else{lim[i].classname= "Tabactive2"; Lim[i-1].getelementsbytagname (' a ') [0].style.background= "url ()"; } lim[i].getelementsbytagname ('A ') [0].style.background= "url (tab/images/tab_bgs.gif) right-60px no-repeat"; Try{getnews (tagid,x);} catch (E) {alert (e);} } else{lim[i].classname= ""; Lim[i].getelementsbytagname (' a ') [0].style.background=] URL (tab/images/tab_bgs.gif) right-88px no-repeat "; }}var idn,tmpa,tmpat;var aw= ""; var rt;function aet (TAGID,ETP) {var lis=getobject (tagid+ "_mn"). getElementsByTagName ( ' Li '); var wts=tagid+ "_cnt"; var wnf=tagid+ "info"; if (Readcookie (tagid+ "_cntd") = "None") {Hiddenlist (getObject)) ; Maxh[wts]=readcookie (tagid+ "_cnth"); GetObject ("Pdate"). Innertext=readcookie ("Dstr"); }else{if (parseint (Readcookie (WNF)) >1) tabnews (Tagid,readcookie (WNF));/return last access Else tabnews (tagid,1); if (etp==1) Aw=tagid+readcookie (WNF);} for (Var iy=0;iy<lis.length;iy++) {with (Lis[iy]) {if (etp==0) {lis[iy].onmouseover=function () { Rt=attributes.getnameditem (' id '). value.substring (0, AttributEs.getnameditem (' id '). value.length-1); if (GetObject (rt+ ' _cnt '). Style.display!= "None" &&classname!= "") return; Idn=parseint (Attributes.getnameditem (' id '). value.substring (Attributes.getnameditem (' id '). value.length-1, Attributes.getnameditem (' id '). value.length); Cleartimeout (Waitinterval); Waitinterval=window.settimeout ("etype=0; Tabnews (RT,IDN); if (GetObject (rt+ ' _cnt '). style.display = ' None ') displaylist (rt+ ' _cnt '); Setcookie (rt+ ' info ', idn,10000000); Setcookie (rt+ ' _cntd ', ' ture ', 10000000); ", mousedelaytime); } lis[iy].onmouseout=function () {if (GetObject (rt+ ' _cnt '). Style.display!= "None" &&classname!= "") return;cle Artimeout (waitinterval);} } if (etp==1) {lis[iy].onmouseover=function () {getElementsByTagName (' a ') [0].blur ();} Lis[iy].onclick=function () {Idn=parseint (Attributes.getnameditem (' id '). value.substring (Attributes.getnameditem (' id '). value.length-1, Attributes.getnameditem (' ID '). value.length); Rt=attributes.getnameditem (' id '). value.substring (0, Attributes.getnameditem (' id '). value.length-1); if (GetObject (rt+ ' _cnt '). Style.display!= "None" && (idn==1&& (this.classname== "tabactive1") | | Aw==attributes.getnameditem (' id '). value)) return true; if (GetObject (rt+ ' _cnt '). Style.display = = "None" {displaylist (rt+ ' _cnt '); Setcookie (rt+ ' _cntd ', ' ture ', 10000000); } etype=1; Tabnews (RT,IDN); Setcookie (rt+ ' info ', idn,10000000); Aw=attributes.getnameditem (' id '). value; getElementsByTagName (' a ') [0].blur (); return false; '}}} function Ata (ObjID) {var as=objid.getelementsbytagname (' a '); for (Var i=0;i<as.length;i++) {as[i].target= "_ Self ";}} function Geturlparam (paramname) {//Get URL parameter var oregex = new RegExp (' [\?&] ' + paramname + ' = ([^&]+) ', ' I ') ; var omatch = oregex.exec (Window.location.search); IfOmatch && omatch.length > 1) return omatch[1]; else return ';} function HideText () {if (document.getElementsByTagName ("Arkoo:title"). length==0) {var upu=geturlparam ("username"); var upa=geturlparam ("ArticleID"); GetObject ("Closeit"). Innerhtml= ' <a href= ' http://cn.arkoo.com/diaryfiles/ Showpage.aspx?username= ' +upu+ ' &articleid= ' +upa+ ' target= ' _blank ' > View original </a> <a href= ' tab.html ' target= "_self" >x</a>}} var maxh=new Object ()//Display content box function displaylist (OID) {var h = 0; var objid=getobject (OID); if (isNaN (parseint (maxh[oid))) var max_h = 210; Maximum height of the container else var max_h = maxh[oid]; var anim = function () {H + + 50;//50 pixels per increment if (H >= max_h) { Objid.style.height = max_h + "px";; GetObject (' tab ' +objid.attributes.getnameditem (' id '). value). style.background= "url (tab/images/tab_bgs.gif) 5px- 113px No-repeat "; //Let the picture label change the background if (TT) {window.clearinterval (TT);} } else{objid.style.display= "block"; Objid.style.height = h + "px"; } var tt = Window.setinterval (anim,2); }//Hide list box function Hiddenlist (objid) {var h = objid.offsetheight; var anim = function () {h-= 50;//50 pixels per decrement if (H <= 5) {Objid.style.dis Play= "None"; GetObject (' tab ' +objid.attributes.getnameditem (' id '). value). style.background= "url (tab/images/tab_bgs.gif) -14px- 114px No-repeat "; if (TT) {window.clearinterval (TT);} } else{objid.style.height = h + "px"; } var tt = Window.setinterval (anim,2); }function showclasslist (OID) {var objid=getobject (OID); if (Objid.style.display = "None"){if (Objid.getelementsbytagname ("img"). length==0) Tabnews (oid.substring (0,oid.indexof ("_")), 1); Displaylist (OID); Display contents Box Setcookie (oid+ ' d ', "ture", 10000000); } else{if (isNaN (parseint (maxh[oid))) {if (Browser.isfirefox) {maxh[oid]=objid.offsetheight; } else{maxh[oid]=objid.offsetheight//content container's initial height} hiddenlist (ObjID); Hidden contents Box Setcookie (oid+ ' d ', "none", 10000000); Setcookie (oid+ ' h ', maxh[oid],10000000); }}
[Ctrl + a All select and copy]