최근 게시물 탭으로 불러오기

최근 게시물을 불러올때 하나의 레이어 부분에 여러 개시판을 탭으로 불러오는 소스
우선 버전까지 넣고 계속 업그레이드를 해볼 예정이다...ㅋ
사용 방법은 아래 사용법 보기를 클릭하면 볼 수 있다.

var cview = new bbs_tab(); // 함수 선언하기
cview.add(str '게시판아이디', str '게시판주소', bool 클릭시닫기); // 불러올 게시판 탭 추가
communityView.view('bbs2'); // 처음 불러올 게시판 아이디
탭 추가에서 게시판주소는 두번째 클릭 했을경우 해당 게시판으로 이동
그리고 게시판제목 부분에는 onclick으로 communityView.view('bbs2'); 를 넣어주고 해당 링크의 아이디는 게시판아이디_link 로 통일 시킨다.
예) <a href="#c" id="bbs3_link" onclick="communityView.view('bbs3');" class="ic2">유머</a>

<style type="text/css">
.line1 { BACKGROUND-COLOR: #efefef }
</style>
<script type="text/javascript">
/*
change log

2007.01.12 : 두번 클릭 시 안보이게 하는 기능 추가
2007.01.19 : 전역변수 생성자에서 선언하게 변경
            for문을 쓰지 않고 선택된 부분과 전에 선택된 두개만 변경하도록 수정
2007.07.20 : 이벤트 객체 이미지 롤오버 추가
            이벤트 객체에 스타일 클래스 추가할 수 있도록 수정

bbs_view
   string  method  선택 이벤트 타입 : click(onclick), roll(onmouseover)
   boolean  isClose  선택 이벤트 일어났을 경우 타겟을 닫을것인지 확인
   string  _tab  선택 이벤트가 일어날 객체
   boolean  img_chg  선택 이벤트가 일어날 객체가 이미지일 경우 rollover 할것인지
*/
function bbs_view(method, isClose, _tab, img_chg) {
   this.version    = '0.21';
   this.itemCount  = 0;
   this.item       = new Array();
   this.selectedId = null;
   this.isClose    = isClose ? true : false;
   this.closed     = true;
   this.method     = method ? method : 'click';
   this._tab       = _tab ? _tab : '_tab';
   this.img_chg    = img_chg ? true : false;
   this.className  = '';

   if(this.img_chg) {
       this._on = '_on';
       this._off = '_off';
       this.extReg = "(\.[^\.]+)$"; // 확장자와 구분자를 분류하는 정규식
       this.onSearch = new RegExp(this._on + this.extReg);
       this.offSearch = new RegExp(this._off + this.extReg);
   }

   this.add = function(id, url) {
       var classObj = this;
       var url_     = url ? url : null;
       var obj      = el_id(id);  // 클릭시 나타나는 레이어
       var obj_tab  = el_id(id+this._tab);  // 클릭할 링크나 이미지

       if(this.item[id] == undefined) {
           this.item[id] = new Array(url_, obj, obj_tab, id);
       }

       if(this.img_chg) {
           var outImg = new Image(), onImg = new Image();
           var returnImg = new Array();

           outImg.src = obj_tab.src.replace(this.onSearch, this._off + "$1");
           onImg.src  = outImg.src.replace(this.offSearch, this._on + "$1");

           obj_tab.setAttribute('outsrc', outImg.src);
           obj_tab.setAttribute('onsrc', onImg.src);
       }

       // onclick이나 onmouseover 시 실행될 스크립트
       // 추가하려면 obj_tab 부분 태그에 thisAction 이라는 attr 추가( ex:thisAction="alert('a');" )
       if(this.method == 'click') {
           obj_tab.onclick = function() {
               classObj.view(id); // 기본적으로 선택한 객체에 해당하는 레이어 보여주기
               if(this.thisAction) {
                   eval(this.thisAction);
               }
           }
       } else if(this.method == 'roll') {
           obj_tab.onmouseover = function() {
               classObj.view(id);
               if(this.thisAction) {
                   eval(this.thisAction);
               }
           }
       }
       obj.style.display = 'none';
   }
   this.view = function(id) {
       try {
           if(id == this.selectedId) {
               if(this.isClose == true && this.closed == false) {
                   this.closed = true;
                   this.item[this.selectedId][1].style.display = 'none';
                   if(this.className) { this.item[this.selectedId][2].className = ''; }
                   if(this.img_chg) {
                       this.item[this.selectedId][2].src = this.item[this.selectedId][2].getAttribute('outsrc');
                   }
                   return;
               } else {
                   this.closed = false;
                   this.item[this.selectedId][1].style.display = '';
                   if(this.className) { this.item[this.selectedId][2].className = this.className; }
                   if(this.item[this.selectedId][0]) { document.location.href = this.item[this.selectedId][0]; }
                   if(this.img_chg) {
                       this.item[this.selectedId][2].src = this.item[this.selectedId][2].getAttribute('onsrc');
                   }
                   return;
               }
           }
       } catch (e) {
           //alert(e);
       }
       if(this.selectedId) {
           this.item[this.selectedId][1].style.display = 'none';
           if(this.className) { this.item[this.selectedId][2].className = ''; }
           if(this.img_chg) {
               this.item[this.selectedId][2].src = this.item[this.selectedId][2].getAttribute('outsrc');
           }
       }
       this.closed = false;
       this.item[id][1].style.display = '';
       if(this.className) {
           this.item[id][2].className = this.className;
           alert(this.item[id][2].className);
       }
       this.selectedId = id;
       if(this.img_chg) {
           this.item[id][2].src = this.item[id][2].getAttribute('onsrc');
       }
   }
}

var communityView = new bbs_tab();
communityView.add('bbs1', 'bbs.php?id=bbs1');
communityView.add('bbs2', 'bbs.php?id=bbs2');
communityView.add('bbs3', 'bbs.php?id=bbs3');
communityView.add('bbs4', 'bbs.php?id=bbs4');
communityView.view('bbs2');
</script>

Change Log
07.01.12
다시 클릭 하면 해당 객체 안보여지게 수정