티스토리 뷰

Ajax.request
Ajax.update
작동시마다 자동으로 '기다려주세요' 와 같은 표시를 하고싶을때
표시를 1개로 통일하여 사용하는것이다.

<style type="text/css"> 
<!--
div.indicator { 
            position: fixed; 
            bottom: 0; 
            padding: 0; 
            height: 20px; 
            margin: 0; 
            padding: 5px; 
            width: 100%; 
            background-color: #FFFF99; 
            display: block; 
            text-align: center; 
            font: bold 1.3em 'Verdana, Arial, Helvetica, sans-serif'; 
} 
--> 
</style>

<script type="text/javascript"> 
//<![CDATA
    // Global Ajax Indicator 
    var Indicator = Class.create({ 
        initialize: function() { 
            this.element = document.createElement('div'); 
            this.element.setStyle({ display:'none' }); 
            this.element.addClassName('indicator'); 
            this.element.update('<img src="/images/protoload/waiting.gif" width="16" height="16" align="absmiddle"> Working...'); 
            document.body.insert(this.element, { position:'bottom' }); 
        }, 
        show: function() { 
            //this.element.show(); 
            Effect.Appear(this.element, {duration: 0.25, queue: 'end'} ); 
        }, 
        hide: function() { 
            //this.element.hide(); 
            Effect.Fade(this.element, {duration: 0.25, queue: 'end'} ); 
        } 
    }); 
   
    document.observe('dom:loaded', function(e) { 
        // Indicator 
        Indicator = new Indicator(); 
        // Indicator 이용 Ajax 작동상태 표시기 셋팅 
        Ajax.Responders.register({ 
            onCreate: function() { 
                Indicator.show(); 
                Ajax.activeRequestCount++; 
            }, 
            onComplete: function() { 
                Indicator.hide(); 
                Ajax.activeRequestCount--; 
            } 
        }); 
    });
//]]> 
</script>

'웹프로그래밍 > js' 카테고리의 다른 글

PrototypeXtensions  (0) 2009.04.23
JS Tree 링크들  (0) 2009.04.08
scriptaculous 웹문서  (0) 2009.03.25
Prototype.js 확장 컨트롤 LivePipe UI  (0) 2009.03.25
[Prototype] Class, invoke 사용예제  (0) 2009.03.24
댓글