javascript - 选择标签上的 Ajax 动画

Question

<分区>

Answer 1

如果我要这样做，我会使用 CSS 创建一个辅助类来显示和隐藏 ajax 加载程序(作为背景图像或作为图标)。然后我会在我的 ajax 调用之前设置该类，然后在回调中将其删除。

这是我正在谈论的演示(我将使用 Font Awesome 作为 ajax 加载器)。

HTML

<button>Submit<i class="fa fa-circle-o-notch fa-spin"></i></button>

CSS

button{
    position:relative;
    padding:6px 32px;
    border:0;
    background:#42c827;
    color:#fff;
}

button i{
    position:absolute;
    top:7px;
    right:8px;
    opacity:0;
}

button.busy i{
    opacity:1;
}

JavaScript

$(function(){

    $('button').on('click', function(e){
       e.preventDefault();
        var btn = $(this);
        btn.addClass('busy');

        //simulate ajax call
        setTimeout(function(){
            btn.removeClass('busy');
        }, 2000);

    });

});

在本 Fiddle 中查看实际效果.

更新

对于 <select> tag 标记有点不同，但想法是一样的。相反，您将装载机放在 <select> 旁边而不是在里面，给他们一个外包装。

查看此 Fiddle使用 <select> 的演示标签。