JQEURY 플러그인] 로딩바. 블럭킹

로딩 블럭킹!!! 처리... 등.. 플러그인

GPL, MIT

 

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

 

-- 사용 예~  

 

# 표시될 메세지.

var MSG = {

Loading: {  message: "<h4><img src='/images/tree/skin/loading.gif' /> Processing...</h4>",
                overlayCSS: { backgroundColor: '#b2d0af',  opacity: .3 },
                css: {  border: '2px solid #D0D7E5',
                        padding: '3px',
                        backgroundColor: '#777',
                        '-webkit-border-radius': '10px',
                        '-moz-border-radius': '10px',
                        opacity: .7,
                        color: '#fff'
                }
    },

   ...

}

 

# 로딩되는 상위 페이지 ( Parent Page )

<script type="text/javascript" src="/Scripts/jquery.blockUI.js" ></script>

 

function Load_Tab() {

            var url = "SubPage.aspx";
            var pmrs = "";

 

            var html = "<iframe id='frameGridContents' src='" + url + pmrs + "' style='width:100%;

                        height:302px; padding:0px;margin:0px;' scrolling='no' frameborder='0'></iframe>";
            $("#tab_Contents").html(html);
            BlockUI(); 
}
        function BlockUI() {
            $("#tab_Contents").block(MSG.Loading);
        }
        function UnBlockUI() {
            $("#tab_Contents").unblock();
        }

 

# 로딩되는 페이지 ( Sub Page ) .cs

        protected override void OnPreRenderComplete(EventArgs e)
        {
            base.OnPreRenderComplete(e);
            Page.ClientScript.RegisterClientScriptBlock(

this.GetType(),

"unblock",

"try{ var t = setTimeout(function () { parent.UnblockUI(); clearTimeout(t); }, 50); }catch(exception){}",

 true);
        }