163 AJAX Tab

差点是帅哥nice

差点是帅哥nice

2016-02-19 13:03

清醒时做事,糊涂时读书,大怒时睡觉,无聊时关注图老师为大家准备的精彩内容。下面为大家推荐163 AJAX Tab,无聊中的都看过来。

代码如下:

// 163 AJAX Tab  
// update 2006.10.18 
// 增加鼠标延迟感应特性。 
// update 2006.10.8 
// A 标签 href 属性将保持原有HTML功能。增加urn属性为AJAX Load 路径。 
// update 2006.10.11 
// 修正IE5.0 undefined 未定义错误,增加脚本错误屏蔽 
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); 
if (Browser.isFirefox) { // entend Event Mod for FireFox 
    extendEventObject(); 

function extendEventObject() { 
    Event.prototype.__defineGetter__("srcElement", function () { 
        var node = this.target; 
        while (node.nodeType != 1) node = node.parentNode; 
        return node; 
    }); 

    Event.prototype.__defineGetter__("fromElement", function () { 
        var node; 
        if (this.type == "mouseover") 
            node = this.relatedTarget; 
        else if (this.type == "mouseout") 
            node = this.target; 
        if (!node) return; 
        while (node.nodeType != 1) node = node.parentNode; 
        return node; 
    }); 

    Event.prototype.__defineGetter__("toElement", function () { 
        var node; 
        if (this.type == "mouseout") 
            node = this.relatedTarget; 
        else if (this.type == "mouseover") 
            node = this.target; 
        if (!node) return; 
        while (node.nodeType != 1) node = node.parentNode; 
        return node; 
    }); 

function IsChild(cNode,pNode){ 
    while(cNode!=null){ 
        cNode=cNode.parentNode; 
        if(cNode==pNode) return true;  
    } 
    return false; 


var ajccache=new Object(); 
var waitInterval; 
var tempref; 
var MouseDelayTime=150;//鼠标感应延迟300毫秒 
function getTBprefixName(str,sta){ 
    if(str.indexOf("active")!=-1 || str.indexOf("normal")!=-1) str=str.substr(6); 
        else if(str.indexOf("over")!=-1) str=str.substr(4); 
            else str=""; 
    return sta+str; 

function startajaxtabs(){ 
    for(var i=0;iarguments.length;i++) 
    { 
        var ulobj=document.getElementById(arguments[i]); 
            ulist=ulobj.getElementsByTagName("li");             
            for(var j=0;julist.length;j++) 
            { 
                var thelist=ulist[j]; 
                if(thelist.parentNode.parentNode!=ulobj) continue;//只有第一层li有效 fixed 2006.9.29 
                var ulistlink=thelist.getElementsByTagName("a")[0]; 
                var ulistlinkurl=ulistlink.getAttribute("urn"); 
                var ulistlinktarget=ulistlink.getAttribute("rel"); 
                thelist.setActive=function(bactive){ 
                    if(bactive){ 
                        this.status="active"; 
                        this.className=getTBprefixName(this.className,"active"); 
                    }else{ 
                        this.status="normal"; 
                        this.className=getTBprefixName(this.className,"normal"); 
                    } 
                } 
                thelist.LoadTab=function(){ 
                    this.setActive(true); 
                    this.parentNode.parentNode.activetab.setActive(false); 
                    this.parentNode.parentNode.activetab=this;                     
                    var ulistlink=this.getElementsByTagName("a")[0]; 
                    loadAJAXTab(ulistlink.getAttribute("urn"),ulistlink.getAttribute("rel")); 
                } 
                thelist.onmouseover=function(aEvent){ 
                    var myEvent = window.event ? window.event : aEvent; 
                    var fm=myEvent.fromElement; 
                    if(IsChild(fm,this) || fm==this) return;//过滤子元素event 
                    if(this.status=="active") return; 
                    tempref=this; 
                    clearTimeout(waitInterval); 
                    waitInterval=window.setTimeout("tempref.LoadTab();",MouseDelayTime); 
                } 

                thelist.onmouseout=function(aEvent){ 
                    var myEvent = window.event ? window.event : aEvent; 
                    var em=myEvent.toElement; 
                    if(IsChild(em,this) || em==this) return; //过滤子元素event 
                    if(this.status=="active") return; 
                    clearTimeout(waitInterval); 
                } 

                if(ulistlinkurl.indexOf("#default")!=-1){ 
                    thelist.setActive(true); 
                    ulobj.activetab=thelist; 
                    ajccache[ulistlinkurl]=getElement(ulistlinktarget).innerHTML; 
                }else{ 
                    thelist.setActive(false); 
                } 

            } 
        if(ulobj.activetab==null) ulobj.activetab=ulist[0]; 
    } 


function getXmlhttp() 

    var http_request; 

    if(window.XMLHttpRequest) {  
        http_request = new XMLHttpRequest(); 
        if (http_request.overrideMimeType) { 
            http_request.overrideMimeType("text/xml"); 
        } 
    } 
    else if (window.ActiveXObject) {  
        try { 
            http_request = new ActiveXObject("Msxml2.XMLHTTP"); 
        } catch (e) { 
            try { 
                http_request = new ActiveXObject("Microsoft.XMLHTTP"); 
            } catch (e) {} 
        } 
    } 
    if (!http_request) {  
        window.alert("can't create XMLHttpRequest object."); 
        return null; 
    }     
    return http_request; 


function loadAJAXTab(url,contentid){ 
    var ocontent=getElement(contentid); 
    if(ajccache[url]==null) { 
        var xhttp=getXmlhttp();         
            xhttp.onreadystatechange=function(){ 
                if(xhttp.readyState == 4 && (xhttp.status==200 || window.location.href.indexOf("http")==-1)) 
                {                     
                    ocontent.innerHTML=xhttp.responseText; 
                    ajccache[url]=ocontent.innerHTML; 
                } 
            } 
        xhttp.open("GET",url,true); 
        xhttp.send(null); 
    }else{ 
        ocontent.innerHTML=ajccache[url]; 
    } 

window.onerror=function(){return true}

具体使用方法,看www.163.com用的

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

163 AJAX Tab

Web开发
163 AJAX Tab

Tab页界面用jQuery及Ajax技术实现

Web开发
Tab页界面用jQuery及Ajax技术实现

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

AJAX结合CSS实现的网页Tab选项卡效果

Web开发
AJAX结合CSS实现的网页Tab选项卡效果

Tab Ctrl

编程语言 网络编程
Tab Ctrl

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

讨论水平tab与垂直tab的选择

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
讨论水平tab与垂直tab的选择

163邮箱登录注册教程

电脑网络
163邮箱登录注册教程

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Excel2010设置奇偶页页眉页脚不同

Excel2010设置奇偶页页眉页脚不同

Java开发工具配置 UltraEdit

Java开发工具配置 UltraEdit
下拉加载更多内容 ↓