JavaScript实现的浮动层框架用法实例分析
作者：企鹅
这篇文章主要介绍了JavaScript实现的浮动层框架用法,以实例形式分析了JavaScript实现可关闭的半透明浮动层相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了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" ? alert(b) : typeof WScript != "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 ? b.is_instanceof(this, a) : !1
}, method:function(b, a) {
if(arguments.length == 1) {
for(var c in b) {
d.prototype[c] = b[c]
}
}else {
d.prototype[b] = a
}
return d
}, _default:function(b, a) {
if(arguments.length == 1) {
for(var c in b) {
d.prototype[c] = b[c]
}
}else {
d.prototype[b] = a
}
return d
}, _statics:function(b, a) {
if(arguments.length == 1) {
for(var c in b) {
d[c] = b[c]
}
}else {
d[b] = a
}
return d
}, get_constructor:function() {
return c
}, set_constructor:function(b) {
c = b
}, get_parent:function() {
return b
}, set_parent:function(a) {
b = a
}, get_clsid:function() {
return f
}, toString:function() {
return String(c)
}, valueOf:function() {
return String(c)
}};
d.prototype = e;
for(var h in a) {
d[h] = a[h]
}
return d
}
function Class(a) {
function d() {
if(++a.err_count > a.max_err) {
var b;
a.onerror && (b = a.onerror());
return b
}
a.recall_timer = setTimeout(function() {
Class(a)
}, a.retry_interval || 100)
}
if(!a) {
return new ClassAdapter
}
var c;
c = void 0;
if(!Class.hash_list) {
Class.hash_list = {}
}
a.namespace = a.namespace || window;
a.err_count |= 0;
a.max_err = a.max_err || 5;
a.name = a.name || "$" + (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 ? a.parent.extend(c) : new ClassAdapter(c);
a.method && c.method(a.method);
a._default && c._default(a._default);
a._statics && c._statics(a._statics);
a.namespace[a.name] = c;
a.ready && a.ready()
}
Class.is_ready = function(a) {
if(Class.hash_list && Class.hash_list[a] && !Class.hash_list[a].recall_timer) {
return!0
}
return!1
};
Class.ready = function(a, d, c) {
function b() {
var c = !0;
if(d) {
for(var f in d) {
if(!Class.hash_list[d[f]] || Class.hash_list[d[f]].recall_timer) {
c = !1;
break
}
}
}else {
for(f in Class.hash_list) {
if(Class.hash_list[f].recall_timer) {
c = !1;
break
}
}
}
if(!c) {
return setTimeout(b, 10)
}
a()
}
var f;
typeof d == "string" && (d = [d]);
c ? (f = window.onload, window.onload = function() {
setTimeout(b, 1);
typeof f == "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 ? this._sheet.removeRule(a) : this._sheet.deleteRule(a));
return this
}, add:function(a, d) {
var c = this.rules.length;
this._sheet.insertRule ? this._sheet.insertRule(a + "{" + 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 ? this.rules[b].style[d] : this.rules[b].style.cssText
}
}}, ready:function() {
var a = HTML._create("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] ? g = h ? c[e + b] : c[e + b].cloneNode(!0) : c[e + b] = g = document.createElement(b);
if(!g.proto || !g.proto.same_instanceof(a)) {
g.proto = a, d(g)
}
return g
}
function d(b) {
for(var a in b.proto) {
b[a] = b.proto[a]
}
}
var c = {};
Class({name:"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) ? (this.remove_class(b), a && this.add_class(a)) : (this.add_class(b), a && this.remove_class(a))
}, hover_class:function(b, a) {
this.bind("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 ? this.style.cssText + b : b
}else {
for(var c in b) {
this.style[c] = b[c]
}
}
return this
}, session:function(b, a) {
function c(b) {
var b = RegExp(";\\s*" + escape(b) + "=([^;]+)", "i"), a = ";" + String(document.cookie || "");
return b.test(a) ? unescape(a.match(b)[1]) : ""
}
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 ? this.move_to(a.pos) : this.auto_center();
this.style.zIndex = d++;
this.fire("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程序设计有所帮助。