1

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

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

JSFIDDLE 链接

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>
4

2 回答 2

2

也许你可以利用伪元素: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">按钮，因为这些元素不能有内部内容。

于 2013-03-24T18:40:15.187 回答
0

就像 Mike 已经指出的那样，您正在将类附加到按钮本身，尝试这样的事情并玩弄 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/

于 2013-03-24T18:40:55.667 回答