jquery - 将服务 Xportability/css-to-pdf 链接到 JavaScript spinner

Question

我注意到，当我单击 PDF 按钮时，下载 PDF 需要一些时间。我可以为其创建事件监听器吗？这样我就可以开始和结束旋转器。这在 iPad 上确实是一个问题，需要更长的时间...但至少还有 30-50 秒的时间才能 waiting for xep.cloudformatter...出现。

或者我还能做些什么。

Answer 1

更新:我已将事件“xepOnlineStatus”添加到核心代码中。它将参数设置为状态，并在格式化开始和结束时触发。这些状态是“开始”和“完成”。您现在可以实现如下所示的简单 JS，它将使用相同的微调器处理这些事件。站内主要JS已更新，Github代码即将更新。

您可以在此处查看它的实际效果:http://www.cloudformatter.com/CSS2Pdf ，只需将其格式化为 PDF 即可启用微调器。

document.observe('dom:loaded', function() { 

jQuery(document).on("xepOnlineStatus", function(event, state){
if (state == "Started"){
    var screenTop = jQuery(document).scrollTop();
    var screenHeight = jQuery(window).height();
    jQuery('#spinner-overlay').css('top', screenTop);
    jQuery('#spinner-overlay').css('height', screenHeight);
    jQuery('#spinner-overlay').toggle('show');
}
else if (state == "Finished"){
    jQuery('#spinner-overlay').toggle('hide');
}
});

})

结束更新:为了完整性，原始答案位于左下方

本着目前“其他东西”的精神，以下是破解当前 JS 并添加一些 CSS 和 DOM 元素以提供微调器的说明:

1) 破解主程序 (xepOnline.jpPlugin.js):

我像这样更改了 Format 函数(在第 735 行或附近)

 Format: function(ElementID, options) {
         var screenTop = jQuery(document).scrollTop();
         var screenHeight = jQuery(window).height();
         jQuery('#spinner-overlay').css('top', screenTop);
         jQuery('#spinner-overlay').css('height', screenHeight);
         jQuery('#spinner-overlay').toggle('show');
                var items;
                if(jQuery.isArray(ElementID)) {
                            items = ElementID;
                } else {
                            items = [ ElementID ];
                }
                return xepOnline.Formatter.__format(items, options);
    },

这里唯一的变化是获取几个变量来放置微调器覆盖层并适本地设置微调器 div。然后将其切换为“打开”，此函数将启动整个格式化过程。

然后我更改了 __postBackSuccess 和 __postBackFailure 函数来隐藏微调器(在第 787 和 872 行或附近)，因为这些函数将结束整个过程。我在这些函数中添加了以下内容作为第一行:

jQuery('#spinner-overlay').toggle('hide');

然后我更改了 POST 提交以覆盖“下载”方法。上面的代码会在“newwin”和“embed”后关闭旋转器，但不会在下载后关闭。

在表单发布后的第 698 行或附近，添加:

jQuery('#spinner-overlay').toggle('hide');

2)CSS

我为我的页面添加了以下 CSS:

#spinner-overlay {
background-color: #aaa;
opacity: 0.4;
position: absolute;
left: 0px;
top: 0px;
z-index: 100;
height: 100%;
width: 100%;
overflow: hidden;
background-image: url('/Resources/Images/ajaxSpinner.gif');
background-position: center;
background-repeat: no-repeat;
}

注意:您可以将自己的自定义微调器指定为背景图像，我的是“gif”。

3)页面更改

我在后面添加了一个

，如下所示:

<div id="spinner-overlay" style="display:none;"></div>

那么会发生什么......当格式化开始时，它会获取当前页面的布局并扩展微调器 div 以覆盖该区域，从而显示微调器本身覆盖在屏幕上并具有一定的不透明度。当格式完成或中止时，它会隐藏该微调器 div(或者对于下载，当数据发布到服务器进行格式化时，它将隐藏微调器)。

我觉得很好看。

关于jquery - 将服务 Xportability/css-to-pdf 链接到 JavaScript spinner，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38107346/