Rev. 2.73

humanized.png

우리는 그동안 '띵~' 하면서 뜨는 대화상자(자바스크립트 Alert)를 지겹도록 보아왔다. 보다 인간다운 컴퓨터 인터페이스 디자인을 연구하는 회사인 Humanized에 따르면, 대부분의 사용자들이 팝업되는 대화상자의 메시지를 제대로 읽지 않고 닫아버린다고 한다. 이것은 무서운 결과를 초래할 수도 있다고 경고하고 있다. 그들은 메시지를 조금 더 효율적으로 전달 할 수 있도록 '투명 메시지(The transparent message)'라는 자바스크립트 라이브러리를 공개하였다. 아래의 링크를 클릭해 보자.

alert('안녕하세요!')
alert('The Web is still changing!!')

이 라이브러리는 브라우저에서 기본으로 제공하는 자바스크립트 함수인 alert을 오버라이드(override)하여 사용하기 때문에 별도의 추가작업을 하지 않아도 대화상자를 투명 메시지로 교체 할 수 있다. humanized가 공개한 자바스크립트 소스MochiKit 프레임웍을 기반으로 제작되어 있어서 PrototypeScriptaculous 프레임웍 기반으로 변환하였다. 추후 confirm과 prompt함수까지 오버라이드해 볼 생각이다.

/** 
 * Prototype base Transparent Message.
 * @copyright Humanized, Inc.
 * @license Attribution-NonCommercial-ShareAlike 2.5
 * @author1 Aza Raskin <aza@humanized.com>
 * @author2 Firejune <to@firejune.com>
 * 
 * <style>
 *   .humanized_msg{
 *    position: absolute; left: 25%; width: 50%;
 *    color: white; background-color: #8CC63F;
 *    font-size: 36pt; text-align: center; 
 *  }
 *
 *  .humanized_msg .round{
 *     border-left: solid 2px white; border-right: solid 2px white;
 *    font-size: 1px; height: 2px;
 *  }
 *
 *  .humanized_msg p{ padding: .3em; display: inline;}
 *  </style>
 */

var transMsg = Class.create();
transMsg.prototype = {
  initialize: function(options){
    this.options = Object.extend({
      opacity: 0.9,
      offset: -150,
      foramt: '<div class="round"></div><p>%s</p><div class="round"></div>',
      effect: null,
      currMsg: ""
    }, options || {});

    this.hideEvents = ['mousedown', 'keydown', 'mouseout'];
    this.mouseAction = this.hideMessage.bindAsEventListener(this);
  },
  loadEvents: function(){
    var unload = this.unloadEvents.bindAsEventListener(this);
    for(var i=0; i < this.hideEvents.length; i++){
      Event.observe(document.body, this.hideEvents[i], this.mouseAction);
    }
    Event.observe(window, 'unload', unload);
  },
  unloadEvents: function(){
    for(var i=0; i < this.hideEvents.length; i++){
      Event.stopObserving(document.body, this.hideEvents[i], this.mouseAction);
    }
    //Element.remove(this.element);
  },
  createMessage: function(){
    this.element = document.createElement('DIV');
    this.element.className = 'humanized_msg';
    Element.hide(this.element);
    if(Prototype.Browser.Gecko){
      Element.setStyle(this.element, {position:'fixed'});
    }
    document.body.appendChild(this.element);
    this.loadEvents();
  },
  hideMessage: function(){
    if (Element.getOpacity(this.element) >= this.options.opacity){
      this.options.effect = new Effect.Fade(this.element, {duration:0.5});
    }
  },
  popMessage:function(message){
    Sound.play('spsacem');
    $(this.element).innerHTML = this.options.foramt.replace("%s", message);
    
    this.options.currMsg = message;
    Element.show(this.element);
  
    var height = Element.getHeight(this.element);
    var top = Position.scrollY()+(Position.getPageSize().window.height/2)-(height/2)+this.options.offset;
    if(Prototype.Browser.Gecko){
      top = (Position.getPageSize().window.height/2)-(height/2)+this.options.offset;
    }
    Element.setStyle(this.element, {top:top+'px'});
    Element.setOpacity(this.element, this.options.opacity);
  },
  showMessage:function(message){
    if(typeof this.element != 'object'){
      this.createMessage();
    }
    this.options.effect = this.options.effect? this.options.effect : '';
    if(this.options.effect != 'null' && this.options.effect.state == "running"){
      this.options.effect.options.afterFinish = function(){
        this.popMessage(message);
      }.bind(this);
    } else {
      this.popMessage(message);
    }
  }
};

transMsg = new transMsg(); // Transparent message initialize

function alert(message) {
	transMsg.showMessage(message);
};

Comments

Got something to add? You can just leave a comment.

  • 토미 토미

    좋은 정보 감사합니다^^
    너무 좋은 방법이네요!

    reply edit

  • 사라지는 시점이 좀 어색하긴 하지만 그럭저럭 쓸만은 하군요.

    reply edit

  • 너무 공장(?)스럽지 않고 부드러운 느낌도 나서 좋네요.

    reply edit

  • 후니 후니

    this.options = Object.extend({
    opacity: 0.9,
    offset: -150,
    foramt: '<div class="round"></div><p>%s</p><div class="round"></div>',
    effect: null,
    currMsg: "" },
    options || {}); ===> 요 마지막 부분 options || {} 이게 무엇을 의미하는 말인가요?

    reply edit

  • options는 클래스의 성격을 띤 함수에 이차원 배열로 구성된 부가 정보를 확장할 때 쓰이는 것으로, 아규먼트로 받은 options가 첫번째 확장의 대상이 되며, 아규먼트를 꼭 작성하지 않더라도 확장되도록 비어있는 object를 넘겨주어 기본값이 적용되게 하려는 목적입니다. 뭐 아래의 예제와 비슷한 뜻으로 해석하실 수 있겠습니다.

    var a = null;
    var b = 'not null';
    var c = a || b;
    alert(c); // => 'net null';

    reply edit

  • 김용한 김용한

    관련됀 프레임워크다운받아서 설치를했는데도 잘안돼네요 관련됀 자료를 업로드해주시면 감사하겠습니다

    reply edit

  • 김용한 김용한

    var top = Position.scrollY()+(Position.getPageSize().window.height/2)-(height/2)+this.options.offset; if(Prototype.Browser.Gecko){ top = (Position.getPageSize().window.height/2)-(height/2)+this.options.offset; }
    이부분에서 Prototype.js 에서
    Position.scrollY() 라던지 Position.getPageSize()라는 함수라던지 파이어준님이 확장해서 만드신거같은데 좀올려주실수없나요?

    reply edit

  • 답변이 늦어서 죄송합니다. 관련 합수입니다. ^^;

    /**
    * Returns window width or height and Scroll width or height
    * Core code from - quirksmode.org - Edit for Firefox by pHaez
    * - after modification by Firejune (firejune.com)
    */
    Position.getPageSize = function() {
    var xScroll, yScroll, windowWidth, windowHeight;

    if (window.scrollMaxX) {
    xScroll = window.innerWidth + window.scrollMaxX;
    yScroll = window.innerHeight + window.scrollMaxY;
    } else {
    xScroll = document.body.scrollWidth;
    yScroll = document.body.scrollHeight;
    }

    if (self.innerHeight) { // all except Explorer
    windowWidth = self.innerWidth;
    windowHeight = self.innerHeight;
    } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
    windowWidth = document.documentElement.clientWidth;
    windowHeight = document.documentElement.clientHeight;
    }

    // for small pages with total height less then height of the viewport
    pageHeight = Math.max(windowHeight, yScroll);
    // for small pages with total width less then width of the viewport
    pageWidth = Math.max(windowWidth, xScroll);

    return { page: { width: pageWidth, height: pageHeight }, window: { width: windowWidth, height: windowHeight } };
    };

    Position.scrollX = function() {
    return (window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0);
    };

    Position.scrollY = function() {
    return (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
    };

    reply edit


  • <a href="http://www.8aogu.cn">百奥谷</a>
    [url=http://www.8aogu.cn]百奥谷[/url]


    百奥谷
    http://www.8aogu.cn
    http://www.8aogu.com
    百奥谷志愿者:弘扬爱国精神,支援灾区重建!

    测厚仪,涂层测厚仪
    http://www.200817.cn

    reply edit

  • alert을 override하는 자바스크립트 메시지 - Firejune Blog - 오호 이거 재밌는데..~

Your Reaction Time!

captcha

avatar