[메모]HTML 부분을 컨트롤화

Ajax를 이용한 웹 애플리케이션을 제작하다 보면 ASP.NET의 사용자 컨트롤처럼 HTML 페이지의 전체를 부분을 컨트롤화 할 수 있는 방법이 필요한 경우가 있다. 이런 경우 부분을 로딩하기 위해서 ASP.NET의 HTTP 핸들러같은 모듈을 제작할 수도 있지만, jQuery 같은 라이브러리를 사용하는 경우는, jQuery의 load, get 같은 메소드를 이용해서 쉽게 해결할 수 있다.

    $('.left-nav a').each(function() {
        var $link = $(this);
        var $dialog = $('<div></div>')
   .load($link.attr('href') ) // --> 요 부분
   .dialog({
       autoOpen: false,
       title: $link.attr('title'),
       show: "blind",
       hide: "blind", // explode, slide
       close: BizBee.Main.PostMemberInfo,
       width: 500,
       height: 300    
       
   });

        $link.click(function(ev) {
            $dialog.dialog('open');

            $('.left-nav a.selected').removeClass('selected');
            $(this).addClass('selected');
            ev.preventDefault();

            return false;
        });
    });