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程序设计有所帮助。