Yii 增加 AJAX 加載指示?

使用Yii 你可以非常容易的創建ajax請求和使用ajax更新內容. 但是很多時候你始終希望去顯示ajax裝載的進度指示給你的用戶。
下面是yii裡一個簡單的解決方案, 通常我們會在所有頁面無素內淡出一個80%不透明的DIV層, 同時在後台顯示一個正在裝載指示器.
這個解決方案的優點是,你不需要增加額外的html標籤到你的頁面,在執行這個ajax請求時, 增加.loading CSS樣式類到你的頁面,通常為一個div元素,並且它將在請求完成時移除。

echo CHtml::form();
echo CHtml::ajaxButton (
'DoAjaxRequest', //label
'', // url for request
array (
'beforeSend' => 'function(){
$("#myDiv").addClass("loading");}',
'complete' => 'function(){
$("#myDiv").removeClass("loading");}',
)
);
echo CHtml::endForm();

CSS

div.loading {
background-color: #eee;
background-image: url('loading.gif');
background-position: center center;
background-repeat: no-repeat;
opacity: 1;
}
div.loading * {
opacity: .8;
}

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>