0
A
回答
1
如果我這樣做,我會用CSS創建一個輔助類來顯示和隱藏ajax加載器(作爲背景圖像或圖標)。然後,我會在我的ajax調用之前設置該類,然後在回調中將其刪除。
這裏是我正在談論的一個演示(我將使用Font Awesome用於ajax加載器)。
HTML
<button>Submit<i class="fa fa-circle-o-notch fa-spin"></i></button>
CSS
button{
position:relative;
padding:6px 32px;
border:0;
background:#42c827;
color:#fff;
}
button i{
position:absolute;
top:7px;
right:8px;
opacity:0;
}
button.busy i{
opacity:1;
}
的JavaScript
$(function(){
$('button').on('click', function(e){
e.preventDefault();
var btn = $(this);
btn.addClass('busy');
//simulate ajax call
setTimeout(function(){
btn.removeClass('busy');
}, 2000);
});
});
看到它在行動在這個Fiddle。
UPDATE
對於<select>
標籤標記是有點不同,但思路是一樣的。相反,您將加載器放在<select>
旁邊而不是內部,併爲它們提供一個外部包裝。
使用<select>
標籤查看此Fiddle的演示。
+0
不錯,我會處理您的提示 – GuillaumeL
0
在AJAX期間,您可以使用jQuery ajaxStart
和ajaxStop
處理程序進行操作。
$(document).ajaxStart(function() {
$(".preloader").show();
});
0
不在選擇標籤內,但動畫可以放在靠近它的地方。 我做這樣的動畫一樣的.. ..
,這是JS:
$(document).ready(function(){
$('#refresh').click(function(){
//show the animation here
$('#animation_place').html("<img src='loading_anim.gif'/>");
$.ajax({
//write your url and type and the othre things here..
success:function(data){
//Bind the select tag with the new data
$('#animation_place').html(""); //clear the animation..
}
});
});
});
相關問題
- 1. 動畫uicollectionview上選擇
- 2. PHP創建選擇標籤使用Ajax
- 3. 標籤動畫
- 4. 動畫圖像標籤上:目標
- 5. 如何在選擇標籤時在標籤佈局中動畫項目?
- 6. WPF:選擇動畫的目標
- 7. ::選擇動畫
- 8. 動畫選擇器查看標籤欄像鍵盤
- 9. 選擇標記的標籤
- 10. 選擇標籤/選項標籤麻煩
- 11. 將選擇標籤/選項標籤堆疊在彼此之上
- 12. 動畫標籤欄
- 13. 標籤欄動畫
- 14. CSS jQuery的活動標籤選擇
- 15. 活動中的Android選擇標籤
- 16. jQuery的AJAX .load形式放置選項中選擇標籤
- 17. UILabels Marquee +在動畫標籤上重疊
- 18. 如何在標籤上添加動畫?
- 19. 創建新標籤時更改select2自動選擇的標籤
- 20. 選擇標籤headerKey
- 21. MySQL選擇標籤
- 22. 從選擇標籤
- 23. 角選擇標籤
- 24. Rails選擇標籤
- 25. Grails。選擇標籤
- 26. CSS選擇標籤
- 27. 選擇標籤軌
- 28. ActionBarSherlock標籤選擇
- 29. Jsoup選擇標籤
- 30. 移動span標籤動畫
您的意思是'
我的意思是'
我已經更新了我的答案,使用'