레프트 메뉴 추가 해보기

이번엔 레프트 메뉴를 추가해 보겠다.

먼저 default-left.jsp 들어가자.

다음 아래와 같이 스크립트단 과 form을 집어 넣자.

<script type="text/javascript">
 
var left = 
{
        pageSubmitFn :  function(pageName) {
            
            $("#pageName").val(pageName);
    
            if(pageName == "mainMenu") {
                $("#frm").attr("action", "main.do");
            }
            else if(pageName == "welcomeWebMenu") {
                 
                 $("#frm").attr("action", "welcomeWeb.do");   
              }
                
            $("#frm").submit();
    }
}
</script>
 
<form id="frm" name="frm">
    <input type="hidden"    id="pageName"      name="pageName" />
</form>

먼저 위 소스를 해석하자면, 5line 에

함수의 이름이 없다. 이것을 익명함수 라고 한다.

그리고 이 함수를 pageSubmitFn : 으로 써줬는데 

: 를 사용하면 프로퍼티 라고 부른다

left.pageSubmitFn 으로 접근할수 있다.

7line에서는 jQuery를 사용하여 타겟을 잡았다.

. 을 기준으로 왼쪽을 타겟 이라하고 오른쪽은 동작이다.

$는 jQuery의 시작을 뜻하며 #은 jQuery의 id를 뜻한다.

pageName이라는 아이디를 갖는 값을 파라미터로 설정한다.

다음 form 태그의 타입을 히든으로 준것은 input태그는 보여질

필요가 없기 때문에 히든을 넣어준다.

9line부터 조건문을 넣어 클릭된 메뉴에 따라 페이지가

넘어갈수 있도록 해준다.

10line은 attr을 사용해 action이란 곳에 main.do를 넣는다.

action이란 속성을 가지고 있는 값을 자바로 가지고간다.

17line의 jQuery로 타겟을 잡은 #frm은 form 태그를 의미하며

폼태그의 값을 가지고 submit 해서 컨트롤러로 가지고간다.

다음 위와같이 부트스트랩에 맞게 디자인도 넣어주고

레프트 메뉴를 추가한다.

중요한 부분은 <div> 태그 이다