검색결과 리스트
글
JSP 로딩바, 화면 반투명 레이어
버튼을 누르면 데이터를 하나만 생성해야하는데,
로딩이 너무 길어서(로딩바가 없다면) 사용자가 기다리지 못하고 버튼을 여러번 누를 경우,
데이터가 여러개가 생성되는 현상을 발견.
간단하게 처리 하려면
변수값 = 0 이라 두고, 버튼 클릭시 변수값을 1로 변경한다음에
버튼을 다시 누르면 변수값이 0인지 체크하고 아니면 데이터를 생성 못하게 하는 방법도 있지만
웬지 욕심도 나고 해서 로딩바를 만들어보고 싶었다. ( + 화면 반투명하게 만들고 싶었다)
<script src="./spin.js"> </script>
js파일은 로딩바를 나타내기 위한 파일입니다.
위 파일은 http://spin.js.org/에서 받을 수 있고, 첨부파일로도 다운받으실 수 있습니다.
<style>
div.backLayer { display:none; background-color:black; position:absolute; left:0px; top:0px; } div#loadingDiv{ background-color:skyblue; display: none; position: absolute; width:300px; height:300px; }
</style>
바탕화면에 반투명 레이어를 나타내기 위한 것 입니다.
<body>
<div class="backLayer" style=""></div>
<span class="ssBtn" onclick="voucherIssue()"> 발행 </span>
</body>
위의 발행을 클릭하면 voucherIssue()가 실행 되겠다.
function voucherIssue(){
var spinner;
/*화면 불투명하게*/
var width = $(window).width();
var height = $(window).height();
//화면을 가리는 레이어의 사이즈 조정
$(".backLayer").width(width);
$(".backLayer").height(height);
$(".backLayer").fadeTo(500, 0.3);//화면을 가리는 레이어를 보여준다 (0.5초동안 30%의 농도의 투명도)
/*화면 불투명하게*/
/* 로딩바 */
spinner = new Spinner().spin().el;
$(document.body).append(spinner);
/* 로딩바 */
}
'개발 > 코딩' 카테고리의 다른 글
| java file resize (이미지 사이즈) 수정하기 (0) | 2020.03.24 |
|---|---|
| 자바 다른 서버로 sftp 파일 전송 (0) | 2020.03.23 |
| 마우스 우클릭, F12방지 스크립트 (0) | 2019.01.28 |
| 버튼을 select box 처럼 보이기 (0) | 2019.01.08 |
| 파일첨부 다중으로 생성하기 (0) | 2019.01.07 |
