[Ajax] 19. Ajax 제이쿼리 플러그인

1. 실습 - waittime

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="lib/waitme/waitMe.css">
<script src="js/jquery-3.6.0.min.js"></script>
<script src="lib/waitme/waitMe.js"></script>
<title>Ajax 사용 - GET방식</title>
</head>
<body>
	<div id="container" style="height:400px;">
		<button type="button" id="test">waitMe 테스트</button>
	</div>
	<script>
		var ajaxLoading = function(isLoading) {
			if(isLoading == false) {
				$("body").waitMe("hide");
			} else {
				$("body").waitMe({
					effect : "ios", // 다른 걸로 변경 가능
					text : "처리중입니다.",
					bg : "rgba(255, 255, 255, 0.7)",
					color : "#000",
					source : "/lib/waitme/img.svg"
				});
			}
		}
		
		$(document).ready(function() {
			$("#test").click(function() {
				ajaxLoading(true);
			});
		});
	</script>
</body>
</html>

2. 실습 - jpaginate (페이지 표출 라이브러리)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="lib/jpaginate/style.css">
<script src="js/jquery-3.6.0.min.js"></script>
<script src="lib/jpaginate/jQuery.paginate.js"></script>
<title>Ajax 사용 - GET방식</title>
</head>
<body>
	<div id="container">
		<h1>jPaginate 테스트</h1>
		<div>
			현재 페이지 : <span id="currentPage">1</span>
		</div>
		<div id="paging"></div>
	</div>
	<script>
		$(document).ready(function() {
			$("#paging").paginate({
				count : 100,
				start : 1, 
				display : 10,
				border : true,
				border_color : "#333333",
				text_color : "#000000",
				background_color : "gold",
				border_hover_color : "#000",
				background_hover_color : "#fff",
				images : false,
				mouse : "press", // 마우스가 눌렸을 때 onChange 발생
				onChange : function(page) {
					$("#currentPage").html(page);
				}
			});
		});
	</script>
</body>
</html>

저작자표시 비영리 변경금지

'💻 1. 웹개발_Front end > 1-7 Ajax' 카테고리의 다른 글

[Ajax] 21. Contact Application 만들기 (0)	2021.10.07
[Ajax] 20. Ajax jsRender 템플릿 분리하기 (0)	2021.10.07
[Ajax] 18. 기타 메소드 (0)	2021.10.06
[Ajax] 17. Ajax 전역 이벤트 함수 (0)	2021.10.06
[Ajax] 16. 헬퍼 함수 (0)	2021.10.06