본문 바로가기
🎧️ 강의듣기

jquery-ui

조용한여우 2021. 7. 14. 18:19

jQuery

        Core

            selector

button01.jsp

<%@ 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">
		/* 사용자 정의 CSS */
			body{
				font-size: 80%; 
			}
		</style>
		
		<script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>
		<script type="text/javascript" src="./js/jquery-ui.js"></script>
		<script type="text/javascript">
		$( () => {
			$( '#btn2' ).button();
			$( 'input:submit' ).button();
			$( 'input:button' ).button();
			$( 'a' ).button();
			$( '#btn6' ).button();
		});
		</script>
	</head>
<body>
	<button id="btn1">버튼 1</button>
	<br /><br />
	<button id="btn2">버튼 2</button>
	<br /><br />
	<input type="submit" value="버튼 3" />
	<br /><br />
	<input type="submit" value="버튼 4" />
	<br /><br />
	<a href="https://www.daum.net">버튼 5</a>
	<br /><br />
	<div id="btn6">버튼 6</div>
</body>
</html>

 

button02.jsp

<%@ 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/vader/jquery-ui.css" />
		
		<style type="text/css">
		/* 사용자 정의 CSS */
			body{
				font-size: 80%; 
			}
		</style>
		
		<script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>
		<script type="text/javascript" src="./js/jquery-ui.js"></script>
		<script type="text/javascript">
		$( () => {
			$( '#btn2' ).button().on('click', () =>{
				alert('test');
			});
			
			$( 'input:button' ).button();
			$( 'a' ).button().on('click', (e) =>{
				alert( 'test' );
				e.preventDefault();
			});
			$( '#btn6' ).button();
			
			$( 'input:submit' ).button().on('click', (e) => {
				alert('test');
				e.preventDefault();
				
			});
		});
		</script>
	</head>
<body>
	<button id="btn1">버튼 1</button>
	<br /><br />
	<button id="btn2">버튼 2</button>
	<br /><br />
	<input type="submit" value="버튼 3" />
	<br /><br />
	<a href="https://www.daum.net">버튼 5</a>
	<br /><br />
	<div id="btn6">버튼 6</div>
	<br /><br />
	<form action="./test.jsp" mathod="get">
		<input type="submit" value="버튼 3" />
	</form>
</body>
</html>

 

button03.jsp

<%@ 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/vader/jquery-ui.css" />
		
		<style type="text/css">
		/* 사용자 정의 CSS */
			body{
				font-size: 80%; 
			}
		</style>
		
		<script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>
		<script type="text/javascript" src="./js/jquery-ui.js"></script>
		<script type="text/javascript">
		$( () => {
			$( '#btn1' ).button({
				icon: 'ui-icon-gear'
				// 없으면 앞에 위치
				// iconPosition: 'start'
				// iconPosition: 'top' // 위에 위치
				// showLabel: false // 라벨 없음 ( 아이콘만 보임 )
			}).on('click', () =>{
				alert('test');
			});
			
		});
		</script>
	</head>
<body>
	<button id="btn1">버튼 1</button>
	<br /><br />
</body>
</html>

 

checkbox01.jsp

<%@ 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/vader/jquery-ui.css" />
		<script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>
		<script type="text/javascript" src="./js/jquery-ui.js"></script>
		<script type="text/javascript">
		$( () => {
			$( 'input[type="checkbox"]' ).checkboxradio({
				icon: false
			});
		});
		</script>
	</head>
<body>
	<fieldset>
		<legend>Ratings</legend>
		<label for="cb1">2 Star</label>
		<input type="checkbox" name="cb1" id="cb1" />	
		<label for="cb2">3 Star</label>
		<input type="checkbox" name="cb2" id="cb2" />
		<label for="cb3">4 Star</label>
		<input type="checkbox" name="cb3" id="cb3" />
		<label for="cb4">5 Star</label>
		<input type="checkbox" name="cb4" id="cb4" />
	</fieldset>
</body>
</html>

 

progressbar01.jsp

<%@ 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" />
		<script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>
		<script type="text/javascript" src="./js/jquery-ui.js"></script>
		<script type="text/javascript">
		$( () => {
			$( '#progressbar' ).progressbar({
				value: 75
			});
			
			console.log( $( '#progressbar' ).progressbar( 'value' ) );
			$( '#progressbar' ).progressbar( 'value', 50 );
		});
		</script>
	</head>
<body>
	<div id="progressbar"></div>
</body>
</html>

 

slider01.jsp

<%@ 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" />
		<script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>
		<script type="text/javascript" src="./js/jquery-ui.js"></script>
		<script type="text/javascript">
		$( () => {
			$( '#slider' ).slider({
				// orientation: 'vertical' // 방향 세로
				orientation: 'horizontal', // 방향 가로
				value: 50,
				min: 0,
				max: 255,
				//step: 10 // 증가량
				// 마우스를 땔때마다 실행됨
				/* change: ( event, ui ) => {
					// console.log( 'change', $(this).slider('value') );
					console.log( 'change', ui.value );
				} */
				// 슬라이드 할때마다 실행됨
				slide: ( event, ui ) => {
					console.log('slider: ', ui.value )
				}
			});
		});
		</script>
	</head>
<body>
	<div id="slider"></div>
</body>
</html>

 

slider02.jsp

<%@ 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" />
		<script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>
		<script type="text/javascript" src="./js/jquery-ui.js"></script>
		<script type="text/javascript">
		$( () => {
			$( '#slider' ).slider({
				range: true,
				min: 0,
				max: 500,
				value: [75, 300],
				slide: (event, ui) => {
					console.log( ui.values[0], ui.values[1]);
					// console.log( $(this).slider('values', 0), $(this).slider('values', 1) );
				}
			});
		});
		</script>
	</head>
<body>
	<div id="slider"></div>
</body>
</html>

 

spinner01.jsp

<%@ 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" />
		<script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>
		<script type="text/javascript" src="./js/jquery-ui.js"></script>
		<script type="text/javascript">
		$( () => {
			// input type="number"와 비슷
			$( '#spinner' ).spinner({
				min: 5, // 최소값
				max: 20, // 최대값
				step: 5, // 증가값
				spin: ( event, ui ) => {
					console.log( ui.value );
				}
			});
			$( '#btn' ).button().on('click', () => {
				console.log( $( '#spinner' ).spinner( 'value' ) );
			});
		});
		</script>
	</head>
<body>
<!-- readonly="readonly" 읽기전용인데 화살표로 값 수정 가능 -->
	<input type="text" id="spinner" value="10" readonly="readonly" />
	<button id="btn" >난 버튼</button>
</body>
</html>

 

selectmenu01.jsp

<%@ 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" />
		<script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>
		<script type="text/javascript" src="./js/jquery-ui.js"></script>
		<script type="text/javascript">
		$( () => {
			$( '#files' ).selectmenu({
				width: 500,
				change: ( event, ui ) => {
					console.log( ui.item.value );
				}
			});
		});
		</script>
	</head>
<body>
	<select id="files">
		<optgroup label="script1">
			<option disabled="disabled" selected="selected">선택</option>
			<option value="jquery">jquery</option>
			<option value="jqueryui">jqueryui</option>
		</optgroup>
		<optgroup label="script2">
			<option value="jquerycore">jquerycore</optionv>
			<option value="jquerymobile">jquerymobile</optionv>
		</optgroup>
		
	</select>
</body>
</html>

 

selectmenu02.jsp

<%@ 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="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
		<style type="text/css">
			fieldset {
				border: 0;
				margin-left: 300px;
			}
			label{
				display: block;
				margin: 20px 0 0 0;
			}
			
			#circle{
				float: left;
				background: yellow;
				border-radius: 50%;
				width: 150px;
				height: 150px;
			}
		</style>
		<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>
		<script type="text/javascript">
		$( () => {
			var circle = $( '#circle' );
			
			$( '#radius' ).selectmenu({
				change: ( event, data ) => {
					circle.css({
						width: data.item.value,
						height: data.item.value
					});
				}
			});
			
			$( '#color' ).selectmenu({
				change: ( event, data ) => {
					circle.css( 'background', data.item.value );
				}
			});
		});
		</script>
	</head>
<body>
	<div class="demo">
		<form action="#">
			<div id="circle">
				<fieldset>
					<label for="radius">Circle radius</label>
					<select name="radius" id="radius">
						<option value="50">50px</option>
						<option value="100">100px</option>
						<option value="150" selected="selected">150px</option>
						<option value="200">200px</option>
						<option value="250">250px</option>
					</select>
					
					<label for="color">Circle color</label>
					<select name="color" id="color">
						<option value="black">Black</option>
						<option value="red">Red</option>
						<option value="yellow" selected="selected">Yellow</option>
						<option value="blue">Blue</option>
						<option value="Green">Green</option>
					</select>
				</fieldset>
			</div>
		</form>
	</div>
</body>
</html>

 

autocomplete01.jsp

 

저작자표시

'🎧️ 강의듣기' 카테고리의 다른 글

Java를 위한 프레임 워크 mybatis  (0) 2021.08.02
jQuery-ui accordion / datepicker / dialog  (0) 2021.07.15
jQuery 문법  (0) 2021.07.13
ajax(websocket) jQuery 사용법  (0) 2021.07.12
web/xml/json/jsonparse  (0) 2021.07.08

'🎧️ 강의듣기' Related Articles

티스토리툴바