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