用加載gif替換按鈕

我試圖用loading.gif替換提交按鈕，但我無法將它放在同一個地方。它看起來像按鈕被隱藏，但空間仍然保留。用加載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; 
}

可能有人給我一些關於它的幫助嗎？

來源

2013-05-21 Marcelo Srougi

而HTML是？ – j08691

你有沒有試過類似的東西？ http://jsfiddle.net/RtMKz/ –

–

我認爲最好的解決方案不是添加一個單獨的「加載」元素，只需將一個類添加到您的按鈕，使按鈕顯示爲加載圖標。

例如：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-21 14:25:38 Axel

所以很明顯，但我在這裏坐着49線的HTML CSS和我一起玩的js。獲得我的投票。 – enhzflep

問題是我的bl_button.jpg（有「禁用src」狀態）被替換爲enviar_pagamento.jpg，如下所示： ''$（「＃bt_pagamento」）。attr（'src' ，'images/efetuar_pagamento.jpg'）; $（「＃bt_pagamento」）。removeAttr（'disabled'）; $（「＃bt_pagamento」）。hover（function（）{'' 所以我會如何繼續？謝謝。 –

同樣的原則適用。您仍然可以使用jQuery添加'disabled'屬性，甚至添加另一個類來禁用樣式按鈕。：http://jsfiddle.net/4rLgw/2/ – Axel

用加載gif替換按鈕

回答

相關問題