使“忙碌等待"动画在jquery中“位置可配置"的最佳方法? (即向其显示操作的位置) [英] Best way to have 'busy waiting' animation be 'position configurable' in jquery? (i.e., show it where the action is)

问题描述

我打算按照这篇文章中显示的那样等待一个忙碌的微调器:

-如何在jQuery中显示加载微调框?-因为它是最干净，最容易实现的:

 $('#loadingDiv')
        .hide()  // hide it initially
        .ajaxStart(function() {
            $(this).show();
        })
        .ajaxStop(function() {
            $(this).hide();
        })
    ;

并将其与 http://www.ajaxload.info/ 中的动画相结合

页面上有多个视图"，即页面的不同部分可以通过相应的ajax调用进行更新/修改.

我想将此#loadingDiv定位"在可以说是动作"的位置附近.我应该怎么做呢?

想到的几件事:

1. 在整个位置上有多个div，并将它们隐藏起来，并按照相应的操作按元素显示它们-看起来天真又浪费
2. 有一个空的<span></span>来保持" #loadingDiv-在该范围内发生某事时显示它.我不知道该怎么做...
3. 还有别的吗?

从根本上说，如何最好地处理位置繁忙的等待/发信号，而不是拥有单个全局等待/发信号?还是最好使用单一全局选项，例如，要使固定"的div隐藏在每项活动的页面顶部/中央?

只想知道你们大多数人曾经/首选使用哪个选项来解决类似问题，以及您如何建议我去解决这个问题...

解决方案

要考虑一些事项:

如果在请求加载期间用户与页面的其他部分进行交互，用户会引起问题吗?

在这种情况下，请使用透明叠加之类的灯箱来阻止整个UI.

这些动作是否很小，与应用程序的其余部分无关?

使用定位的本地微调器.如果是按钮，则从例如更改按钮的内容.使用微调框，将保存行"更改为保存...".

如果请求很重要，但是您想让用户四处打扰，并且GUI很复杂

您只能覆盖部分屏幕. http://sfiddle.net/Lv9y5/39/

本地更新，非阻塞方式

使用 jQuery.position 从头开始创建Spinner对象.它应该有一个.show(node)和.hide()方法，也许还有一个.setMessage(txt);. 传递给show方法的DOM引用是用户单击的元素.通过参考，您可以使用jQuery .position()来确定加载div的绝对位置.加载div应该放在BODY元素之后.

I intend to have a busy waiting spinner as per shown in this post: How to show loading spinner in jQuery? - since it's the cleanest and easiest to implement:

 $('#loadingDiv')
        .hide()  // hide it initially
        .ajaxStart(function() {
            $(this).show();
        })
        .ajaxStop(function() {
            $(this).hide();
        })
    ;

and couple it up with the animations from http://www.ajaxload.info/

I have multiple "views" in my page i.e., different parts of my page can be updated/modified with the corresponding ajax calls.

I'd like to "position" this #loadingDiv close to where the 'action is' so to speak. How should I go about doing it?

Few things that come to mind:

1. Have multiple divs all over the place and have them hidden and show them per element as per the corresponding action - seems naive and wasteful
2. Have an empty <span></span> to 'hold' the #loadingDiv - show it when something happens in that span. I don't know how to do this though...
3. Something else??

Basically how best to approach positional busy waiting/signalling rather than have a single global one? Or is the single-global option preferred i.e., To have a "fixed" div, hidden show up on the top/center of the page for every activity?

Just want to know which option most of you have used/preferred to tackle something like that and how do you suggest I go about it...

解决方案

There are some things to consider:

Can the user cause problems if he interacts with other parts of the page while the request is loading?

In this case block the whole UI with a lightbox like transparent overlay.

Are the actions tiny and small, irrelevant to the rest of the application?

Use the local, positioned spinner. If it's a button, change the button's contents from eg. "Save row" to "Saving..." with a spinner.

If the request is significant but you want to let the user to mess around, and the GUI is complex

You can overlay only parts of the screen. http://sfiddle.net/Lv9y5/39/

Local updates, the non blocking way

Use jQuery.position to create a Spinner object from scratch. It should have a .show(node) and .hide() method, and maybe a .setMessage(txt); The DOM reference passed to the show method is the element the user clicked on. With the reference, you can use jQuery .position() to determine where to absolute position the loading div. The loading div should be placed after the BODY element.

这篇关于使“忙碌等待"动画在jquery中“位置可配置"的最佳方法? (即向其显示操作的位置)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！