javascript - 为按钮制作一个通用的加载图标？

Question

我正在尝试创建某种类型的“通用”加载指示器，它会出现在被单击的按钮旁边。例如;我有一个页面有两个按钮，一个用于联系表单，另一个用于订阅表单。我的第一个想法是通过 jQuery 在每个按钮旁边创建一个自定义 div。但是，我正在努力避免在我的页面上出现错误的 div。

我尝试使用的代码使加载指示器出现在按钮内部而不是外部。这是带有 JSFiddle 链接的代码:

JSFIDDLE LINK

CSS

#contact, #subscribe {
    margin:50px;
    width:100px;
    height:25px;
}
.indicator {
    position:relative;
    float:right;
    top:-23px;
    right:-25px;
    width:16px;
    height:16px;background:url(../graphics/loader.gif) no-repeat;
}

jQuery

$('#contact-submit').click(function()
{   
    $(this).addClass('indicator');
});
$('#subscribe-submit').click(function()
{   
    $(this).addClass('indicator');
});

HTML

<div id="contact">
    <button id="contact-submit">Contact</button>                                            
</div>  
<div id="subscribe">
    <button id="subscribe-submit">Subscribe</button>                                            
</div>   

Answer 1

也许你可以利用伪元素:after ？示例:

.indicator {
    position: relative;
}
.indicator:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 3px;
    margin-top: -8px;
    width: 16px;
    height: 16px;
    background:url(http://www.graphicsoptimization.com/blog/wp-includes/images/go_examples/2008_05/indicator.gif) no-repeat;
}

http://jsfiddle.net/FHmqF/3/

免责声明:此方法不适用于 <input type="button">按钮，因为这些元素不能有内部内容。