如何在母版页中使用jQuery BlockUI加载请等待消息..

时间:2010-12-06 14:57:22

标签: javascript jquery-ui jquery

我需要为我的应用程序实现jquery blockUI ..我有这个代码..

 $.blockUI({ css: { 
            border: 'none', 
            padding: '15px', 
            backgroundColor: '#000', 
            '-webkit-border-radius': '10px', 
            '-moz-border-radius': '10px', 
            opacity: .5, 
            color: '#fff' 
        } }); 

        setTimeout($.unblockUI, 2000); 
    }); 

我在我的视图中的每个点击功能中保留此代码..然后它工作正常。但是我需要将这段代码集中在一起,将这段代码保存在主文件中,如果超过2000毫秒,我可以显示jQuery BlockUI吗?对于我的整个申请。如果是这样请任何人可以帮助我如何将这些代码保存在母版页中我需要在母版页中实现哪种代码来访问这个jQuery blockUI?

2 个答案:

答案 0 :(得分:2)

我这样做:

在母版页中,我添加了脚本引用和对自定义脚本的引用,其中我有以下代码

//Set Defaults values for blockUI
$.blockUI.defaults.theme = true;
$.blockUI.defaults.title = 'Please wait...';
$.blockUI.defaults.message = '<img src="_assets/images/blockUI_Loader.gif" />';
$.blockUI.defaults.css = {};
$.blockUI.defaults.themedCSS = {};
$.blockUI.defaults.themedCSS.width = 100;
$.blockUI.defaults.themedCSS.height = 64;
$.blockUI.defaults.overlayCSS = {};
$.blockUI.defaults.overlayCSS.backgroundColor = '#ffffff';
$.blockUI.defaults.overlayCSS.opacity = 0.6; 

然后,当我必须在ajax调用中使用它时,我只需使用

$("#element").block();
$.ajax({
    type: "get",
    dataType: "html",
    url: "some/url",
    data: {},
    success: function (response, status, xml) {
        $("#element").unblock();
    },
    error: function (response) {
        $("#element").unblock();
    }
});

答案 1 :(得分:1)

为了让它可以在任何地方访问而无需反复编写,您可以将代码放在函数中()

例如,将其放在您的全局javascript文件中:

function blockUI(){
// $.blockUI({ css: {...
}

然后在您需要的任何地方,调用blockUI();