प्रोटोटाइप में DHTML विंडोज़ / संवाद के लिए सर्वश्रेष्ठ तकनीक?

वोट
1

मैं प्यार करता हूँ प्रोटोटाइप लेकिन यह किसी भी विजेट के साथ नहीं आती है। विशेष रूप से, यह खिड़की / संवाद निर्माण के लिए कुछ भी नहीं प्रदान करता है।

मैं कोशिश की है प्रोटोटाइप विंडो ऐड-ऑन पुस्तकालय लेकिन यह अविश्वसनीय पाया जाता है और यह एक लंबे समय के लिए बनाए रखा नहीं किया गया है।

कोई भी किसी भी सिफारिश समाधान है? या पहले सिद्धांतों से (यानी प्रोटोटाइप के अलावा अन्य कोई पुस्तकालय के साथ) एक संवाद बनाने के लिए किसी भी व्यंजनों / पैटर्न? मैं (फीका पृष्ठभूमि प्रभाव के साथ) मोडल व्यवहार की जरूरत है और मैं IE6 के साथ ही आधुनिक ब्राउज़रों का समर्थन किया है।

बस स्पष्ट होना, मैं प्रोटोटाइप से दूर स्विच करने के लिए नहीं देख रहा हूँ और मैं नहीं है वास्तव में इस तरह के JQuery के रूप में एक अतिरिक्त आधार पुस्तकालय शामिल करना चाहते हैं।

12/02/2009 को 15:19
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


3 जवाब

वोट
0

Scriptaculous एक यूआई / विजेट / प्रभाव प्रोटोटाइप के ऊपर एक बने पुस्तकालय है। आप आप वहाँ क्या खोज रहे हैं मिल ही रहे हैं।

12/02/2009 को 15:24
का स्रोत उपयोगकर्ता

वोट
2

वहाँ कुछ अच्छे साइटों को देखने के लिए कर रहे हैं:

प्रोटोटाइप यूआई - जो एक मॉडल संवाद है।

Scripteka - प्रोटोटाइप की माँ परत ऐड-ऑन। यहाँ महान सामान के बहुत सारे।

12/02/2009 को 15:46
का स्रोत उपयोगकर्ता

वोट
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;
  }

});
17/02/2009 को 21:42
का स्रोत उपयोगकर्ता

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more