web-dev-qa-db-fra.com

Le moyen le plus simple de mettre le curseur à attendre, puis de faire revenir tous les éléments

Sur mon site Web, quelques classes CSS définissent un type de curseur fixe lorsque vous les survolez. Je souhaite définir le curseur sur l'image d'attente lorsque je passe un appel AJAX n'importe où sur la page, puis le faire revenir à la position du curseur après la fin de l'appel AJAX. 

J'ai essayé:

$(document).ajaxStart(function () {
    document.body.style.cursor = 'wait';
});

$(document).ajaxStop(function () {
    document.body.style.cursor = 'auto';
});

Cela ne fonctionne pas lorsque ma souris survole un objet DOM avec une classe CSS qui modifie le curseur et que je ne sais pas comment le faire.

Actuellement j'ai un cours:

.pills a:hover
{
    background-color: #0069D6;
    color: #FFFFFF;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
    text-decoration:none;
    cursor:pointer;
}

Si vous passez la souris sur l'objet de cette classe et qu'un appel Ajax commence, le curseur reste comme un pointeur.

javascriptjquerycss
19
Jay Sun

Vous pouvez utiliser une combinaison de basculement d’une classe sur les variables body et !important.

http://jsfiddle.net/UGwmv/2/

$("button").click(function(){
   $("body").toggleClass("wait");
   return false; 
});

body.wait, body.wait *{
    cursor: wait !important;   
}

Lorsque body a la classe wait, tout affichera le curseur d'attente.

37
James Montagne

si vous avez un emballage ou un conteneur:

<script type="text/javascript">
$(document).ajaxStart(function () {
    document.body.style.cursor = 'wait';
    $('div#wrapper').addClass('wait');
});

$(document).ajaxStop(function () {
    document.body.style.cursor = 'auto';
    $('div#wrapper').removeClass('wait');
});
</script>

<style type="text/css">
    div#wrapper.wait * {
        cursor: wait !important;
    }
</style>

En gros, tous les enfants du wrapper auront le cursor: wait avec la condition !important.

3
Robin Castlin

une autre réponse 2014:

solution si vous avez au moins une feuille de style, changez-la!

changer la feuille de style CSS:

sh = document.styleSheets[0]
Wait_a_bit="* {cursor: wait !important}"
sh.insertRule(Wait_a_bit, 0)

avant votre ajax et retirez-le ensuite:

sh.deleteRule(0)
1
halfbit

  1. Ajoutez un élément vide div#wait-overlay à votre page. Je vous suggère de l'ajouter à la fin de votre document html, juste avant l'élément <body> de clôture. 

  2. Définissez le style de cet élément comme suit (le .active est fait exprès):

    div#wait-overlay.active
{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    cursor: wait;
    z-index: 100000;
    background: black;
    opacity: 0;
}

  3. Ajoutez ensuite le javascript suivant:

    $(document).ajaxStart(function () {
    $('#wait-overlay')
        .addClass('active')
        .animate({opacity: 0.6});
});

$(document).ajaxStop(function () {
    $('#wait-overlay')
    .animate(
        {
            opacity: 0
        },
        400,
        function () { $(this).removeClass('active'); }
    );
});

Explication:

  1. Le div#wait-overlay est vide div, donc il n'est pas visible et comme il se trouve à la fin de la page, cela n'affecte rien.

  2. Cependant, si nous ajoutons la classe active à cette div, elle s’étend sur toute la page et, grâce à un z-index très élevé, couvre tout le contenu de la page. L'avantage supplémentaire est que tout ce qui se trouve sur la page devient non cliquable.

  3. Le javascript ajoute la classe .active à ajax start automatiquement et la supprime une fois ajax terminé. De plus, grâce à l'appel de animate, la page s'assombrit progressivement au début de l'ajax et, une fois l'ajax terminé, elle revient à la normale.

1
GoFree
    $(document).ajaxStart(function () {
        $('*').css('cursor', 'wait');
    });

    $(document).ajaxStop(function () {
        $('*').css('cursor', '');
    });

fait le tour.

0
Max W. Lamda

Le problème est que la classe écrasera la valeur du document pour le curseur. Pour éviter cela, vous devez vous assurer que tous les éléments survolés afficheront le symbole d'attente.

La meilleure solution consiste à ajouter une classe à l'élément body lorsque vous souhaitez insérer le symbole d'attente pour la souris. Ainsi, lorsque CSS est présent, cette classe est configurée pour que toutes les autres classes affichent le symbole d'attente.

Lorsque ajax est terminé, supprimez la classe de la balise body et la classe d'éléments d'origine avec différents styles de curseur sera annulée.

$(document).ajaxStart(function () {
    $('body').addClass('wait');
});

$(document).ajaxStop(function () {
    $('body').removeClass('wait');
});



<style type="text/css">
    body.wait .move {
        cursor: wait;
    }
</style>
0
GillesC