본문 바로가기

Javascript/Jquery

Jquery Load 사용하기

오늘 간단한 작업이 들어왔다.

왼쪽 메뉴를 클릭했을때 컨텐츠 부분을 로드하는것이다. 프로모션 성이라 따른 특별한 비즈니스 로직이 없었다.

그리하여 외쪽 탭을 클릭했을때 jquery 의 load를 함 써봤다.

왜? 그냥 .....


한번 코드를 보자.

 <div id="contents"></div>

위의 html을 해놓고 document 가 ready 될때 기본적인 contents를 바인딩해준다.

 
$(document).ready(function () {
         $('#contents').load('/hrd/index9.html');
     });

그리고 왼쪽 탭에서 클릭 엑션이 일어났을때...
<a href="javascript:fn_chagneContents('album.html',2)">앨범</a>

자바스크립트를 호출하여  해당 html을 로드한다.

function fn_chagneContents(fileName,index) {
         var path = '/hrd/' + fileName;
         $('#leftMenu img').each(function () {
             var src = this.src.replace('_on''');
             this.src = src;
         });
         $('#img' + index).attr('src''http://img.hunet.co.kr/hunet/hrd_leadersforum/2011_9th/common/menu_0'+index+'_on.gif');
         $('#contents').load(path);
 
     }


끝 위의 코드는 내가 쓴 코드다.... 우리는 디자이너들이 이미지를 넘 좋아해서리 클릭이 일어날때

on 이미지를 각각 하나씩 더 만들어 준다.