帶有延時功能的基礎菜單類（CSS與JS）

2024-09-05 12:20:38

字體：大中小

來源：轉載

供稿：網友

本菜單看上去比較普通，甚至有些美式好的朋友還會說不怎么樣，因為本菜單主要是側重于功能的展現，菜單樣式并非重點。本菜單結合JS技術，實現多級菜單子菜單的延時功能，給人不一樣的感覺，函數有點復雜了些，用法上也不是太好用，有興趣的可停下來研究一番。

<html><head><meta http-equiv="content-type" content="text/html; charset=GB2312" /><title>構造菜單類</title><style>* { font-size:12px; font-family:宋體, Arial; } /*規定了所有的字體樣式*/body { overflow:auto; }.item { float:left; cursor:pointer; padding:1px 6px; width:100%; }.item_mover { background-color:#D0E0F0; }.menu_layer { width:160px; border:1px outset buttonface; background-color:buttonface; }</style><script>String.prototype.html_encode = function(){ return(this.replace(/&/g,"&").replace(/"/g,""").replace(/ /g," ").replace(//t/g,"    ").replace(/</g,"<").replace(/>/g,">").replace(//r/n/g,"<br>")); }String.prototype.html_decode = function(){ return(this.replace(/<br>/ig,"/r/n").replace(/ /ig," ").replace(/</ig,"<").replace(/>/ig,">").replace(/"/ig,"/"").replace(/&/ig,"&")); }function $(str){ return(document.getElementById(str)); }function $new(tag){ return(document.createElement(tag)); }function uid(){ return("u"+(new Date()).getTime().toString(35)+parseInt(Math.random()*999999).toString(35)); }//HTML基類function HTML(strText){    //判斷是否重復繼承    if(this.CONSTRUCTOR)if(this.CONSTRUCTOR["HTML"])return;    //公有屬性    if(!this.CONSTRUCTOR)this.CONSTRUCTOR = new Array();    this.CONSTRUCTOR["HTML"] = true;    this.id = uid();    //私有屬性    var _html, _text, _self;    _html = $new("div");    _html.self = _self = this;    //私有方法    function init(strText){        text(strText);    }    //特權方法    this.appendChild = function appendChild(childNode){ _html.appendChild(childNode.html()); }    this.attach = function attach(parentNode){ parentNode.appendChild(_html); }    this.childNodes = function childNodes(index){        var re = new Array();        if(index>-1 && index<_html.childNodes.length)return(_html.childNodes[index].self);        for(var i=0; i<_html.childNodes.length; i++)if(_html.childNodes[i].self)re.push(_html.childNodes[i].self);        return(re);    }    this.hide = function hide(){ style({"display":"none"}); }    this.html = function html(){ return(_html); }    this.insertAfter = function(node){ if(_html.nextSibling){ _html.parentNode.insertBefore(node.html(), _html.nextSibling); }else{ this.appendChild(node); } }    this.move = function move(x, y){ style({"position":"absolute", "left":x, "top":y}); }    this.nextSibling = function nextSibling(){ if(_html.nextSibling)return(_html.nextSibling.self); }    this.parentNode = function parentNode(){ if(_html.parentNode)return(_html.parentNode.self); }    this.previousSibling = function previousSibling(){ if(_html.previousSibling)return(_html.previousSibling.self); }    this.show = function show(x, y){ style({"display":"block"}); if(x!=undefined&&y!=undefined)move(x, y); }    this.style = function style(oStyle){        if(oStyle)switch(typeof(oStyle)){            case "string":                _html.style.cssText = oStyle;            break;            case "object":                for(var i in oStyle)_html.style[i] = oStyle[i];            break;        }        return(_html.style);    }    this.text = function text(str){        if(str)_html.innerHTML = _text = String(str);        return(_text);    }    this.toString = this.html;    //對象初始化    init(strText);    //在全局中注冊此對象    window[this.id] = this;}//CMD基類function CMD(strCMD, strType){    //判斷是否重復繼承    if(this.CONSTRUCTOR)if(this.CONSTRUCTOR["CMD"])return;    //公有屬性    if(!this.CONSTRUCTOR)this.CONSTRUCTOR = new Array();    this.CONSTRUCTOR["CMD"] = true;    //私有屬性    var _text, _type;    //私有方法    function init(strCMD, strType){        text(strCMD);        type(strType);    }    //特權方法    this.text = function text(str){        if(str)_text = String(str);        return(_text);    }    this.toString = function(){ return(_text); }    this.type = function type(str){        str = String(str).toLowerCase();        switch(str){            case "js": case "javascript": case "script":                _type = "javascript";            break;            case "": case undefined: case null:            break;            default:                _type = "url";        }        return(_type);    }    //對象初始化    init(strCMD, strType);}//HTML擴展類 -> Alternation類function Alternation(){    //判斷是否重復繼承    if(this.CONSTRUCTOR)if(this.CONSTRUCTOR["Alternation"])return;    //公有屬性    if(!this.CONSTRUCTOR)this.CONSTRUCTOR = new Array();    this.CONSTRUCTOR["Alternation"] = true;    //繼承    HTML.apply(this, arguments);    //私有屬性    var _classNames = new Array();    _classNames["normal"] = "item";    _classNames["mouseover"] = "item item_mover";    //特權方法    this.set_alternation_className = function(name, className){        _classNames[name] = className;    }    //初始化    this.html().onmouseover = function(){ this.className = _classNames["mouseover"]; }    this.html().onmouseout = function(){ this.className = _classNames["normal"]; }    this.html().className = _classNames["normal"];}//HTML擴展類 -> Link類function Link(strText, strHref, strTarget){    //判斷是否重復繼承    if(this.CONSTRUCTOR)if(this.CONSTRUCTOR["Link"])return;    //公有屬性    if(!this.CONSTRUCTOR)this.CONSTRUCTOR = new Array();    this.CONSTRUCTOR["Link"] = true;    //繼承    HTML.apply(this);    //私有屬性    var _href, _target;    //私有方法重載    text = this.text;    //特權方法    this.href = function href(cmd){        if(cmd)if(cmd.constructor==CMD){            _href = cmd;        }else{            _href = new CMD(String(cmd));        }        return(_href);    }        this.target = function target(str){        if(str)_target = str;        return(_target);    }        this.open = function open(){        if(_href.text()==undefined)return;        if(_href.type=="javascript"){            try{                eval(_href.text);            }catch(e){}        }else{            window.open(_href, _target);        }    }    //對象初始化    this.html().onclick = this.open;    text(strText);    _href = new CMD(strHref);    target(strTarget || "_self");}function MenuLayer(menuItem, menuDir){    //繼承    HTML.apply(this);    //私有屬性    var _pMenu, _dir,     _pMenu = menuItem;    _dir = "horizone";    //特權方法    this.add = function add(text, cmd, target){        var obj = new MenuItem(text, cmd, target);        this.appendChild(obj);    }    this.dir = function dir(str){        if(str)if(str=="vertical"){            _dir = "vertical";        }else{            _dir = "horizone";        }        return(_dir);    }    //對象初始化    this.html().className = "menu_layer";    this.html().onmouseover = function(){ _pMenu.cancelHideSub(); }    this.html().onmouseout = function(){ _pMenu.preHideSub(); }}function MenuItem(text, cmd, target){    //多重繼承    Alternation.apply(this);    Link.apply(this, [text, cmd, target]);    //私有屬性    var _sub, _html;    _html = this.html();    //特權方法    this.sub = function(){        if(!_sub){            _sub = new MenuLayer(this);            this.insertAfter(_sub);            _sub.move(0, 0);            _sub.hide();        }        return(_sub);    }    this.hideSub = function(){ if(_sub)_sub.hide(); }    this.preHideSub = function(){ this.cancelHideSub(); this.timer = setTimeout("window[/""+this.id+"/"].hideSub();",200); }    this.cancelHideSub = function(){ clearTimeout(this.timer); }    //對象初始化    this.html()._onmouseover = this.html().onmouseover;    this.html()._onmouseout = this.html().onmouseout;    this.html().onmouseover = function(){        clearTimeout(this.self.timer);        if(this.disabled)return;        if(_sub&&_sub.childNodes().length>0)if(_sub.dir()=="vertical"){            _sub.show(_html.offsetLeft, _html.offsetTop+_html.offsetHeight);        }else{            _sub.show(_html.offsetLeft+_html.offsetWidth, _html.offsetTop);        }        this._onmouseover();    }    this.html().onmouseout = function(){        this.self.preHideSub();        this._onmouseout();    }}function MenuBar(){    //繼承    HTML.apply(this);    //特權方法    this.add = function add(text){        var obj = new MenuItem(text);        obj.style({"width":"auto"});        obj.sub().dir("vertical");        this.appendChild(obj);    }}window.onload = function(){    obj = new MenuBar();    obj.attach(document.body);    obj.add("文件"); obj.add("編輯"); obj.add("視圖"); obj.add("格式");    obj.childNodes(0).sub().add("打開", "http:////www.163.com");    obj.childNodes(0).sub().add("新浪", "http:////www.sina.com");    obj.childNodes(1).sub().add("復制", "http:////www.163.com");    obj.childNodes(1).sub().add("百度", "http:////www.baidu.com");    obj.childNodes(1).sub().add("撤銷", "http:////www.163.com");    obj.childNodes(1).sub().childNodes(1).sub().add("剪貼板1");    obj.childNodes(1).sub().childNodes(1).sub().add("剪貼板2");    obj.childNodes(1).sub().childNodes(1).sub().add("剪貼板3");}</script></head><body></body></html>

上一篇：一個漂亮的網頁頂部導航菜單代碼

下一篇：會自動播放樣子也很經典的jquery選項卡