JQueryUI의 여러가지 사용법

조성현·2023년 5월 17일

jQuery Core

dom
event
ajax
animation
=> UI - dom + css
- desktop -> jQuery UI
- mobile -> jQuery Mobile
- tablet
- smartphone

jQuery UI(https://jqueryui.com)

깃허브 : https://github.com/jquery/jquery-ui
: Swing - java을 사용

기본적인 ui

<%@ 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="./css/base/jquery-ui.css"/>
<style type="text/css">
	/* 사용자 스타일 */
	body{font-size: 70%;}
</style>
<script type="text/javascript" src="./js/jquery-3.7.0.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>
<script type="text/javascript">
	// 사용자 스크립트
	$(document).ready(function() {
		console.log('Hello jQuery UI');
		
		$('#btn1').button();
		$('input[type="button"]').button();
		$('a').button();
		$('#btn2').button();
	});
</script>
</head>
<body>
<!-- 버튼 종류 -->
<input type="button" value="버튼1"/><br><br>
<input type="submit" value="버튼2"/><br><br>
<button>버튼3</button><br><br>
<!-- ui로 표현 -->
<button id="btn1">버튼4</button><br><br>
<!-- 버튼으로 만들기 -->
<a href="https://www.daum.net">다음</a><br><br>
<div id="btn2">버튼5</div><br><br>
</body>
</html>

<script type="text/javascript">
	$(document).ready(function() {
		$('#btn1').button().on('click', function() {
			alert('btn1 click');
		});
		$('#btn2').button().on('click', function() {
			alert('btn2 click');
		});
	});
</script>

<script type="text/javascript">
	$(document).ready(function() {
		$('#btn1').button({
			icon: 'ui-icon-gear',
			// 없음, top, bottom, end
			iconPosition: 'end'
		});
		
		// 메서드 체이닝
		$('#btn2').button({
			icon: 'ui-icon-flag',
			// Label : 버튼이름
			showLabel: false
		}).on('click', function() {
			alert('btn2 click');
		});
	});
</script>

progressbar

<link rel="stylesheet" href="./css/black-tie/jquery-ui.css"/>
<style type="text/css">
	body{font-size: 80%;}
</style>
<script type="text/javascript" src="./js/jquery-3.7.0.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('#progressbar').progressbar({
			// %표시
			value: 50
		});
		
		$('#btn1').button().on('click', function() {
			const value = $('#progressbar').progressbar('value');
			console.log(value);
			
			$('#progressbar').progressbar('value', value-10);
		});
		
		$('#btn2').button().on('click', function() {
			const value = $('#progressbar').progressbar('value');
			console.log(value);
			
			$('#progressbar').progressbar('value', value+10);
			
		});
	});
</script>
</head>
<body>
<div id="progressbar"></div>
<br><hr><br>
<button id="btn1">감소(-10)</button>
<button id="btn2">증가(+10)</button>
</body>

slider

<link rel="stylesheet" href="./css/black-tie/jquery-ui.css"/>
<style type="text/css">
	body{font-size: 80%;}
</style>
<script type="text/javascript" src="./js/jquery-3.7.0.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('#slider').slider({
			//orientation: 'vertical'
			value: 50,
			min: 0,
			max: 100,
			step: 10,
			slide: function(event, ui) {
				//console.log('slider : ', $(this).slider('value'));
				console.log('slider : ', ui.value);
			}
		});
		
		$('#btn').button().on('click', function() {
			console.log( $('#slider').slider('value') );
		});
	});
</script>
</head>
<body>
<div id="slider"></div>
<br><hr><br>
<button id="btn">값</button>
</body>
</html>

<script type="text/javascript">
	$(document).ready(function() {
		$('#slider').slider({
			range: true,
			min: 0,
			max: 500,
			values: [75, 325], 
			slide: function(event, ui) {
				//console.log(ui.values[0], '/', ui.values[1] );
				console.log($(this).slider('values', 0), '/', $(this).slider('values', 1), );
			}
		});
		
		$('#btn').button().on('click', function() {
			console.log( $('#slider').slider('value') );
		});
	});
</script>

checkbox / radiobox

<script type="text/javascript">
	$(document).ready(function() {
		$('input[type="checkbox"]').checkboxradio();
	});
</script>
</head>
<body>
<fieldset>
<legend>Hotel Ratings</legend>
<label for="cb1">1 star</label><input type="checkbox" id="cb1"/>
<label for="cb2">2 star</label><input type="checkbox" id="cb2"/>
<label for="cb3">2 star</label><input type="checkbox" id="cb3"/>
<label for="cb4">4 star</label><input type="checkbox" id="cb4"/>
</fieldset>
</body>

<script type="text/javascript">
	$(document).ready(function() {
		// 토글버튼
		$('input[type="radio"]').checkboxradio({
			icon: false
		//}).on('click', function() {
		}).on('change', function() {	
			console.log('radio change');
		});
	});
</script>

selectmenu

<script type="text/javascript">
	$(document).ready(function() {
		$('#files').selectmenu({
			width: 300,
			change: function() {
				console.log( $(this).val() );
			}
		});
	});
</script>
</head>
<body>
<select id="files">
	<option disabled="disabled" selected="selected">선택하세요</option>
	<optgroup label="classA">
	<option value="jquery">jQuery.js</option>
	<option value="jqueryui">jQueryui.js</option>
	</optgroup>
	<optgroup label="classB">
	<option value="Javascript">Javascript.js</option>
	<option value="Javascriptui">Javascriptui.js</option>
	</optgroup>
	<optgroup label="classC">
	<option value="Ajax">Ajax.js</option>
	<option value="Ajaxui">Ajax.js</option>
	</optgroup>
</select>
</body>

JQueryUI를 이용해 우편주소 만들기

프로토콜

방식 : xml/json

서버프로그램

방식 : model1
필요 파일

sido.jsp
gugun.jsp
dong.jsp
address.jsp

자바스크립트 코딩

시도  		-> 없음						-> sido.jsp
			<address>
 				 <sido></sido>
				  ...
			</address>
            
구군  		-> 시도 						-> gugun.jsp
			<address>
 				 <gugun></gugun>
 				 ...
			</address>
            
동  		-> 시도/구군 				-> dong.jsp
			<address>
				  <dong></dong>
 				  ...
			</address>
우편번호 	-> 시도/구군/동 				-> address.jsp
			<addresses>
 				 <address>
  					<zipcode></zipcode>
 				 	...
  					<bunji></bunji>
  				</address>
 				...
			</addresses>

ZipcodeDAO

package model1;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;

import javax.naming.Context;
import javax.naming.InitialContext;
import javax.naming.NamingException;
import javax.sql.DataSource;

public class ZipcodeDAO {
	
	private DataSource dataSource = null;
	
	public ZipcodeDAO() {
		// TODO Auto-generated constructor stub	
		try {
			Context initCtx = new InitialContext();
			Context envCtx = (Context)initCtx.lookup( "java:comp/env" );
		
			this.dataSource = (DataSource)envCtx.lookup( "jdbc/mariadb2" );
		} catch( NamingException e ) {
			System.out.println( "[에러] " + e.getMessage() );
		} 
	}
	
/////////////////////////////////////////////////////////////////////////////////////
	
	// sido 
	public ArrayList<ZipcodeTO> listSido() {
		Connection conn = null;
		PreparedStatement pstmt = null;
		ResultSet rs = null;
			
		ArrayList<ZipcodeTO> Sido = new ArrayList<>();
		
		try {
			conn = dataSource.getConnection();
			String sql = "select distinct sido from zipcode";
			
			pstmt = conn.prepareStatement(sql);
			
			rs = pstmt.executeQuery();
			while(rs.next()) {
				ZipcodeTO to = new ZipcodeTO();
				to.setSido(rs.getString("sido"));
				Sido.add(to);
			}
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} finally {
			if(rs != null) try { rs.close(); } catch(SQLException e) {} 
			if(pstmt != null) try { pstmt.close(); } catch(SQLException e) {} 
			if(conn != null) try { conn.close(); } catch(SQLException e) {} 
		}
		return Sido;
	}
	
///////////////////////////////////////////////////////////////////////////////////////////////
	
	// gugun
	public ArrayList<ZipcodeTO> listGugun(String strSido) {
		Connection conn = null;
		PreparedStatement pstmt = null;
		ResultSet rs = null;
			
		ArrayList<ZipcodeTO> Gugun = new ArrayList<>();
		
		try {
			conn = dataSource.getConnection();
			String sql = "select distinct gugun from zipcode where sido = ?";
				
			pstmt = conn.prepareStatement(sql);	
			pstmt.setString(1, strSido);
			rs = pstmt.executeQuery();
				
			while(rs.next()) {
				ZipcodeTO to = new ZipcodeTO();	
				to.setGugun(rs.getString("gugun"));
				Gugun.add(to);
			}
			
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} finally {
			if(rs != null) try { rs.close(); } catch(SQLException e) {} 
			if(pstmt != null) try { pstmt.close(); } catch(SQLException e) {} 
			if(conn != null) try { conn.close(); } catch(SQLException e) {} 
		}
		return Gugun;
	}
	
///////////////////////////////////////////////////////////////////////////////////////////////////////
	
	//dong
	public ArrayList<ZipcodeTO> listDong(String strSido, String strGugun) {
		Connection conn = null;
		PreparedStatement pstmt = null;
		ResultSet rs = null;
			
		ArrayList<ZipcodeTO> Dong = new ArrayList<>();
			
		try {
			conn = dataSource.getConnection();
			String sql = "select distinct dong from zipcode where sido = ? and gugun = ?";
				
			pstmt = conn.prepareStatement(sql);
			pstmt.setString(1, strSido);
			pstmt.setString(2, strGugun);	
			rs = pstmt.executeQuery();
				
			while(rs.next()) {
				ZipcodeTO to = new ZipcodeTO();
				to.setDong(rs.getString("dong"));	
				Dong.add(to);
			}
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} finally {
			if(rs != null) try { rs.close(); } catch(SQLException e) {} 
			if(pstmt != null) try { pstmt.close(); } catch(SQLException e) {} 
			if(conn != null) try { conn.close(); } catch(SQLException e) {} 
		}
		return Dong;
	}
/////////////////////////////////////////////////////////////////////////////////////////////////////////////

	//address
	public ArrayList<ZipcodeTO> listAddress(String strSido, String strGugun, String strDong) {
		Connection conn = null;
		PreparedStatement pstmt = null;
		ResultSet rs = null;
			
		ArrayList<ZipcodeTO> Address = new ArrayList<>();
		
		try {
			conn = dataSource.getConnection();
			String sql = "select * from zipcode where sido = ? and gugun = ? and dong = ?";
				
			pstmt = conn.prepareStatement(sql);
				
			pstmt.setString(1, strSido);
			pstmt.setString(2, strGugun);
			pstmt.setString(3, strDong);
				
			rs = pstmt.executeQuery();
				
			while(rs.next()) {
				ZipcodeTO to = new ZipcodeTO();
					
				to.setZipcode(rs.getString("zipcode"));
				to.setSido(rs.getString("sido"));
				to.setGugun(rs.getString("gugun"));
				to.setDong(rs.getString("dong"));
				to.setRi(rs.getString("ri"));
				to.setBunji(rs.getString("bunji"));
				Address.add(to);
			}
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} finally {
			if(rs != null) try { rs.close(); } catch(SQLException e) {} 
			if(pstmt != null) try { pstmt.close(); } catch(SQLException e) {} 
			if(conn != null) try { conn.close(); } catch(SQLException e) {} 
		}
		return Address;
	}
}

ZipcodeTO

public class ZipcodeTO {
	private String zipcode;
	private String sido;
	private String gugun;
	private String dong;
	private String ri;
	private String bunji;
	getter/setter ....
    }

sido.jsp

<%@ page language="java" contentType="text/xml; charset=UTF-8"
    pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@ page import="model1.ZipcodeTO" %>
<%@ page import="model1.ZipcodeDAO" %>
<%@ page import="java.util.ArrayList" %>
<%
	request.setCharacterEncoding("utf-8");

	ZipcodeDAO dao = new ZipcodeDAO();
	ArrayList<ZipcodeTO> lists = dao.listSido();

	StringBuilder sbXml = new StringBuilder();
	for(ZipcodeTO to : lists) {
		String sido = to.getSido();
	
		sbXml.append("<sido>" + sido + "</sido>");
	}
%>
<address>
<%=sbXml %>
</address>

gugun.jsp

<%@ page language="java" contentType="text/xml; charset=UTF-8"
    pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@ page import="model1.ZipcodeTO" %>
<%@ page import="model1.ZipcodeDAO" %>
<%@ page import="java.util.ArrayList" %>
<%
	request.setCharacterEncoding("utf-8");

	String strSido = request.getParameter("sido");
	
	ZipcodeDAO dao = new ZipcodeDAO();
	ArrayList<ZipcodeTO> lists = dao.listGugun(strSido);
	
	StringBuilder sbXml = new StringBuilder();
	for(ZipcodeTO to : lists) {
		String gugun = to.getGugun();
		sbXml.append("<gugun>" + gugun + "</gugun>");
	}
%>
<address>
<%=sbXml %>
</address>

dong.jsp

<%@ page language="java" contentType="text/xml; charset=UTF-8"
    pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@ page import="model1.ZipcodeTO" %>
<%@ page import="model1.ZipcodeDAO" %>
<%@ page import="java.util.ArrayList" %>
<%
	request.setCharacterEncoding("utf-8");

	String strSido = request.getParameter("sido");
	String strGugun = request.getParameter("gugun");
	
	ZipcodeDAO dao = new ZipcodeDAO();
	ArrayList<ZipcodeTO> lists = dao.listDong(strSido, strGugun);
	
	StringBuilder sbXml = new StringBuilder();
	for(ZipcodeTO to : lists) {

		String dong = to.getDong();

		sbXml.append("<dong>" + dong + "</dong>");
	}
%>
<address>
<%=sbXml %>
</address>

address.jsp

<%@ page language="java" contentType="text/xml; charset=UTF-8"
    pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@ page import="model1.ZipcodeTO" %>
<%@ page import="model1.ZipcodeDAO" %>
<%@ page import="java.util.ArrayList" %>
<%
	request.setCharacterEncoding("utf-8");

	String strSido = request.getParameter("sido");
	String strGugun = request.getParameter("gugun");
	String strDong = request.getParameter("dong");
	
	ZipcodeDAO dao = new ZipcodeDAO();
	ArrayList<ZipcodeTO> lists = dao.listAddress(strSido, strGugun, strDong);
	
	StringBuilder sbXml = new StringBuilder();
	for(ZipcodeTO to : lists) {
		String zipcode = to.getZipcode();
		String sido = to.getSido();
		String gugun = to.getGugun();
		String dong = to.getDong();
		String ri = to.getRi();
		String bunji = to.getBunji();
		
		sbXml.append("<address>");
		sbXml.append("<zipcode>" + zipcode + "</zipcode>");
		sbXml.append("<sido>" + sido + "</sido>");
		sbXml.append("<gugun>" + gugun + "</gugun>");
		sbXml.append("<dong>" + dong + "</dong>");
		sbXml.append("<ri>" + ri + "</ri>");
		sbXml.append("<bunji>" + bunji + "</bunji>");
		sbXml.append("</address>");
	}
%>
// 전체 목록이기 떄문에 addresses로 묶음
<addresses>
<%=sbXml %>
</addresses>

zipcode.jsp

<link rel="stylesheet" href="./css/overcast/jquery-ui.css"/>
<style type="text/css">
	body{font-size: 80%;}
</style>
<script type="text/javascript" src="./js/jquery-3.7.0.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>
<script type="text/javascript">
	$( document ).ready( function() {
		$('#sido').selectmenu({
			width: 150,
			change: function() {
				$.ajax({
					//url: './data/gugun.jsp?sido=' + $('#sido').val(),
					url: './data/gugun.jsp',		
					type: 'get',
					data: {
						sido: $('#sido').val()
					},
					dataType: 'xml',
					success: function(xml) {
						$('#gugun').empty();
						
						$('#gugun').html('<option disabled="disabled" selected="selected">구군 선택</option>');
						$(xml).find('gugun').each(function() {
							$('#gugun').append('<option>' + $(this).text() + '</option>');
						});
						
						$('#gugun').selectmenu('refresh');
					},
					error: function(e) {
						alert('에러 : ' + e.status);
					}
				});	
			}
		});
		$('#gugun').selectmenu({
			width: 150,
			change: function() {
				$.ajax({
					//url: './data/dong.jsp?gugun=' + $('#gugun').val() + '&sido=' + $('#sido').val(),
					url: './data/dong.jsp',		
					type: 'get',
					data: {
						sido: $('#sido').val(),
						gugun: $('#gugun').val()
					},
					dataType: 'xml',
					success: function(xml) {
						$('#dong').empty();
						
						$('#dong').html('<option disabled="disabled" selected="selected">동 선택</option>');
						$(xml).find('dong').each(function() {
							$('#dong').append('<option>' + $(this).text() + '</option>');
						});
						
						$('#dong').selectmenu('refresh');
					},
					error: function(e) {
						alert('에러 : ' + e.status);
					}
				});	
			}
		});
		$('#dong').selectmenu({
			width: 150,
			change: function() {
				$.ajax({
					url: './data/address.jsp',		
					type: 'get',
					data: {
						sido: $('#sido').val(),
						gugun: $('#gugun').val(),
						dong: $('#dong').val()
					},
					dataType: 'xml',
					success: function(xml) {
					},
					error: function(e) {
						alert('에러 : ' + e.status);
					}
				});
			}
		});
		
		$( '#btn' ).button().on('click', function() {
			$.ajax({
				url: './data/address.jsp',		
				type: 'get',
				data: {
					sido: $('#sido').val(),
					gugun: $('#gugun').val(),
					dong: $('#dong').val()
				},
				dataType: 'xml',
				success: function(xml) {
					$('table').empty();
					
					let rs = '';
					$(xml).find('address').each(function() {
						rs += '<tr>';
						rs += '<td>' + $(this).find('zipcode').text() + '</td>';
						rs += '<td>' + $(this).find('sido').text() + '</td>';
						rs += '<td>' + $(this).find('gugun').text() + '</td>';
						rs += '<td>' + $(this).find('dong').text() + '</td>';
						rs += '<td>' + $(this).find('ri').text() + '</td>';
						rs += '<td>' + $(this).find('bunji').text() + '</td>';
						rs += '</tr>';
					});
					
					$(rs).appendTo('table');
				},
				error: function(e) {
					alert('에러 : ' + e.status);
				}
			});
		});
		
		// 프로그램 시작과 동시에
		$.ajax({
			url: './data/sido.jsp',
			type: 'get',
			dataType: 'xml',
			success: function(xml) {
				$('#sido').html('<option disabled="disabled" selected="selected">시도 선택</option>');
				$(xml).find('sido').each(function() {
					$('#sido').append('<option>' + $(this).text() + '</option>');
				});
			},
			error: function(e) {
				alert('에러 : ' + e.status);
			}
		});
	});
</script>
</head>
<body>
<fieldset>
	<legend>우편번호</legend> 
	<label for="sido">시도</label> 
	<select id="sido">
		<option disabled="disabled" selected="selected">시도 선택</option>
	</select> 
	
	<label for="gugun">구군</label> 
	<select id="gugun">
		<option disabled="disabled" selected="selected">구군 선택</option>
	</select> 
	
	<label for="dong">동</label> 
	<select id="dong">
		<option disabled="disabled" selected="selected">동 선택</option>
	</select>
	 
	<button id="btn">검색</button>
</fieldset>
<br><hr><br>
<div id="result">
	<table border="1" width="800">
		<tr>
			<td>우편번호</td>
			<td>시도</td>
			<td>구군</td>
			<td>동</td>
			<td>리</td>
			<td>번지</td>
		</tr>
	</table>
</div>
</body>
</html>

조성현

이전 포스트

0515

다음 포스트

JQueryUI의 여러가지 사용법

jQuery Core

jQuery UI(https://jqueryui.com)

기본적인 ui

progressbar

slider

checkbox / radiobox

selectmenu

JQueryUI를 이용해 우편주소 만들기

프로토콜

서버프로그램

자바스크립트 코딩

ZipcodeDAO

ZipcodeTO

sido.jsp

gugun.jsp

dong.jsp

address.jsp

zipcode.jsp

0515

Spring Framework

0개의 댓글