하이라이트 처리란?
|
<ul id="leftUl" class="nav"> <li id="one" > <a href="#" onclick="leftClickFn('one')"> <i class="pe-7s-graph"></i> <p>one</p> </a> </li> </ul> <ul class="nav"> <li id="two" class="active"> <a href="#" onclick="leftClickFn('two')"> <i class="pe-7s-graph"></i> <p>two</p> </a> </li> </ul>
li 태그의 class 속성에 값을 active 라고 주면 하얀색으로 불투명하게 선택되게 되는데 이를 하이라이트 처리라고 한다. |
@@@@@하이라이트 처리 스크립트처리 과정
소스 (default-left.jsp)
|
<script type = "text/javascript">
function leftClickFn(gubun){ location.href = "/" + gubun + ".do?pageName=" + gubun ; } $(function(){ var pageName = "";
$("#leftUl > li").removeClass("active");
pageName = "${param.pageName}";
$('#' + pageName).addClass("active"); }); </script>
. . . . <ul id="leftUl" class="nav"> <li id="one" > <a href="#" onclick="leftClickFn('one')"> <i class="pe-7s-graph"></i> <p>one</p> </a> </li> </ul> <ul class="nav"> <li id="two" > <a href="#" onclick="leftClickFn('two')"> <i class="pe-7s-graph"></i> <p>two</p> </a> </li> </ul> |
1
<li id="one" >
<a href="#" onclick="leftClickFn('one')">
<i class="pe-7s-graph"></i>
<p>one</p>
</a>
</li>
-
li태그중 id속성이 "one"인 li태그를 클릭하였다.
-
그러면 onclick 이벤트 모델이 leftClickFn 이라는 함수를 전달인자 'one'을 넘기면서 호출한다.
2
function leftClickFn('one'){
location.href = "/" + 'one' + ".do?pageName=" + 'one' ;
}
-
매개변수 'one' 을 가져왔고 /one.do?pageName="one" 으로 get 방식으로 논리적 주소를 호출
-
이때 pageName 은 키 "one" 은 값이 되어 같이 넘겨진다.
3
@RequestMapping("/one.do")
public String initOne(HttpServletRequest req) throws Exception {
System.out.println(req.getParameter("pageName"));
return "main/one.tiles";
}
-
이클립스 콘솔에 one 이 찍히고 "main/one.tiles" 를 리턴
4
<!-- 타일즈 뷰 설정 -->
<bean class="org.springframework.web.servlet.view.UrlBasedViewResolver">
<property name="viewClass" value="org.springframework.web.servlet.view.tiles3.TilesView" />
<property name="order" value="1" />
</bean>
<!-- 타일즈 레이아웃 설정 -->
<bean class="org.springframework.web.servlet.view.tiles3.TilesConfigurer">
<property name="definitions">
<list>
<value>/WEB-INF/tiles/default-layout.xml</value>
</list>
</property>
</bean>
-
톰켓구동과정에서 각종 xml 파일을 통해 초기 설정을 세팅하는데 dispatcher-servlet.xml 에
타일즈에 대한 설정과 경로를 미리 넣어놓았다.
-
해당경로( /WEB-INF/tiles/default-layout.xml ) 로 이동
5
-
default-layout.xml 에서 컨트롤러에서 받아온 "main/one.tiles" 값을 설정대로 파싱되어
-
content 의 value 가 /WEB-INF/jsp/egoveframework/example/main/one.jsp 되고
-
나머지 main-tiles를 상속받았기 때문에 나머지 것들을 포함하여 template 에 세팅된 값 경로인 default-layouts.jsp 로 이동
6
다시 default-left.jsp 소스 아래
=== 아래 ===
$(function(){
var pageName = "";
$("#leftUl > li").removeClass("active");
pageName = "${param.pageName}";
$('#' + pageName).addClass("active");
});
.
.
.
<ul id="leftUl" class="nav">
<li id="one" >
<a href="#" onclick="leftClickFn('one')">
<i class="pe-7s-graph"></i>
<p>one</p>
</a>
</li>
</ul>
<ul class="nav">
<li id="two" >
<a href="#" onclick="leftClickFn('two')">
<i class="pe-7s-graph"></i>
<p>two</p>
</a>
</li>
</ul>
7
$("#leftUl > li").removeClass("active");
=> leftUl 이라는 id 의 자손중에서 list를 선택
8
$("#leftUl > li").removeClass("active");
=> 속성조작 메서드중 하나인 리무브클레스를 이용해서 active라고 적혀있는 클레스를 지운다.
9
pageName = "${param.pageName}";
=>EL 태그를 통해서 pageName 이라는 이름을 가진 파라메타값을 가져오고 그 값을
지역변수 pageName 에 넣는다.
10
$('#' + pageName).addClass("active");
=> location.href 를통해서 넘긴 값은 'one' 이였으므로 pageName은 one이다
11
$("#one").addClass("active");
=> 속성조작 메서드중하나인 addClass를 통해서 아이디 one 인곳에 class="active" 를 추가한다.
12
<li id="one" class="active">
=> 최종적으로 사용자에게 보여지는 화면은 위을 태그와 같아지므로 아래와 one을 클릭하였을 경우 아래 와 같이 표시
=== 아래 ===
13
TWO를 클릭했을경우는 2~11 과정이 반복되고 특히 8번에서 기존 하이라이트를 전부 제거 하고
11번에서 아이디 two 에 하이라이트 추가 되므로 아래 와 같이 표시
