以下轉錄自:http://xajax.dayanmei.com/(簡體)
================================================================
xajax loading(正在讀取資料,資料正在載入中)的例子,附本站loading寫法,更多loading動畫圖片樣式可以到http://www.ajaxload.info定做.
注:xajax 0.2.1 Release以上版本支援自定義loading
見過很多使用AJAX技術的網站在讀取資料的時候都會出現一個進度條寫著讀取中吧?感覺很COOL是吧,XAJAX照樣也能做!
本站loading的寫法
<script type="text/javascript">
<!--
xajax.loadingFunction = function(){
xajax.$('loadingMessage').style.display='block';
};
xajax.doneLoadingFunction = function(){
xajax.$('loadingMessage').style.display = 'none';
}
// -->
</script>
body內容
<div id="loadingMessage" style="width:560px;margin:0 auto;text-align:left;float:left; display: none;clear:both;">
<img src="<>/templates/<>/images/xajax-loading.gif" alt="" title="" /> loading...
</div>
其實loading很簡單,在要出現進度條的頁面上首先放上如下代碼:
<!--loding-->
<div id="loadingContainer">
<div id="loading"><img src="src/images/common/loader.gif" mce_src="src/images/common/loader.gif" />頁面載入中,請稍候</div>
</div>
<!--loding end-->
這樣就做出了來了一個顯示等待條的方塊。
接著在頁面裏面寫上如下JS代碼:
<script languege="javascript/text">
loadingpic = document.getElementById('loadingContainer');
loadingpic.style.display = 'none';// 初始化進度條為不可見
/*****這兩句話比較重要*****/
xajax.loadingFunction = loading; // 定義XAJAX在等待請求時候調用的函數
xajax.doneLoadingFunction = loadingDone; //定義XAJAX在或得請求資料以後調用的函數
function loading(){
loadingpic.style.display = 'block'; //設置請求資料的時候可見
}
function loadingDone() {
loadingpic.style.display = 'none'; //設置請求結束以後消失
}
</script>
就這麼簡單的幾句,狀態條功能就實現了。
如果你要找一些載入等待的loading的動態圖片的話
可以到這個網站上去看一下,可以自定義生成
http://www.ajaxload.info
xajax loading(正在讀取資料)
誰在線上
正在瀏覽這個版面的使用者:沒有註冊會員 和 1 位訪客