簡單。
- 創建一個隱藏的元素來展示我們的圖像
- 使用CSS來格式化佈局
- 使用JavaScript來打開效果通/斷
把HTML在你的頁面模板
//hidden div that has spinner image
<div id="LoadingDiv" style="display:none;">
<img src="ajax-loader.gif" alt="" /></div>
一些簡單的CSS to fo RMAT塊(這創造了半透明的背景下,阻止用戶交互)
/*the basics, and works for FF*/
#LoadingDiv{
margin:0px 0px 0px 0px;
position:fixed;
height: 100%;
z-index:9999;
padding-top:200px;
padding-left:50px;
width:100%;
clear:none;
background:url(/img/transbg.png);
/*background-color:#666666;
border:1px solid #000000;*/
}
/*IE will need an 'adjustment'*/
* html #LoadingDiv{
position: absolute;
height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}
然後再開啓和關閉需要
var ldiv = document.getElementById('LoadingDiv');
ldiv.style.display='block';
/*Do your ajax calls, sorting or laoding, etc.*/
ldiv.style.display = 'none';
如果您想了解更多詳情,或需要一個半透明像素使用,看我的文章全文
How to fade window and show translucent progress bar
顯示的微調是不是真的,雖然在這裏挑戰,問題是遠程函數調用只需設置delayed_job,它將由delayed_job進程執行。我需要的是某種觀察者功能,它反覆輪詢服務器以確定作業是否已完成,並且有一個,我需要隱藏與該作業相關的特定微調框。 – ktec 2010-02-02 18:18:46