Loading Bar 설정

로딩바 설정하기

1. Loading 할때 나타낼 이미지를 웹에서 다운받는다.

(http://www.mytreedb.com/view_blog/a-33-high_quality_ajax_loader_images.html)

2. 아래 구문을 사용하고 싶은 페이지에 추가한다.

<div class="modal" style="display: none">    

    <div class="center">

        <!--/*다운 받은 이미지를 해당 경로에 복사한다.*/ //-->        

        <img alt="" src="~/Images/ajax_loader_blue_350.gif" />    

    </div>

</div>

3. 위의 Div 테그를 유심히보면 Class = "modal" 이다 . 따라서 modal css 를 추가한다.

<style type="text/css">    

body {            font-family: Arial;        

                font-size: 10pt;    }    

.modal {        position: fixed;        

                z-index: 999;        

                height: 100%;        

                width: 100%;        

                top: 0;        

                left: 0;        

                background-color: Black;        

                filter: alpha(opacity=60);        

                opacity: 0.6;        

                -moz-opacity: 0.8;    }    

.center {       z-index: 1000;        

                margin: 300px auto;        

                padding: 10px;        

                width: 130px;     

                background-color: none ;        

                border-radius: 10px;        

                filter: alpha(opacity=100);        

                opacity: 1;        

                -moz-opacity: 1;    }    

.center img {   height: 128px;        

                width: 128px;    }

</style>

4. 조회 선택시 적용되도록 Script를 추가한다.

아래는 간단히 조회하는 함수다. 

$.ajaxSetup 부분을 추가하면 된다.

function Search() {

                    var params = { pVal: $("#ddlVAL").val() };

 

                    $.ajaxSetup({

                                 beforeSend: function () { $(".modal").show(); }

                                ,complete:  function () { $(".modal").hide(); }

                    });

 

                    $.ajax({ 

                                 type: "POST",

                                  contentType: "application/json; charset=utf-8",

                                url: "@Url.Content("~/GetTEST")",

                                data: JSON.stringify(params),

                                dataType: "json",

 

                                success: function (data, textStatus) {

                                alert('True')

                                });                            

                    });

}

4줄 요약.

1. 이미지 다운받음.

2. DIV Code 복사 및 이미지 경로 설정.

3. CSS Code 복사.

4. $.ajaxSetup 부분을 조회하는 함수에 복사.

간단히 적용할수 있는 부분입니다. 

감사합니다.