私は JQuery + MVC ASP.not ページに取り組んでいます。
ページにローダーを追加しましたが、うまく機能しています。
私が今試しているのは、サイトがアップロードされたときにローダーが停止するようにすることだけです。
トップコールローダー関数の下にある私の現在のコードを見つけてください:-
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 コード:-
<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>