📄 20-6 构造菜单类.htm

📁 JAVASCRIPT完全自学手册,中源码的验证修订实例
💻 HTM
字号:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=GB2312" />
<title>20-6  构造菜单类</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,"&amp;").replace(/"/g,"&quot;").replace(/ /g,"&nbsp;").replace(/\t/g,"&nbsp;&nbsp;&nbsp;&nbsp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/\r\n/g,"<br>")); }
String.prototype.html_decode = function(){ return(this.replace(/<br>/ig,"\r\n").replace(/&nbsp;/ig," ").replace(/&lt;/ig,"<").replace(/&gt;/ig,">").replace(/&quot;/ig,"\"").replace(/&amp;/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.163.com");
    obj.childNodes(1).sub().add("复制", "http:\/\/www.163.com");
    obj.childNodes(1).sub().add("粘帖", "http:\/\/www.163.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>
💿 文件大小 522 K
👤 上传用户 zbcs1025
📂 所属分类 JavaScript
🏷️ 相关标签

#JAVASCRIPT #源码
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -