Как добавить ajax preloader
Рубрика: Перевод Cookbook
9 Сен. 2009
С Yii вы можете очень просто создавать ajax запросы. В большинстве случаев во время выполнения запроса, для наглядности, стоит показать картинку о том что он еще обрабатывается.
В этом уроке мы разберем простой пример вывода preloader картинки с помощью Yii + jQuery. Для всех данных внутри элемента который мы пытаемся обновить - мы установим прозрачность в 80% и отобразим картинку загрузки.
Достоинством этого решения является то, что вы не должны будите добавлять дополнительную разметку на ваши страницы.
При выполнении ajax запроса, добавляется .loading class для div элемента над которым мы работаем. После завершения запроса - класс автоматически будет снят с элемента. Это означает что вам не надо будет вручную удалять preloader и тп.
array(
'ajax' => array(
'beforeSend' => 'function(){
$("#myDiv").addClass("loading");
}',
'complete' => 'function(){
$("#myDiv").removeClass("loading");
}',
)
)
Это добавляем в ваш общий 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;
}
- Оригинал "How to add ajax-loading indicators" [англ.]
Если хотите опубликовать этот материал у себя - пожалуйста, разместите ссылку на страницу откуда вы его взяли.
- Была у меня мысль когда то запустить свой блог на одном интересном бесплатном хостинге. Посмотрев на конфигурацию сервера и ... "Настройка Yii на хостинге без поддержки PDO"
- С целью легкого интегрирование фреймворка со сторонними библиотеками, разработчики Yii не используют в коде глобальных функций. В Yii все ... "Используем функции быстрого доступа (глобальные функции в Yii)"
- Поздравляю всех с выходом Yii Framework 1.1 beta
next
Список изменений
Загрузить версию ... "Yii PHP framework 1.1 beta"

[guest] mihdan
Было сказано: Среда, 09 Сентябрь 2009
Спасибо. Сам разбирался с данным вопросом, но до конца так и не добрел

[guest] Гость
Было сказано: Пятница, 25 Июнь 2010
сделал так - и никак рводе все но написаному:
$form_part = CHtml::dropDownList('city_id','0', $main_select,
array(
'ajax' => array(
'type'=>'POST',
'url'=>CController::createUrl('good/select1'),
'replace'=>'#s1',
'beforeSend' => 'function(){
$("#load_icon").addClass("loading");
}',
'complete' => 'function(){
$("#load_icon").removeClass("loading");
}',
)));

[guest] Гость
Было сказано: Пятница, 15 Июль 2011
CHtml::ajaxLink('Click me',
'', // Url
array('update'=>'.data',
'beforeSend' => 'function(){ $("#preload").addClass("loadFile");}',
'complete' => 'function() { $("#preload").hide(); }'));
<div id="preload"></div>


