如何在MVC页面上结束/停止JQueryLoader,当网站上传时
How to end/stop JQuery Loader on MVC page, when site is uploaded
我正在开发JQuery+MVC ASP.not页面。
我在我的页面上添加了一个Loader,它运行良好。
我现在所尝试的是,加载程序现在应该在网站上传时停止。
请在顶部调用加载器功能下方找到我的当前代码:-
JS (JQuery) Code:-
<script src="../js/jquery-1.8.2.min.js"></script>
<script>
$(function () {
$(window).load(function () {
$.loader({
className: "blue-with-image",
content: 'Please wait... We are requesting the information!'
});
});
});
</script>
<script>
/*
* jQuery Loader Plugin
* @version: 2.0.0
* @requires jQuery v1.2.2 or later
* @author : ${author}
* @see : ${demoURL}
* Small loader
* usage : $.loader();
* $.loader(options) -> options =
* {
*
* }
*
* To close loader : $.loader("close");
*
*/
var jQueryLoaderOptions = null;
(function($) {
$.loader = function (option) {
switch(option)
{
case 'close':
if(jQueryLoaderOptions){
if($("#"+jQueryLoaderOptions.id)){
$("#"+jQueryLoaderOptions.id +", #"+jQueryLoaderOptions.background.id).remove();
}
}
return;
case 'setContent':
if(jQueryLoaderOptions){
if($("#"+jQueryLoaderOptions.id)){
if(arguments.length == 2)
{
$("#"+jQueryLoaderOptions.id).html(arguments[1]);
}else{
if(console){
console.error("setContent method must have 2 arguments $.loader('setContent', 'new content');");
}else{
alert("setContent method must have 2 arguments $.loader('setContent', 'new content');");
}
}
}
}
return;
default:
var options = $.extend({
content: "Please wait... We are requesting information from MedCenter!",
className:'loader',
id:'jquery-loader',
height:60,
width:200,
zIndex:30000,
background:{
opacity:0.4,
id:'jquery-loader-background'
}
}, option);
}
jQueryLoaderOptions = options;
var maskHeight = $(document).height();
var maskWidth = $(window).width();
var bgDiv = $('<div id="'+options.background.id+'"/>');
bgDiv.css({
zIndex:options.zIndex,
position:'absolute',
top:'0px',
left:'0px',
width:maskWidth,
height:maskHeight,
opacity:options.background.opacity
});
bgDiv.appendTo("body");
if(jQuery.bgiframe){
bgDiv.bgiframe();
}
var div = $('<div id="'+options.id+'" class="'+options.className+'"></div>');
div.css({
zIndex:options.zIndex+1,
width:options.width,
height:options.height
});
div.appendTo('body');
div.center();
div.html(options.content);
//$(options.content).appendTo(div);
};
$.fn.center = function () {
this.css("position","absolute");
this.css("top", ( $(window).height() - this.outerHeight() ) / 2+$(window).scrollTop() + "px");
this.css("left", ( $(window).width() - this.outerWidth() ) / 2+$(window).scrollLeft() + "px");
return this;
};
})(jQuery);
==============================================
CSS
#jquery-loader{
text-align: center;
}
#jquery-loader-background{ background-color: #fefefe;}
#jquery-loader.blue-with-image{
text-align: center;
background-image: url(Images/icons/loadingBig.gif);
background-position: center center;
background-repeat: no-repeat;
padding: 35px 0 155px 0;
font-weight: bold;
width: 500px !important;
}
#jquery-loader.blue-with-image-nodisplay {
display: none;
}
========================================
JQuery+MVC代码,在这里我"试图"在从服务器获取信息后结束Loader:-
<script>
$(function () {
//Set the hubs URL for the connection
$.connection.hub.url = "@Model.ProvisioningHubUrl/signalr";
// Reference the auto-generated proxy for the hub.
var chat = $.connection.provisioningHub;
// Create a function that the hub can call back to display messages.
chat.client.setCaSalNumbers = function (cameras) {
// Add the message to the page.
$('#list').append('<li><strong>Pickhead Camera:</strong> ' + htmlEncode(cameras.pickheadCaSalNumbers) + '</li>');
$('#list').append('<li><strong>Processing Station Top Camera:</strong> ' + htmlEncode(cameras.processingStationTopCaSalNumbersr) + '</li>');
$('#list').append('<li><strong>Processing Station Side Camera:</strong> ' + htmlEncode(cameras.processingStationSideCaSalNumbersr) + '</li>');
$('#list').append('<li><strong>Card Scan Camera:</strong> ' + htmlEncode(cameras.cardScanCaSalNumbers) + '</li>');
$('#pickheadImage').attr("src", "data:image/jpg;base64," + cameras.pickheadCameraBase64Image);
$('#processingStationSideImage').attr("src", "data:image/jpg;base64," + cameras.processingStationSideCameraBase64Image);
$('#processingStationTopImage').attr("src", "data:image/jpg;base64," + cameras.processingStationTopCameraBase64Image);
$('#cardScanImage').attr("src", "data:image/jpg;base64," + cameras.cardScanCameraBase64Image);
$('#getCameraSerialNumbers').attr("disabled", false);
$.loader({
className: "nodisplay",
content: ''
});
};
});
</script>
非常感谢!你的解决方案对我有效。我刚刚替换了我以前的代码:-
$.loader({
className: "nodisplay",
content: ''
});
带"$.loader('close');"
它正在发挥作用。:-)
谢谢
相关文章:
- 如何识别我的网站中的慢速设备
- 用Javascript更改我网站上的字体大小
- 有任何可能将facebook实时信使整合到一个网站中
- 将电视直播频道从网站嵌入我的网站
- Windows 8固定的网站互动程序
- 门户网站:当地时间有多有用
- 正在删除node.js中已验证的网站
- 为什么在这个网站上不能通过JS访问元素
- 需要使用谷歌应用程序脚本列出谷歌域下的所有网站
- 为什么只有工厂在棱角分明的网站上被提及
- 从应用程序脚本检查谷歌网站访问权限
- 使用谷歌网站翻译器自动翻译网页
- 使用node.js制作网站
- 谷歌如何确定网站加载时间
- 带有url的单页网站导航
- Ajaxify Wordpress网站与社交插件
- 为什么可以't Protractor在自动初始化的Angular网站上查找Angular
- 在我的网站上显示最近提交的文章/图片
- 如何检测负责网站某些部分的JavaScript根文件
- 如何在MVC页面上结束/停止JQueryLoader,当网站上传时