티스토리 뷰
8. 하이라이트 처리 - (4) location.href 에서 form 전송방식으로 리팩토링
개발 환경 IDE : Eclipse Mars.2 (4.5.2) SpringFramework : 4.1.2.RELEASE JDK : 1.8 Server : Apache Tomcat 7.0.91 OS : Mac OS Mojave(10.14) form 전송방식으로 리팩토링 지난포스팅까지 하여 레프트 메뉴 하..
elvis-note.tistory.com
이클립스에서 스프링 프로젝트 생성 후 HomeControoler.java 에 기본 / @RequestMapping를 복사해서 home2 를 만듬
jsp 는 기본 home.jsp 복사해서 home2.jsp 를 만듬.
resource 에 부트스트랩 관련 파일 복사 함.
아래 코드를 home.jsp 와 home2.jsp 에 똑같이 복사 메뉴 클릭하여 이동을 하여도 선택한 메뉴에 하이라이트 기능이 되는걸 확인 함.
다음 프로젝트에 메뉴 부분에 하이라이트 적용할 시 사용할 예정 임.
각 메뉴 부분의 id 값을 주고, class 에는 모두 active 값을 적용,
스크립트에서 페이지 링크 및 active 값을 컨트롤 하여 선택 이동한 페이지의 메뉴 하이라이트를 컨트롤 해준다.
자세한 사항은 맨 위 참고사이트 원글님의 상세한 설명이 있으니 참고.
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" %>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/resources/css/bootstrap.min.css" rel="stylesheet">
<script src="/resources/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
var left = {
pageSubmitFn : function(menu){
if(menu === "home"){
$("#frm").attr("action", "/"); //form 의 action 값을 /로 변경
$("#pageName").val("home");
}else if(menu==="profile"){
$("#frm").attr("action", "home2"); //form 의 action 값을 home2로 변경
$("#pageName").val("profile");
}
$("#frm").submit();
}
}
$(function(){
$(".nav-item").removeClass("active");
var pageName = "<c:out value='${param.pageName}' />";
$("#"+pageName).addClass("active");
$(".nav-item").click(function(){
var menu = $(this).attr("id");
left.pageSubmitFn(menu);
})
})
</script>
<title>Home1</title>
</head>
<body>
<ul class="nav nav-pills">
<li role="presentation" id="home" class="nav-item active">
<a href="#">Home</a>
</li>
<li role="presentation" id="profile" class="nav-item active">
<a href="#">Profile</a>
</li>
</ul>
<form id="frm" method="get" action="">
<input type="hidden" name="pageName" id="pageName">
</form>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| 한글/영어 글자수 체크하기 (0) | 2020.05.27 |
|---|---|
| lightslide 예제 (0) | 2019.08.20 |
| Jquery 슬라이드 예제 01 (2) | 2019.08.20 |
| Bootstrap Input 태그의 Clear 버튼 구현 (0) | 2019.06.03 |
| textarea 저장 줄바꿈 없이 출력 표시 (0) | 2019.05.09 |