[jQuery] BlockUi

http://malsup.com/jquery/block/

Overview

The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without locking the browser^[1]. When activated, it will prevent user activity with the page (or part of the page) until it is deactivated. BlockUI adds elements to the DOM to give it both the appearance and behavior of blocking user interaction.

Usage is very simple; to block user activity for the page:

$.blockUI();

Blocking with a custom message:

$.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' });

Blocking with custom style:

$.blockUI({ css: { backgroundColor: '#f00', color: '#fff'} });

To unblock the page:

$.unblockUI();

If you want to use the default settings and have the UI blocked for all ajax requests, it's as easy as this:

$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);

[1] Using the XMLHttpRequest object in synchronous mode causes the entire browser to lock until the remote call completes. This is usually not a desirable behavior.

---

http://enosent.tistory.com/26

FORM submit 시 블록 UI 적용하는 법 ...

default > $.blockUI();

// 이미지 적용

$.blockUI({ message: '<img src="/images/admin/loding_on.png"/>' });

$("#FORM_REG").submit();

// 문구 적용

$.blockUI({ message: '등록중입니다.' });

$("#FORM_REG").submit();

---

http://h5bak.tistory.com/174

JQuery blockUI를 사용한 로그인 모달창(같은 화면 레이어) 예제입니다.

버튼 클릭 시 모달 레이어가 출력되면서 배경은 block 상태가 됩니다.

 

 

소스

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

<title>이준빈은 호박머리 JQuery blockUI 예제</title> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> <!--JQuery 참조--> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>    <!--JQuery-blockUI 참조--> <script src="JQuery/jquery.blockUI.js"></script>    <script type="text/javascript"> $(document).ready(function() {     $('#showLoginBtn').click(function() {         $.blockUI({ message: $('#loginForm') });     });          setTimeout($.unblockUI, 2000); // 2초 후 사라집니다. }); </script>     <button id="showLoginBtn">Run</button>    <!--로그인 버튼 시 page Block 후 출력되는 로그인 모달창--> <div id="loginForm" style="display:none">     <p>         <label>Username:</label><input type="text" name="user_id" id="user_id"><br>         <label>Password:</label><input type="text" name="user_pw" id="user_pw">     </p> </div> <!--로그인 버튼 시 page Block 후 출력되는 로그인 모달창-->

 

실행화면

1. 초기화면

 

2. run 버튼 클릭 시

---

http://resisa.tistory.com/96

일반적으로 조회 시에 작업이 길어지게 되면 처리 중이라는 메세지를 사용자에게 보여줄 필요가 있습니다. 더군다나 비동기 호출을 할 경우에 화면에 처리 중이라는 표시가 없다면 사용자는 답답함을 느낄 수 있습니다. 처음에는 그냥 단순하게 화면에 Processing이라는 메세지와 처리 중을 표시하는 애니메이션이 있는 gif파일을 이용해서 보여주었는데 이것 역시 이미 Plugin이 존재하네요.

http://malsup.com/jquery/block/

위의 사이트를 들어가시면 상당히 쉽게 사용하실 수 있는 것을 아실 수 있습니다. 아래와 같은 구문이 인상적입니다.

$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);

=> 이전에 ajaxSetup처럼 모든 ajax call에 대해서 BlockUI를 적용할 수 있는 구문입니다. 하나의 페이지에서 여러 번의ajax call을 할 경우를 생각해보면 제일 처음의 ajax콜이 있을 경우에 BlockUI가 표시되고 제일 마지막으로 종료되는 ajax콜이 이후에 BlockUI가 사라져야 합니다. 위의 구문을 사용하면 한 줄로 모든 것이 해결됩니다.
또한 이것 외에도 화면에 특정 부분을 Block시켜서 반투명하게 보여줄 수 있으며 jQuery UI Dialog처럼 사용할 수 도 있습니다. 애니메이션도 적용되어서 작업 처리시에 부드러움으로 사용 감도 좋아집니다. 다만, 커서가 Block될 경우에 모래시계로 변경된 이후에 움직이지 않은 상태로 있으면 다시 화살표 모양으로 돌아오지 않는 점이 아쉬운 점이네요.