延迟选项卡

最新推荐文章于 2021-06-03 04:58:03 发布

muxrwc

最新推荐文章于 2021-06-03 04:58:03 发布

阅读量1.3k

点赞数

分类专栏： JavaScript 文章标签： function div html null class xhtml

本文链接：https://blog.csdn.net/muxrwc/article/details/1728769

版权

JavaScript 专栏收录该内容

55 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>MENU</title>
<style type="text/css">
div#CMenu {
/*主菜单底部*/
    width:500px;
    border:#CCCCCC 1px solid;
}
div#CMenu h4 {
/*标题*/
    width:20%;
    float:left;
    margin:0px;
    text-align:center;
    font-size:12px;
    font-weight:normal;
    line-height:24px;
    background-color:#F4F4F4;
    border-bottom:#CCCCCC 1px solid;
    cursor:default;
}

div#CMenu h4.Default {
/*标题选中后标题*/
background-color:#E0E0E0!important;
}

div#CMenu div.Default {
/*标题选中后内容*/
display:block!important;
}

div#CMenu div {
/*设置所有内容的样式*/
    line-height:20px;
    display:none;
    background-color:#FAFAFA;
font-size:12px;
padding:0px 10px 0px 10px;
}
</style>
<script type="text/javascript">
(function (bool) {
//兼容FF一些方法
    var html;

    if (bool) {

        html = window.HTMLElement.prototype;

        window.attachEvent = document.attachEvent = html.attachEvent = function (property, func, bool) {
        //兼容attachEvent方法
            return this.addEventListener(property.replace(/^on/, ""), func, bool || false);

        };

        html.__defineSetter__("className", function (t_val) {
        //兼容className属性（高版本FF已经兼容了）
            return this.setAttribute("class") = t_val;

        });

        html.__defineGetter__("className", function () {
        //兼容className属性（高版本FF已经兼容了）
            return this.getAttribute("class");

        });

    }

})(/Firefox/.test(window.navigator.userAgent));

var Class = {
//创建类
    create : function () {
        return function () {
            this.initialize.apply(this, arguments);
        };
    }
};

var $A = function (a) {
//转换数组
return a ? Array.apply(null, a) : new Array;
};

var $ = function (id) {
//获取对象
return document.getElementById(id);
};

Function.prototype.bind = function () {
//绑定事件
    var wc = this, a = $A(arguments), o = a.shift();
    return function () {
        wc.apply(o, a.concat($A(arguments)));
    };
};

var CMenu = Class.create();

CMenu.prototype = {

    initialize : function (time) {
    //初始化参数
        var wc = this;
        wc.time = time; //初始化滑动延迟时间
        wc.timer = 0; //初始化记时器存储变量
        wc.old = { tit : null, con : null }; //初始化当前目标成员
        wc.style = ""; //默认样式
    },

    change : function (object) {
    //设置样式
        var wc = this, old = wc.old, style = wc.style;
        if (object.tit == old.tit) return;
        if (old.tit) old.tit.className = old.con.className = "";
        (old.tit = object.tit).className = (old.con = object.con).className = style;
        wc.timer = 0;
    },

    over : function (obj, bool) {
    //显示控制
        var wc = this;

        if (wc.timer != 0) window.clearTimeout(wc.timer); //如果有记时器清除

        if (bool) wc.timer = window.setTimeout(wc.change.bind(wc, obj), wc.time);
        else wc.change(obj);
    },

    out : function (obj) {
    //鼠标移开函数
        var wc = this;
        if (wc.timer) {
            window.clearTimeout(wc.timer);
            wc.timer = 0;
        }
    },

    add : function (obj) {
    //添加成员
        var wc = this;
        obj.tit.attachEvent("onclick", wc.over.bind(wc, obj, 0));
        obj.tit.attachEvent("onmouseover", wc.over.bind(wc, obj, 1));
        obj.tit.attachEvent("onmouseout", wc.out.bind(wc, obj));
    },

    parse : function (div, style) {
    //解释对象
        var wc = this, tits = div.getElementsByTagName("h4"), cons = div.getElementsByTagName("div"), i;
        try {
            wc.style = style;
            wc.change({ tit : tits[0], con : cons[0] }, style);
            for (i = 0 ; i < tits.length ; i ++)
            wc.add({ tit : tits[i], con : cons[i] }, style);
        } catch (exp) {}
    }

};

window.onload = function () {
    var wc = new CMenu(250);
    wc.parse(document.getElementById("CMenu"), "Default");
    wc = null;
};
</script>
</head>

muxrwc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
延迟选项卡

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">MENUdiv#CMenu {/*主菜单底部*/ width:500px; border:#CCCCCC 1px solid;}div#CMenu h4 {/*标题*/ width:20%; float
复制链接

扫一扫