是否有一种简单的方法可以仅在一个元素/区域上显示微调器 ($.mobile.showPageLoadingMsg()
)?
我正在通过 AJAX
加载此元素的内容,因此在完成之前我必须阻止它并显示此微调器。
最佳答案
您可以将加载微调器的 CSS 位置设置为出现在特定区域上。这是一个代码示例,它在元素上显示和隐藏加载微调器:
//this is an IIFE, it creates an enclosure around the code that separates it from global code
(function ($) {
//a flag so we know what state the loading spinner is in
var isShowing = false;
//this example is binding to all link elements
$('a').on('click', function () {
//check if the loading spinner is already showing
if (isShowing === false) {
//the loader is not showing, so create an overlay in the container element
var $con = $('#container').append('<div class="container-overlay"></div>');
//now position the loader over the container
$('.ui-loader').css({
position : 'absolute',
top : ($con.offset().top + ($con.height() / 2)),
left : ($con.offset().left + ($con.width() / 2))
});
//fade-in the overlay and show the loading spinner
$con.children('.container-overlay').fadeIn(500);
$.mobile.showPageLoadingMsg();
//set the flag so next time around we hide the spinner
isShowing = true;
} else {
//fade-out the overlay
$('#container').children('.container-overlay').fadeOut(500, function () {
//remove the overlay from the DOM
$(this).remove();
//hide the loader
$.mobile.hidePageLoadingMsg();
//reset the CSS of the loader element
$el.css({
position : 'fixed',
top : '50%',
left : '50%'
});
});
//set the flag so next time around we show the loading spinner
isShowing = false;
}
});
})(jQuery);
这是一个演示:http://jsfiddle.net/CkUZf/
对于上面的演示(链接),我将此 CSS 用于叠加元素:
#container .container-overlay {
display : none;
height : 100%;
background : #000;
background : rgba(0, 0, 0, 0.75);
}
也可以将加载器元素附加到您想要“加载”的任何容器,但是 $.mobile.showPageLoadingMsg()
会自动重置加载器元素,因此您必须禁用它jQuery Mobile 中的代码包含(这就是为什么我使用上面的较轻的 CSS 版本)。
更新
这可能更像您的想法:
$.fn.customMobileSpinner = function (options) {
var defaults = {
url : null,
fadeDuration : 500,
bgColor : 'rgba(0, 0, 0, 0.75)',
bgColorFallback : '#000'
};
//merge the defaults and options objects
options = $.extend({}, defaults, options);
//make sure the URL is specified
if (options.url !== null) {
//only work with the first element passed-in
var $element = this.eq(0);
$element.append(
$('<div class="container-overlay" />').css({
display : 'none',
height : '100%',
width : '100%',
background : options.bgColorFallback,
background : options.bgColor
})
).children('.container-overlay').fadeIn(options.fadeDuration);
//update loader CSS
$('.ui-loader').css({
position : 'absolute',
top : ($element.offset().top + ($element.height() / 2)),
left : ($element.offset().left + ($element.width() / 2))
});
//show spinner
$.mobile.showPageLoadingMsg();
//create AJAX call
$.ajax({
url : options.url,
success : function (response) {
$element.fadeOut(options.fadeDuration, function () {
$element.html(response).fadeIn(options.fadeDuration);
$.mobile.hidePageLoadingMsg();
//reset loader CSS
$(".ui-loader").css({
position : 'fixed',
top : '50%',
left : '50%'
});
});
}
});
}
};
然后你只需在 jQuery 对象上调用这个方法:
$('#some-container').customMobileSpinner({
url : 'some-url'
});
关于javascript - 仅在一个元素上显示微调器($.mobile.showPageLoadingMsg())?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12054037/