티스토리 뷰

웹프로그래밍/js

[Prototype] Class, invoke 사용예제

공허공자 2009. 3. 24. 16:47

+ 목표 :

---------------------------------------------
| ▶  {제목}                                       |
---------------------------------------------
| {내용}                                           |
---------------------------------------------

의 박스 컨텐트에서 내용줄은 처음에 숨겨져 있고

제목줄을 클릭하면 내용줄이 튀어나오는 토글 기능 구현.

 

을 하는데, 나같은 객체지향에 애로사항 많은 이들을 위해

함수를 클래스로 전환시켜 나가는 과정도 보여주기.

 

+ 구현 :

1. 기존에 하던대로 함수 제작

function wjToggle(curEl)
{
    var cinEl = $(curEl).up('div', 1);
    var contEl = $(cinEl).down('.content');

    if ($(curEl).innerHTML.toLowerCase() == "▶")
    {
        contEl.show();
        curEl.update('▼');
    } else {
        contEl.hide();
        curEl.update('▶');
    }

    return false;
}

 

2. onClick 이벤트에 바로 적용해서 작동 확인

<div class="widjet">
        <div class="bar">
            <div class="semo" onclick="wjToggle(this)">▶</div>
            <div class="handle">{제목ddddddddddddddddddddddddddddddddddddddddddd}</div>
            <div class="controls"><a href="javascript:void(0)" class="ctlEdit">+</a> <a href="javascript:void(0)" class="ctlDel">-</a></div>
        </div>
        <div class="content" style="display:none;">
            내용
        </div>
</div>

 

3. 이것을 여러 <div class="widjet"> 에 적용

$$('div.widjet').each(); 를 생각해 볼수 있다.

$$('div.semo').each(function(el) {

    this.observe(''click', wjToggle);  // 요기에서 2.와 다른점은 wjToggle 함수에 인자가 element 가 아닌 observe로 인해 event 가 간다는거다.

});

 

function wjToggle(event)
{

   var curEl = Event.element(event);    // event를 통한 element 구하기
    var cinEl = $(curEl).up('div', 1);
    var contEl = $(cinEl).down('.content');

    if ($(curEl).innerHTML.toLowerCase() == "▶")
    {
        contEl.show();
        curEl.update('▼');
    } else {
        contEl.hide();
        curEl.update('▶');
    }

    return false;
}

 

이에, 한걸음 더 나아가 구현을 편하게 해주는 invoke 를 사용하여 내 머리가 스마트함을 보여주자.

$$('div.semo').invoke('observe', 'click', wjToggle);

 

4. 마우스를 올렸을때 손커서로 바꿔지도록 기능을 추가해본다.

$$('div.semo').invoke('setStyle', { cursor:'pointer' }).invoke('observe', 'click', wjToggle);

 

5. 이렇게 기능을 늘여나가려다보니 같은곳에 쓰이는 함수를 꾸러미로 묶고싶어졌다. 함수의 꾸러미를 만들수 있는것은 바로 Class !

그래서 wjToggle 함수를 클래스로 변형해보자.

var widjet = Class.create({
    toggle: function() {
    var cinEl = $(this).up('div', 1);      // each() 의 인자에 해당되므로 this 사용가능.
    var contEl = $(cinEl).down('.content');

    if ($(this).innerHTML.toLowerCase() == "▶")
    {
        contEl.show();
        $(this).update('▼');
    } else {
        contEl.hide();
        $(this).update('▶');
    }

    return false;
    }
});

 

var wj = new widjet();

$$('div.semo').invoke('setStyle', { cursor:'pointer' }).invoke('observe', 'click', wj.toggle);

 

6. 결과 전체 소스 

<html>
<head>
    <style type="text/css">    
    <!--    
        .widjet {    
            width: 450px;    
            border: 1px solid gray;    
            margin: 0 0 5px 0;    
        } 
        .bar {   
            height:22px;    
            background-color:lightblue;    
        } 
        .semo { float:left; width: 15px; }   
        .handle { float:left; margin-left:5px; width: 380px; height:22px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }    
        .controls { float:right; width: 30px; } 
        .content {   
            clear:both;    
            background-color:lightyellow;    
        }    
    -->    
    </style> 
    <script type="text/javascript" src="prototype.js"></script>   
    <script type="text/javascript" src="scriptaculous.js"></script> 
    <script language="javascript" type="text/javascript">   
    //<![CDATA    
        var widjet = Class.create({    
            toggle: function() {    
                var cinEl = $(this).up('div', 1);    
                var contEl = $(cinEl).down('.content'); 
                if ($(this).innerHTML.toLowerCase() == "▶")   
                {    
                    contEl.show();    
                    $(this).update('▼');    
                } else {    
                    contEl.hide();    
                    $(this).update('▶');    
                } 
                return false;   
            }    
        });
        document.observe('dom:loaded', function() {   
            var wj = new widjet(); 
            $$('div.semo').invoke('setStyle', { cursor:'pointer' }).invoke('observe', 'click', wj.toggle);   
        });    
    //]]>
    </script>    
</head> 
<body>
    <div class="widjet">    
        <div class="bar">    
            <div class="semo">▶</div>    
            <div class="handle">{제목ddddddddddddddddddddddddddddddddddddddddddd}</div>    
            <div class="controls"><a href="javascript:void(0)" class="ctlEdit">+</a> <a href="javascript:void(0)" class="ctlDel">-</a></div>    
        </div>    
        <div class="content" style="display:none;">    
            내용    
        </div>    
    </div>
</body></html>

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

scriptaculous 웹문서  (0) 2009.03.25
Prototype.js 확장 컨트롤 LivePipe UI  (0) 2009.03.25
Web 에서 Flash 이용한 Clipboard Copy  (0) 2009.03.24
script.aculo.us 의 Sortable 사용  (1) 2009.03.11
Prototype responseJSON 사용  (0) 2009.03.11
공유하기 링크
댓글