一个JavaScript编写的浮动层框架

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<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>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

一个JavaScript编写的浮动层框架

分类

表格图层

描述

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