xajax loading(正在讀取資料)

回覆文章
admin
系統管理員
文章: 36
註冊時間: 2012-02-25, 22:10
聯繫:

xajax loading(正在讀取資料)

未閱讀文章 admin »

以下轉錄自: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
回覆文章

誰在線上

正在瀏覽這個版面的使用者:沒有註冊會員 和 2 位訪客