1

我喜欢原型，但它没有任何小部件。特别是，它没有为创建窗口/对话框提供任何东西。

我尝试过Prototype Window附加库，但发现它不可靠，并且很长时间没有维护。

有人有任何推荐的解决方案吗？或者任何用于从第一原则创建对话框的配方/模式（即除了原型之外没有库）？我需要模态行为（具有褪色背景效果）并且我必须支持 IE6 以及现代浏览器。

需要明确的是，我不想放弃 Prototype，也不想包含额外的基础库，例如 JQuery。

4

3 回答 3

2

有几个不错的网站可以看看：

原型 UI - 有一个模式对话框。

Scripteka - Prototype 附加组件的母脉。这里有很多很棒的东西。

于 2009-02-12T14:46:38.973 回答
1

对于一个非常简单的对话框，请查看以下代码：http ://snippets.dzone.com/posts/show/3411

非常简单 - 正是我想要的。

代码经过了一些修改。这是对我有用的最终版本：

/* 
 * Adapted from http://snippets.dzone.com/posts/show/3411
 */

var Dialog = {};
Dialog.Box = Class.create();
Object.extend(Dialog.Box.prototype, {
  initialize: function(id) {
    this.createOverlay();

    this.dialog_box = $(id);
    this.dialog_box.show = this.show.bind(this);
    this.dialog_box.persistent_show = this.persistent_show.bind(this);
    this.dialog_box.hide = this.hide.bind(this);

    this.parent_element = this.dialog_box.parentNode;

    this.dialog_box.style.position = "absolute";

    var e_dims = Element.getDimensions(this.dialog_box);
    var b_dims = Element.getDimensions(this.overlay);

    this.dialog_box.style.left = ((b_dims.width/2) - (e_dims.width/2)) + 'px';
    this.dialog_box.style.top = this.getScrollTop() + ((this.winHeight() - (e_dims.width/2))/2) + 'px';
    this.dialog_box.style.zIndex = this.overlay.style.zIndex + 1;
  },

  createOverlay: function() {
    if ($('dialog_overlay')) {
      this.overlay = $('dialog_overlay');
    } else {
      this.overlay = document.createElement('div');
      this.overlay.id = 'dialog_overlay';
      Object.extend(this.overlay.style, {
        position: 'absolute',
        top: 0,
        left: 0,
        zIndex: 90,
        width: '100%',
        backgroundColor: '#000',
        display: 'none'
      });
      document.body.insertBefore(this.overlay, document.body.childNodes[0]);
    }
  },

  moveDialogBox: function(where) {
    Element.remove(this.dialog_box);
    if (where == 'back')
      this.dialog_box = this.parent_element.appendChild(this.dialog_box);
    else
      this.dialog_box = this.overlay.parentNode.insertBefore(this.dialog_box, this.overlay);
  },

  show: function(optHeight/* optionally override the derived height, which often seems to be short. */) {
    this.overlay.style.height = this.winHeight()+'px';
    this.moveDialogBox('out');

    this.overlay.onclick = this.hide.bind(this);

    this.selectBoxes('hide');
    new Effect.Appear(this.overlay, {duration: 0.1, from: 0.0, to: 0.3});
    this.dialog_box.style.display = '';

    this.dialog_box.style.left = '0px';

    var e_dims = Element.getDimensions(this.dialog_box);

    this.dialog_box.style.left = (this.winWidth() - e_dims.width)/2 + 'px';

    var h = optHeight || (e_dims.height + 200);
    this.dialog_box.style.top = this.getScrollTop() + (this.winHeight() - h/2)/2 + 'px';
  },

  getScrollTop: function() {
    return (window.pageYOffset)?window.pageYOffset:(document.documentElement && document.documentElement.scrollTop)?document.documentElement.scrollTop:document.body.scrollTop;
  },

  persistent_show: function() {
    this.overlay.style.height = this.winHeight()+'px';
    this.moveDialogBox('out');

    this.selectBoxes('hide');
    new Effect.Appear(this.overlay, {duration: 0.1, from: 0.0, to: 0.3});

    this.dialog_box.style.display = '';
    this.dialog_box.style.left = '0px';
    var e_dims = Element.getDimensions(this.dialog_box);
    this.dialog_box.style.left = (this.winWidth()/2 - e_dims.width/2) + 'px';
  },

  hide: function() {
    this.selectBoxes('show');
    new Effect.Fade(this.overlay, {duration: 0.1});
    this.dialog_box.style.display = 'none';
    this.moveDialogBox('back');
    $A(this.dialog_box.getElementsByTagName('input')).each( function(e) {
      if (e.type != 'submit' && e.type != 'button') e.value = '';
    });
  },

  selectBoxes: function(what) {
    $A(document.getElementsByTagName('select')).each(function(select) {
      Element[what](select);
    });

    if (what == 'hide')
      $A(this.dialog_box.getElementsByTagName('select')).each(function(select){Element.show(select)})
  },

  winWidth: function() {
    if (typeof window.innerWidth != 'undefined')
       return window.innerWidth;
    if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0)
       return document.documentElement.clientWidth;
    return document.getElementsByTagName('body')[0].clientWidth
  },
  winHeight: function() {
    if (typeof window.innerHeight != 'undefined')
      return window.innerHeight
    if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientHeight != 'undefined' && document.documentElement.clientHeight != 0)
      return document.documentElement.clientHeight;
    return document.getElementsByTagName('body')[0].clientHeight;
  }

});
于 2009-02-17T20:42:48.330 回答
0

Scriptaculous是一个建立在 Prototype 之上的 UI/Widget/效果库。你一定会在那里找到你要找的东西。

于 2009-02-12T14:24:15.920 回答