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">按钮，因为这些元素不能包含内部内容。

Answer 2

就像迈克已经指出你将这个类附加到按钮本身一样，尝试类似这样的东西并使用css，或者告诉我你想要指示你的确切位置。

$('#contact-submit').click(function()
{   
    $('<div class="indicator"></div>').appendTo($(this).parent());
});
$('#subscribe-submit').click(function() 
{   
    $('<div class="indicator"></div>').appendTo($(this).parent());
});

http://jsfiddle.net/Ls3LW/

为按钮制作通用加载图标？

2 个答案: