출처 :
http://mattberseth.com/blog/2007/05/ajaxnet_example_using_an_updat.html데모보기 :
http://mattberseth2.com/progress_indicator/참고 :
ajax.net Animation Reference검색버튼을 누르면 리스트가 희미해지고 정 중앙에 로딩중을 표시하는 gif 애니메이션 이미지가 올라온다.
검색결과가 리턴되고 업데이트 판넬이 새로 랜더링되면 리스트는 원래의 투명도로 돌아오고 로딩이미지는 사라진다.
이것을 구성하기위해 updatepanel,grid-view,updatepanelAnimationExtender(upax) 를 사용한다.
1. updatepanel 의 트리거 이벤트 발생
2. upax 의 OnUpdating 처리
- <parallel> 은 각 애니메이션이 각각의 타이머를 갖고 독립적으로 수행된다는 것임(동시실행)
- duration=0 은 애니메이션 처리가 즉각 발생한다는 것임,시간을 지정하면 그 시간동안 천천히 애미메이션됨.
- 즉 , onUpdating 이란 스크립트의 호출 , btnSearch 버튼의 비활성화, updatePanel1 의 투명도를 50% 로 하는 애니메이션을 동시에 수행함.
- onUpdating 스크립트는 중앙에 로딩 이미지를 위치시키는 역할을 함.
3. btnSearch 의 클릭 이벤트 처리로 그리드뷰가 새로 바인딩
4. updatePanel1 의 refresh(update)
5. upax 의 OnUpdated 처리
- 투명도 Fade-In
- btnSearch 활성화
- onUpdated 스크립트 call - 로딩중 이미지 감추기
여기서..
function onUpdating(){
// get the update progress div
var updateProgressDiv = $get('updateProgressDiv');
// make it visible
updateProgressDiv.style.display = '';
// get the gridview element
var gridView = $get('<%= this.gvCustomers.ClientID %>');
// get the bounds of both the gridview and the progress div
var gridViewBounds = Sys.UI.DomElement.getBounds(gridView);
var updateProgressDivBounds = Sys.UI.DomElement.getBounds(updateProgressDiv);
// do the math to figure out where to position the element (the center of the gridview)
var x = gridViewBounds.x + Math.round(gridViewBounds.width / 2) - Math.round(updateProgressDivBounds.width / 2);
var y = gridViewBounds.y + Math.round(gridViewBounds.height / 2) - Math.round(updateProgressDivBounds.height / 2);
// set the progress element to this position
Sys.UI.DomElement.setLocation (updateProgressDiv, x, y);
}
AJAX.Net 도 스크립트로 직접 핸들링할 수 있는 방법을 제공하고 있음을 알 수 있다.
하지만 YUI 보다는 왠지 답답함을 느낀다.
Trackback Address :: http://steelleg.tistory.com/trackback/204
댓글을 달아 주세요