Question

我试图用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;
}

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

Answer 1

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

例如：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加载图标。您还可以在加载按钮中添加特定样式，使其看起来更加独特。

用加载的gif替换按钮

1 个答案: