?? 20-6 構(gòu)造菜單類.htm
字號:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=GB2312" />
<title>20-6 構(gòu)造菜單類</title>
<style>
* { font-size:12px; font-family:宋體, Arial; } /*規(guī)定了所有的字體樣式*/
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){
//判斷是否重復(fù)繼承
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);
}
//特權(quán)方法
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){
//判斷是否重復(fù)繼承
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);
}
//特權(quán)方法
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(){
//判斷是否重復(fù)繼承
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";
//特權(quán)方法
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){
//判斷是否重復(fù)繼承
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;
//特權(quán)方法
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";
//特權(quán)方法
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();
//特權(quán)方法
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);
//特權(quán)方法
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("復(fù)制", "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>?? 快捷鍵說明
復(fù)制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -