相思资源网 Design By www.200059.com
本文实例讲述了JavaScript实现的浮动层框架用法。分享给大家供大家参考。具体如下：
这是一个JavaScript编写的浮动层框架，作为框架来说，骨干已经完成了。可以实现“类”、“构造函数”、“继承”（木有实现多继承）、“静态方法”、“重载”（木有实现多态），对我来说主要的意义就是，我喜欢这种代码风格，可以非常简单的重用和二次开发。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-float-win-fra-demo/
具体代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Hutia Javascript Framework</title>
<script>
function ClassAdapter(a) {
var d, c = a || new Function, b = void 0, f = Math.random();
d = function(b) {
this.constructor = c;
this["class"] = d;
for(var a in e) {
this[a] = e[a]
}
var f;
b != "<\!-- /* n@o!t#h$i(n&g1 4l5i7k9e24- th69at9 - hutia */ --\>" && (f = c.apply(this, arguments));
f = f || this;
if(f != this) {
for(a in this) {
f[a] = this[a]
}
f.constructor = c
}
return f
};
var e = {su:function() {
var b = this["class"].get_parent();
if(!b) {
return null
}
this.su = function(a) {
return b.prototype[a].apply(this, Array.prototype.slice.apply(arguments).slice(1))
};
return b.get_constructor().apply(this, arguments)
}, get_class:function() {
return this["class"]
}, same_instanceof:function(b, a) {
if(!b || !b.get_class) {
return!1
}
return this["class"][a "equals" : "is_descent"](b.get_class())
}, is_instanceof:function(b, a) {
return this["class"][a "equals" : "is_descent"](b)
}, trace:function(b) {
if(typeof window == "undefined") {
return this.out(b && b.description || b)
}
if(!window.__log__) {
window.__log__ = []
}
window.__log__.push(b && b.description || b)
}, out:function(b) {
typeof alert != "undefined" "undefined" && WScript.Echo(b)
}}, a = {is_class:!0, extend:function(b) {
b = new ClassAdapter(b || c);
b.set_parent(d);
b.prototype = new d("<\!-- /* n@o!t#h$i(n&g1 4l5i7k9e24- th69at9 - hutia */ --\>");
return b
}, equals:function(b) {
if(!b || !b.is_class) {
return!1
}
return f == b.get_clsid()
}, is_descent:function(a) {
if(!a || !a.is_class) {
return!1
}
if(f == a.get_clsid()) {
return!0
}
for(var c = b;c;) {
if(c.equals(a)) {
return!0
}
c = c.get_parent()
}
return!1
}, is_instance:function(b, a) {
return b && b.is_instanceof "$" + (new Date).getTime().toString(36) + (Math.random() * 16777215 | 0).toString(36);
a.recall_timer = null;
Class.hash_list[a.name] = a;
if(a.requires) {
if(typeof a.requires == "string") {
a.requires = [a.requires]
}
for(var b in a.requires) {
if("undefined" == typeof a.namespace[a.requires[b]]) {
return d()
}
}
}
if(a.parent) {
if("undefined" == typeof a.namespace[a.parent]) {
return d()
}
a.parent = a.namespace[a.parent]
}
if(typeof a == "function") {
c = a
}else {
if(a.init) {
c = a.init
}
}
c = a.parent "string" && (d = [d]);
c "function" && f()
}) : setTimeout(b, 1)
};
(function() {
Class({name:"SingleHash", init:function() {
this.data = {}
}, method:{add:function(a) {
this.data[a] = a;
return this
}, remove:function(a) {
delete this.data[a];
return this
}, each:function(a) {
for(var d in this.data) {
a(this.data[d])
}
}, invoke:function(a) {
var d = Array.prototype.slice.call(arguments, 1), c = void 0, b;
for(b in this.data) {
typeof this.data[b] == "function" && (c = this.data[b].apply(a || this, d))
}
return c
}, clear:function() {
this.data = {}
}, contains:function(a) {
return!!this.data[a]
}}})
})();
(function() {
Class({parent:"SingleHash", name:"Event", init:function(a) {
var d = function(c) {
return d.invoke(a || this, c)
};
d.data = {};
return d
}})
})();
(function() {
Class({parent:"HTML", name:"Stylesheet", init:function(a) {
if(a != "-=^&%$#$") {
var d = HTML.create("style", new Stylesheet("-=^&%$#$"), "Stylesheet#", !0);
d.set(a);
return d
}
}, method:{index_of:function(a) {
for(var d = 0;d < this.rules.length;d++) {
if(this.rules[d].selectorText == a) {
return d
}
}
return-1
}, remove:function(a) {
typeof a != "number" && (a = this.index_of(a));
a = parseInt(a);
!isNaN(a) && a > -1 && a < this.rules.length && (this._sheet.removeRule "{" + d + "}", c) : this._sheet.addRule(a, d, c);
return this
}, set:function(a, d) {
if(arguments.length == 1) {
for(var c in a) {
this.set(c, a[c])
}
return this
}
var b = this.index_of(a);
if(b == -1) {
return this.add(a, d)
}
if(typeof d == "string") {
this.rules[b].style.cssText = d
}else {
for(c in d) {
this.rules[b].style[c] = d[c]
}
}
return this
}, get:function(a, d) {
if(arguments.length == 0) {
for(var c = [], b = 0;b < this.rules.length;b++) {
c.push(this.rules[b].selectorText + "{ " + this.rules[b].style.cssText + " }")
}
return c
}
b = this.index_of(a);
if(this.rules[b]) {
return d "style", new Stylesheet("-=^&%$#$"), "Stylesheet#");
document.getElementsByTagName("head")[0].appendChild(a);
a._sheet = a.styleSheet || a.sheet;
a.rules = a._sheet.cssRules || a._sheet.rules
}})
})();
(function() {
function a(b, a, e, h) {
var e = e || "#", b = String(b).toLowerCase(), g;
c[e + b] "HTML", init:function(b) {
if(b) {
return a(b, new HTML)
}
}, requires:["Event"], _statics:{_create:function(b, a, e, h) {
var e = e || "#", b = String(b).toLowerCase(), g = document.createElement(b);
if(h) {
for(var i in h.attr) {
g[i] = h.attr[i]
}
}
if(h) {
for(i in h.style) {
g.style[i] = h.style[i]
}
}
g.proto = a;
d(g);
c[e + b] = g;
h && typeof h.ready == "function" && h.ready.apply(g);
return g
}, create:a, enhance:function(b, a) {
a = a || new HTML;
if(!b.proto || !b.proto.same_instanceof(a)) {
b.proto = a, d(b)
}
return b
}, link:d, cancel_event:function(b) {
b = b || window.event;
b.returnValue = !1;
b.cancelBubble = !0;
b.preventDefault && b.preventDefault();
b.stopPropagation && b.stopPropagation();
return!1
}}, method:{$style:function(b) {
var a = window.getComputedStyle && window.getComputedStyle(this, null) || this.currentStyle;
return b && a[b] || a
}, add_class:function(b) {
this.has_class(b) || (this.className += " " + b);
return this
}, has_class:function(b) {
return RegExp("\\b" + b.replace(/(\W)/g, "\\$1") + "\\b").test(this.className)
}, remove_class:function(b) {
this.className = this.className.replace(RegExp("\\b" + b.replace(/(\W)/g, "\\$1") + "\\b", "g"), "").replace(/\s+/g, " ");
return this
}, toggle_class:function(b, a) {
this.has_class(b) "onmouseover", function() {
this.add_class(b);
a && this.remove_class(a)
});
this.bind("onmouseout", function() {
a && this.add_class(a);
this.remove_class(b)
})
}, hide:function() {
this.style.display = "none";
return this
}, show:function(b) {
this.style.display = b || "";
return this
}, bind:function(b, a) {
if(!Event.is_instance(this[b])) {
var c = this[b];
this[b] = new Event;
this[b].add(c)
}
this[b].contains(a) || this[b].add(a);
return this
}, unbind:function(b, a) {
if(!Event.is_instance(this[b])) {
var c = this[b];
this[b] = new Event;
this[b].add(c)
}
this[b].remove(a);
return this
}, fire:function(b) {
if(typeof this[b] == "function") {
return this[b].apply(this, Array.prototype.slice.call(arguments, 1))
}
}, css:function(b, a) {
if(typeof b == "string") {
this.style.cssText = a ";\\s*" + escape(b) + "=([^;]+)", "i"), a = ";" + String(document.cookie || "");
return b.test(a) ""
}
function d(b, a) {
var c = new Date;
c.setYear(c.getYear() + 10);
document.cookie = escape(b) + "=" + escape(a) + ";expires=" + c.toUTCString() + ";"
}
if(arguments.length == 1) {
return c(b)
}else {
d(b, a)
}
}, $width:function(b) {
if(typeof b == "number" && b >= 0) {
this.style.width = b - this.offsetWidth + this.$width() + "px"
}else {
b = this.offsetWidth;
if(b === 0) {
return 0
}
return b - (parseFloat(this.$style("borderLeftWidth")) || 0) - (parseFloat(this.$style("borderRightWidth")) || 0) - (parseFloat(this.$style("paddingLeft")) || 0) - (parseFloat(this.$style("paddingRight")) || 0)
}
}, $height:function(b) {
if(typeof b == "number" && b >= 0) {
this.style.height = b - this.offsetHeight + this.$height() + "px"
}else {
b = this.offsetHeight;
if(b === 0) {
return 0
}
return b - (parseFloat(this.$style("borderTopWidth")) || 0) - (parseFloat(this.$style("borderBottomWidth")) || 0) - (parseFloat(this.$style("paddingTop")) || 0) - (parseFloat(this.$style("paddingBottom")) || 0)
}
}}})
})();
(function() {
Class({name:"DragHandle", parent:"HTML", method:{unselectable:"on", can_drag:!0, bind_drag_target:function(a) {
this.drag_target = a;
return this
}, onmousedown:function(a) {
function d(a) {
a = a || window.event;
b.move_to([a.clientX - f, a.clientY - e])
}
function c() {
document.unbind("onmousemove", d).unbind("onmouseup", c)
}
a = a || window.event;
if(this.can_drag && this.drag_target) {
var b = this.drag_target, f = a.clientX - b.offsetLeft, e = a.clientY - b.offsetTop;
document.bind("onmousemove", d).bind("onmouseup", c)
}
}}, ready:function() {
HTML.enhance(document)
}})
})();
(function() {
var a = "-=^&%$#$" + Math.random() + (new Date).getTime(), d = 100;
Class({name:"WinButton", parent:"HTML", init:function(c, b, d) {
if(c != a) {
var e = HTML.create("a", new WinButton(a), "WinButton#");
e.innerHTML = c;
e.bind("onclick", function() {
d.apply(b)
});
return e
}
}, method:{unselectable:"on", href:"javascript:void(0);", target:"_self"}, ready:function() {
HTML._create("a", new WinButton(a), "WinButton#", {attr:{className:"win_button"}})
}});
Class({name:"WinCaptionTitle", parent:"HTML", init:function(c) {
if(c != a) {
return HTML.create("div", new WinCaptionTitle(a), "WinCaptionTitle#")
}
}, method:{unselectable:"on"}, ready:function() {
HTML._create("div", new WinCaptionTitle(a), "WinCaptionTitle#", {attr:{className:"win_caption_title"}})
}});
Class({name:"WinCaption", parent:"DragHandle", requires:["WinCaptionTitle", "WinButton"], init:function(c) {
if(c != a) {
var b = HTML.create("div", new WinCaption(a), "WinCaption#");
b.appendChild(new WinButton("[X]", c, function() {
this.close()
}));
b.appendChild(b.$title = new WinCaptionTitle);
return b
}
}, method:{unselectable:"on"}, ready:function() {
HTML._create("div", new WinCaption(a), "WinCaption#", {attr:{className:"win_caption"}})
}});
Class({name:"WinButtonBar", parent:"HTML", requires:["Stylesheet", "WinButton"], init:function(c, b) {
if(c != a) {
var d = HTML.create("div", new WinButtonBar(a), "WinButtonBar#");
if(b) {
for(var e in b) {
d.appendChild(new WinButton(e, c, b[e]))
}
}else {
d.hide()
}
return d
}
}, method:{unselectable:"on"}, ready:function() {
HTML._create("div", new WinButtonBar(a), "WinButtonBar#", {attr:{className:"win_button_bar"}})
}});
Class({name:"WinBody", parent:"HTML", requires:["Stylesheet"], init:function(c) {
if(c != a) {
return HTML.create("div", new WinBody(a), "WinBody#")
}
}, method:{unselectable:"on"}, ready:function() {
HTML._create("div", new WinBody(a), "WinBody#", {attr:{className:"win_body"}})
}});
Class({name:"WinBorder", parent:"HTML", requires:["Stylesheet"], init:function(c) {
if(c != a) {
return HTML.create("div", new WinBorder(a), "WinBorder#")
}
}, method:{unselectable:"on"}, ready:function() {
HTML._create("div", new WinBorder(a), "WinBorder#", {attr:{className:"win_border"}})
}});
Class({name:"Win", parent:"HTML", requires:["Stylesheet", "WinCaption", "WinBody", "WinBorder"], init:function(c) {
if(c != a) {
var b = HTML.create("div", new Win(a), "Win#");
b.appendChild(b.border = new WinBorder(b));
b.appendChild(b.caption = new WinCaption(b));
b.appendChild(b.body = new WinBody(b));
b.appendChild(b.button_bar = new WinButtonBar(b, c.buttons));
b.caption.bind_drag_target(b);
if(c) {
b.data = c, b.set_title(c.title)
}
return b
}
}, method:{unselectable:"on", type:"win", onmousedown:function() {
this.style.zIndex = d++
}, open:function() {
var a = this.data || {};
document.body.appendChild(this);
this.show();
a.size && this.set_size(a.size);
a.pos "onopen")
}, close:function() {
this.hide();
this.fire("onclose")
}, set_size:function(a) {
this.$width(a[0]);
this.$height(a[1]);
this.border.$width(a[0]);
this.border.$height(a[1]);
this.body.$width(this.$width());
this.body.$height(this.$height() - this.caption.offsetHeight - this.button_bar.offsetHeight)
}, set_title:function(a) {
this.caption.$title.innerHTML = a || "Untitled Window"
}, move_to:function(a) {
this.style.left = a[0] + "px";
this.style.top = a[1] + "px"
}, auto_center:function() {
var a = window.innerHeight || document.documentElement.clientHeight;
this.move_to([((window.innerWidth || document.documentElement.clientWidth) - this.$width()) / 2, (a - this.$height()) / 2])
}}, ready:function() {
new Stylesheet({".win":"position:absolute; float:left; display:block; padding:0px 5px 5px 5px; -moz-user-select:none; user-select:none; -webkit-user-select:none;", ".win_border":"position:absolute; left:0px; top:0px; float:left; display:block; border:1px solid black; background-color:#888888; opacity:0.7; filter:alpha(opacity=70); -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius: 5px;", ".win_button":"color:navy; font-size:12px; text-decoration:none;",
".win_button:hover":"color:white; text-decoration:none;", ".win_button_bar":"position:relative; width:100%; line-height:30px; font-size:14px; text-align:center;", ".win_button_bar .win_button":"margin:5px 10px 0px 0px; padding:0px 10px; line-height:24px; background-color:silver; display:inline; zoom:1; display:inline-block;", ".win_caption":"position:relative; width:100%; line-height:30px; font-size:14px; cursor:pointer;", ".win_caption_title":"font-weight:bold; color:white;", ".win_caption .win_button":"float:right;",
".win_body":"position:relative; overflow:auto; width:100%; height:auto; background-color:white;"});
HTML._create("div", new Win(a), "Win#", {attr:{className:"win"}})
}})
})();
Class.ready(function() {
var a = new Win({size:[400, 300], pos:[220, 220], buttons:{OK:function() {
this.close()
}, Cancel:function() {
this.close()
}}});
(new Win({size:[400, 300], pos:[20, 20], title:"Untitled Window 2"})).open();
(new Win({size:[400, 300], pos:[440, 20], title:"Untitled Window 3"})).open();
(new Win({size:[400, 300], pos:[20, 340], title:"Untitled Window 4"})).open();
a.open()
}, null, !0);
</script>
</head>
<body>
</body>
</html>
希望本文所述对大家的JavaScript程序设计有所帮助。
标签：
JavaScript,浮动层框架
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com
暂无JavaScript实现的浮动层框架用法实例分析的评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。