폰갭 메뉴 클릭후 화면 처리

메뉴 클릭후 화면 처리 방법

지난 시간 제이쿼리 화면 처리에 대한 이야기를 했다.
필자가 사용하는 방법이니 다양한 기법들은 있을것으로 예상된다. 

메뉴를 클릭한후 화면 변화를 하는 구체적인 방법을 소개 하고자 한다.

기본적으로 컨텐츠 영역과 메뉴 영역을 나누어 놓고 메뉴 div 클릭했을때 컨텐츠 영역의 html을 변경하는것이다.

이해 하기 쉽게 정리해 봤다. 길게 설명하는것 보다 쉽게 이해하도록 작성하였다.

위 그림을 보면 body 속에 메인 컨텐츠 div의 id값을 main_contents 로 지정했다.

우리가 할일은 이 #main_contents의 html을 제이쿼리로 관리하면 된다는게 포인트이다.

js에 미리 menu1을 function으로 만들어 놓는다 그건 위 스크립트를 참고하면 된다.
uuid는 기기 고유값을 보내는것인데 그 용도는 나중에 다시 이야기 한다.

그럼 $.post(주소)로 메인페이지 정보를 data에 담아서 #main_contents에 넣는다.

메뉴 클릭했을때 이벤트 발생하는것은 지난시간에 소개했듯이 다음과 같은 소스로 호출하면 된다. 두가지 방법중에 가장 일반적인 방법으로 호출한다.

<div id="menu1" onclick="menu1">메뉴1</div>

menu1의 소스는 아래와 같다. 

function menu1() {
var uuid=device.uuid;
$.post("http://서버/페이지.html",
   {       
      uuid:uuid
       },  
 function(data)
{
$("#main_contents").html(data);  
 });
}

대부분의 화면 변화를 이런방법으로 가능하다.

홈페이지에서도 늘리 이용되는 방법이니 참고하면 도움될것 같다. 앞으로 계속 사용될 기법이다.
꼭 익혀 보시길 바란다. 거의 대부분 개발에 저 문구로 시작해서 끝나는 경우가 많다.