본문 바로가기

컴퓨터 프로그래밍/JQuery

accordion 활용

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Accordion - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/sunny/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><!--UI jquery  -->
  <!-- bootstrap 라이브러리가 나중에 와야합니다. -->
  <script>
  $(function() {
    $("#accordion" ).accordion({
    	//컨텐트 사이즈에 맞게, 어코디언의 폭을 조절...
    	heightStyle:'content',/*default가 fill입니다  */
    	active:false,
    	collapsible: true
    });
    $("#accordion h3").on('click', function(){
    	var text=$(this).text();
    	//1. 비동기 통신 시작....
    	if(text=="IT Education Subject"){
    		$.ajax({
				type:'post', 
				url:'front.do', 
				data:'command=subject', 
				
				success:function(data){
					$('#subject').html(data);
				}//callback
				});//ajax
    	}else if(text=="Association Global IT Company"){
    		$.ajax({
				type:'post', 
				url:'front.do', 
				data:'command=company', 
				
				success:function(data){
					$('#itCom').html(data);
				}//callback
				});//ajax
    	}
    });//click
    
    $('#createSection').on('click', function(){
    	var footercontent = "<h3>HowToGet</h3><div>서울 서초동 459 엔코아 아카데미 남부터미널 777</div>";
    	$(this).remove();//버튼을 없앤다.
    	//$('#accordion').append(footercontent);//동적으로 아코디언을 생성하는 기능 
    	$('#accordion').append(footercontent).accordion('destroy').accordion({
    		heightStyle:'content'
    	});//accordian
    });//button click
  });//jquery
  </script>
</head>
<body>
 
<div id="accordion">
  
  <h3>Encore Academy Introduction</h3>
	  <div>
	  플레이 데이타의 새로운 교육 프로그램을 소개합니다.<br>
	  아래 섹션에서 이수할 교육과목을 확인하시기 바랍니다.
	  </div>
	  
  <h3>IT Education Subject</h3>
	  <div id="subject">
	  
	  </div>
	  
  <h3>Association Global IT Company</h3>
	  <div id="itCom">
	  </div>
</div>
<hr>
<input type="button" value="Creat Section addition" id="createSection"> 
 
</body>
</html>
package servlet.controller;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("*.do")//들어오는 모든 요청
public class DispatcherServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doProcess(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doProcess(request, response);
	}
	protected void doProcess(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
			
		String command = request.getParameter("command");
		System.out.println(command);
		Controller controller = HandlerMapping.getInstance().createContoller(command);
		String path = "index.jsp";
		ModelAndView mv = null;
		
		try {
			mv = controller.handle(request, response);
			path = mv.getPath();
		}catch(Exception e) {
			System.out.println(e);
		}
		if(mv!=null) {
			if(mv.isRedirect()) response.sendRedirect(path);
			else request.getRequestDispatcher(path).forward(request, response);
		}
		
	}

}
package servlet.controller;

public class HandlerMapping {
	private static HandlerMapping handler = new HandlerMapping();

	private HandlerMapping() {
	};

	public static HandlerMapping getInstance() {
		return handler;
	}

	public Controller createContoller(String command) {
		Controller controller = null;
		if(command.equals("subject")) {
			controller = new SubjectController();
			System.out.println("SubjectController Creating");
		}else if(command.equals("company")) {
			controller = new companyController();
			System.out.println("SubjectController Creating");
		}
		return controller;
	}

}
package servlet.controller;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class SubjectController implements Controller {

	@Override
	public ModelAndView handle(HttpServletRequest request, HttpServletResponse response) throws Exception {
		System.out.println("getSubjectController 진입");
		//비즈니스 로직 호출... 결과값 리턴 받았다 치고, 
		String result = "Algorithm|Big Data|Deep Learning|Restful API|Vue.js";
		request.setAttribute("result",result);
		return new ModelAndView("Result.jsp");
	}

}
package servlet.controller;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class companyController implements Controller {

	@Override
	public ModelAndView handle(HttpServletRequest request, HttpServletResponse response) throws Exception {
		System.out.println("CompanayController 진입");
		String result = "<ul><li> Tomato System</li><br> "
				+ "<li>Ahn Lab Corporation</li><br> "
				+ "<li>East Enginneering</li><br> "
				+ "<li>NCSoft System</li><br> "
				+ "<li>Encore Softmax Academy</li></ul><br>";
		request.setAttribute("result", result);
		
		return new ModelAndView("Result.jsp");
	}

}
package servlet.controller;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public interface Controller {

	ModelAndView handle(HttpServletRequest request, HttpServletResponse response) throws Exception;
	
	
}

 

package servlet.controller;
/*
 * 결과페이지 이름과 이동방식(forward|redirect)에 대한 정보를 답고 있는 객체
 * ModelAndView(Spring MVC 라이브러리에서 따옴)
 */
public class ModelAndView {
	private String path;
	private boolean isRedirect;
	// default가 false니까요. 기본이 forward라는 의미 입니다. 
	// 생성자가 path만 있어도 된다는 것은, default가 false입니다.
	public ModelAndView() {
	}

	public ModelAndView(String path, boolean isRedirect) {
		this.path = path;
		this.isRedirect = isRedirect;
	}
	
	public ModelAndView(String path) {
		this.path = path;
	}

	public String getPath() {
		return path;
	}

	public void setPath(String path) {
		this.path = path;
	}

	public boolean isRedirect() {
		return isRedirect;
	}

	public void setRedirect(boolean isRedirect) {
		this.isRedirect = isRedirect;
	}

	@Override
	public String toString() {
		return "MedelAndView [path=" + path + ", isRedirect=" + isRedirect + "]";
	}

}

 

 

'컴퓨터 프로그래밍 > JQuery' 카테고리의 다른 글

droppable 활용  (0) 2020.06.17
JQuery .css()  (0) 2020.06.15
append, prepend, appendTo, prependTo, before, after  (0) 2020.06.13
D-day 구하는 로직  (0) 2020.06.11
input안에 내용 변화 감지하는 이벤트  (0) 2020.06.10