[JDBC] Ajax: jQuery UI

🍁jQuery UI
🍁jQuery UI의 사용
아코디언
탭 선택
자동완성
날짜 선택기
대화상자
툴팁
선택 가능한 요소
정렬 가능한 요소
🍁jQuery UI의 활용

🍁jQuery UI

jQuery

What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

jquery.com

https://jqueryui.com/

jQuery UI

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQue

jqueryui.com

jQuery UI에 대한 설명을 확인할 수 있다.

다운로드 사이트

https://releases.jquery.com/ui/

jQuery UI – All Versions | jQuery CDN

jQuery UI – All Versions jQuery UI - Git Builds UNSTABLE, NOT FOR PRODUCTION jQuery UI 1.13 jQuery UI 1.13.2 - uncompressed, minified Themes base black-tie blitzer cupertino dark-hive dot-luv eggplant excite-bike flick hot-sneaks humanity le-frog mint-ch

releases.jquery.com

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js" integrity="sha256-xLD7nhI62fcsEZK2/v8LsBcb4lG7dgULkuXoXB/j91c=" crossorigin="anonymous"></script>

jQuery UI를 jQuery를 불러오는 코드 아래에 붙여넣기 하여 사용한다.

직접 구현 vs 참조 구현

직접 구현하면 모든 점을 통제할 수 있다는 이점이 있지만, 시간이 오래 걸리기 때문에 대부분 참조 구현한다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="http://pinnpublic.dothome.co.kr/cdn/example-min.css">
<style>
	.chromi {
		width: 300px;
		height: 250px;
	}
</style>
</head>
<body>
	<h1>chromi + Ajax</h1>

	<img src="/ajax/images/chromi.png" id="chromi1" class="chromi">
	<img src="/ajax/images/chromi.png" id="chromi2" class="chromi">
	<img src="/ajax/images/chromi.png" id="chromi3" class="chromi">
	<img src="/ajax/images/chromi.png" id="chromi4" class="chromi">
	<img src="/ajax/images/chromi.png" id="chromi5" class="chromi">

	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js" integrity="sha256-xLD7nhI62fcsEZK2/v8LsBcb4lG7dgULkuXoXB/j91c=" crossorigin="anonymous"></script>
	
	<script src="http://pinnpublic.dothome.co.kr/cdn/example-min.js"></script>
	<script>
		//$('#chromi').draggable();
		
		$('.chromi').draggable({
			//axis: 'y'
			grid: [200, 200]
		})
	</script>
</body>
</html>

마우스로 이미지를 드래그하여 이동할 수 있다.

🍁jQuery UI의 사용

아코디언

아코디언 위젯을 사용하여 제목을 클릭하면 해당 섹션이 열리고 닫힌다.

<!DOCTYPE html>
<html>
<head>
  <title>jQuery UI Accordion</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <script>
    $(function() {
      $("#accordion").accordion();
    });
  </script>
</head>
<body>
  <div id="accordion">
    <h3>Section 1</h3>
    <div>
      <p>Content for section 1.</p>
    </div>
    <h3>Section 2</h3>
    <div>
      <p>Content for section 2.</p>
    </div>
    <h3>Section 3</h3>
    <div>
      <p>Content for section 3.</p>
    </div>
  </div>
</body>
</html>

탭 선택

여러 탭을 만들어 컨텐츠를 구성하고 탭을 클릭하여 해당 컨텐츠를 전환한다.

<!DOCTYPE html>
<html>
<head>
  <title>jQuery UI Tabs</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <script>
    $(function() {
      $("#tabs").tabs();
    });
  </script>
</head>
<body>
  <div id="tabs">
    <ul>
      <li><a href="#tab-1">Tab 1</a></li>
      <li><a href="#tab-2">Tab 2</a></li>
      <li><a href="#tab-3">Tab 3</a></li>
    </ul>
    <div id="tab-1">
      <p>Content for Tab 1.</p>
    </div>
    <div id="tab-2">
      <p>Content for Tab 2.</p>
    </div>
    <div id="tab-3">
      <p>Content for Tab 3.</p>
    </div>
  </div>
</body>
</html>

자동완성

입력 필드에서 사용자가 입력을 시작하면 관련 옵션을 자동으로 추천한다.

<!DOCTYPE html>
<html>
<head>
  <title>jQuery UI Autocomplete</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <script>
    $(function() {
      var availableTags = ["Apple", "Banana", "Cherry", "Date", "Grape", "Lemon"];
      $("#autocomplete").autocomplete({
        source: availableTags
      });
    });
  </script>
</head>
<body>
  <label for="autocomplete">Select a fruit: </label>
  <input id="autocomplete">
</body>
</html>

날짜 선택기

날짜 선택기 위젯을 사용하여 날짜를 선택할 수 있게 한다.

<!DOCTYPE html>
<html>
<head>
  <title>jQuery UI DatePicker</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <script>
    $(function() {
      $("#datepicker").datepicker();
    });
  </script>
</head>
<body>
  <p>Date: <input type="text" id="datepicker"></p>
</body>
</html>

대화상자

대화상자를 만들어 다양한 메시지나 내용을 표시하고 사용자와 상호작용한다.

<!DOCTYPE html>
<html>
<head>
  <title>jQuery UI Dialog</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <script>
    $(function() {
      $("#dialog").dialog();
    });
  </script>
</head>
<body>
  <div id="dialog" title="Dialog Title">
    <p>This is a simple dialog.</p>
  </div>
</body>
</html>

툴팁

요소 위에 마우스를 가져가면 툴팁이 나타나며 추가 정보를 제공한다.

<!DOCTYPE html>
<html>
<head>
  <title>jQuery UI Tooltip</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <script>
    $(function() {
      $(document).tooltip();
    });
  </script>
</head>
<body>
  <a href="#" title="Visit our website">Hover over me</a>
</body>
</html>

선택 가능한 요소

여러 요소 중에서 하나 이상을 선택할 수 있는 기능을 제공한다.

<!DOCTYPE html>
<html>
<head>
  <title>jQuery UI Selectable</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <style>
    #selectable .ui-selecting { background: #FECA40; }
    #selectable .ui-selected { background: #F39814; color: white; }
  </style>
  <script>
    $(function() {
      $("#selectable").selectable();
    });
  </script>
</head>
<body>
  <ol id="selectable">
    <li class="ui-widget-content">Item 1</li>
    <li class="ui-widget-content">Item 2</li>
    <li class="ui-widget-content">Item 3</li>
    <li class="ui-widget-content">Item 4</li>
    <li class="ui-widget-content">Item 5</li>
  </ol>
</body>
</html>

정렬 가능한 요소

요소를 드래그하여 순서를 변경할 수 있다.

<!DOCTYPE html>
<html>
<head>
  <title>jQuery UI Sortable</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <style>
    #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
    #sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 48%; }
  </style>
  <script>
    $(function() {
      $("#sortable").sortable();
      $("#sortable").disableSelection();
    });
  </script>
</head>
<body>
  <ul id="sortable">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
  </ul>
</body>
</html>

🍁jQuery UI의 활용

이미지의 위치를 사이트를 닫더라도 마지막에 위치했던 자리에 위치하는 작업을 ajax로 해보도록 하자.

--chromi 좌표
create table tblChromi (
	seq NUMBER(10) primary key,            -- PK
	chromiId VARCHAR2(50) not null,        -- <img id="chromi1">
	x NUMBER(10) not null,                 -- left
	y NUMBER(10) not null                  -- top
);

insert into tblChromi values (1, 'chromi1', 0, 0);
insert into tblChromi values (2, 'chromi2', 0, 0);
insert into tblChromi values (3, 'chromi3', 0, 0);
insert into tblChromi values (4, 'chromi4', 0, 0);
insert into tblChromi values (5, 'chromi5', 0, 0);

drop table tblChromi;
select * from tblChromi;

ex07.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="http://pinnpublic.dothome.co.kr/cdn/example-min.css">
<style>
	.chromi {
		width: 300px;
		height: 250px;
	}
	
	<c:forEach items="${list}" var="dto">
	#${dto.chromiId} {
		left: ${dto.x}px;
		top: ${dto.y}px;
	}
	</c:forEach>
</style>
</head>
<body>
	<h1>chromi + Ajax</h1>

	<img src="/ajax/images/chromi.png" id="chromi1" class="chromi">
	<img src="/ajax/images/chromi.png" id="chromi2" class="chromi">
	<img src="/ajax/images/chromi.png" id="chromi3" class="chromi">
	<img src="/ajax/images/chromi.png" id="chromi4" class="chromi">
	<img src="/ajax/images/chromi.png" id="chromi5" class="chromi">

	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js" integrity="sha256-xLD7nhI62fcsEZK2/v8LsBcb4lG7dgULkuXoXB/j91c=" crossorigin="anonymous"></script>
	<script src="http://pinnpublic.dothome.co.kr/cdn/example-min.js"></script>
	<script>
		$('.chromi').draggable({
			
			stop: function(event, ui) {
				//alert(ui.position.left);
				//alert(ui.position.right);
				
				$.ajax({
					type: 'POST',
					url: '/ajax/ex07data.do',
					data: {
						x: ui.position.left,
						y: ui.position.top,
						chromiId: this.id
					},
					error: function(a,b,c) {
						console.log(a,b,c);
					}
				});
			}
		});
	</script>
</body>
</html>

Ex07.java

package com.test.ajax.controller;

import java.io.IOException;
import java.util.ArrayList;

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

import com.test.ajax.model.ChromiDTO;
import com.test.ajax.repository.AjaxDAO;

@WebServlet("/ex07.do")
public class Ex07 extends HttpServlet {

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
		AjaxDAO dao = new AjaxDAO();
		
		ArrayList<ChromiDTO> list = dao.listChromi();
		
		req.setAttribute("list", list);
		
		RequestDispatcher dispatcher = req.getRequestDispatcher("/WEB-INF/views/ex07.jsp");
		dispatcher.forward(req, resp);
	}

}

Ex07Data.java

package com.test.ajax.controller;

import java.io.IOException;

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

import com.test.ajax.model.ChromiDTO;
import com.test.ajax.repository.AjaxDAO;

@WebServlet("/ex07data.do")
public class Ex07Data extends HttpServlet {

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
		String x = req.getParameter("x");
		String y = req.getParameter("y");
		String chromiId = req.getParameter("chromiId");
		
		AjaxDAO dao = new AjaxDAO();
		
		ChromiDTO dto = new ChromiDTO();
		
		dto.setX(x);
		dto.setY(y);
		dto.setChromiId(chromiId);
		
		dao.updatePosition(dto);
	}

}

ChromiDTO.java

package com.test.ajax.model;

public class ChromiDTO {
	
	private String seq;
	private String x;
	private String y;
	private String chromiId;
	
	public String getSeq() {
		return seq;
	}
	public void setSeq(String seq) {
		this.seq = seq;
	}
	public String getX() {
		return x;
	}
	public void setX(String x) {
		this.x = x;
	}
	public String getY() {
		return y;
	}
	public void setY(String y) {
		this.y = y;
	}
	public String getChromiId() {
		return chromiId;
	}
	public void setChromiId(String chromiId) {
		this.chromiId = chromiId;
	}
	
}

AjaxDAO.java

public void updatePosition(ChromiDTO dto) {
	
	try {
		
		String sql = "update tblChromi set x = ?, y = ? where chromiId = ?";

		pstat = conn.prepareStatement(sql);
		pstat.setString(1, dto.getX());
		pstat.setString(2, dto.getY());
		pstat.setString(3, dto.getChromiId());

		pstat.executeUpdate();

	} catch (Exception e) {
		System.out.println("AjaxDAO.updatePosition");
		e.printStackTrace();
	}

}

public ArrayList<ChromiDTO> listChromi() {

	try {
		
		String sql = "select * from tblChromi";
		
		stat = conn.createStatement();
		rs = stat.executeQuery(sql);
		
		ArrayList<ChromiDTO> list = new ArrayList<ChromiDTO>();
		
		while (rs.next()) {
			
			//레코드 1줄 > ChromiDTO 1개
			ChromiDTO dto = new ChromiDTO();
			
			dto.setSeq(rs.getString("seq"));
			dto.setX(rs.getString("x"));
			dto.setY(rs.getString("y"));
			dto.setChromiId(rs.getString("chromiId"));
			
			list.add(dto);
		}
		
		rs.close();
		stat.close();
		conn.close();
		
		return list;
		
	} catch (Exception e) {
		System.out.println("AjaxDAO.listChromi()");
		e.printStackTrace();
	}
	
	return null;
}

저작자표시 비영리 변경금지 (새창열림)

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

다운로드 사이트

직접 구현 vs 참조 구현

ex07.jsp

Ex07.java

Ex07Data.java

ChromiDTO.java

AjaxDAO.java

다운로드 사이트

직접 구현 vs 참조 구현

ex07.jsp

Ex07.java

Ex07Data.java

ChromiDTO.java

AjaxDAO.java

단축키

내 블로그

블로그 게시글

모든 영역