JavaScript实现的浮动层框架用法实例分析

前端技术 2023/09/04 JavaScript

本文实例讲述了JavaScript实现的浮动层框架用法。分享给大家供大家参考。具体如下：

这是一个JavaScript编写的浮动层框架，作为框架来说，骨干已经完成了。可以实现“类”、“构造函数”、“继承”（木有实现多继承）、“静态方法”、“重载”（木有实现多态），对我来说主要的意义就是，我喜欢这种代码风格，可以非常简单的重用和二次开发。

运行效果截图如下：

在线演示地址如下：

http://demo.phpstudy.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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/11148

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案