1

我试图用 loading.gif 替换提交按钮，但无论如何我不能把它放在同一个地方。看起来按钮已隐藏，但仍保留空间。

我的html是

<div class="botao">
  <input type="image" disabled src="images/bl_button.jpg" id="bt_pagamento" alt="EFETUAR PAGAMENTO" title="EFETUAR PAGAMENTO" /> 
</div>
<div class="loading">
  <input type="image" src="images/loading.gif" id="bt_loading" alt="CARREGANDO PAGAMENTO" title="CARREGANDO PAGAMENTO" />
</div>

我的 jQuery 代码是：

$("#bt_pagamento").click(function () {
                                      $(this).css({'display':'none'});
                                     $("#bt_loading").show();
                });

我的CSS是：

#main_content .pagamentos .botao {
width: 151px;
height: 33px;
float: left;
margin: 20px 0 20px 325px;
text-align: center;
}

#main_content .pagamentos .loading {
width: 151px;
height: 33px;
float: left;
margin: 20px 0 20px 325px;
text-align: center;
}

有人可以给我一些帮助吗？

4

1 回答 1

3

我认为最好的解决方案不是添加单独的“加载”元素，而是向按钮添加一个类，使按钮显示为加载图标。

例如：http: //jsfiddle.net/4rLgw/1/

HTML：

<div class="botao">
   <button id="bt_pagamento" class="bl_button" title="EFETUAR PAGAMENTO"></button>
</div>

CSS：

.bl_button {
    background: url('images/bl_button.jpg') no-repeat 50% 50%;
    height: 35px; /* height of your button image */
    width: 100px; /* width of your button image */
}

.button_loading {
    background: url('images/loading.gif') no-repeat 50% 50%;
    /* apply other styles to "loading" buttons */
}

jQuery：

$("#bt_pagamento").click(function () {
    $(this).addClass('button_loading');
});

这是一个工作示例：http: //jsfiddle.net/4rLgw/1/

当按钮被点击时，.button_loading类被应用到按钮上，背景图片变成了ajax加载图标。您还可以为加载按钮添加特定样式，使其看起来更加独特。

于 2013-05-21T14:25:38.873 回答