本文实例讲述了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 != "<>" && (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 "is_descent"](b.get_class()) }, is_instanceof:function(b, a) { return this["class"][a "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("<>"); 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程序设计有所帮助。
【JavaScript实现的浮动层框架用法实例分析】相关文章：