Статьи

Создание Gmail-подобного отображения статуса Ajax

Декабрь 3, 2017

Большинство из нас, гиков, знают и любят Gmail. У него очень приятный интерфейс, и он вдохновляет постоянно улучшать наши собственные веб-приложения. Сегодня я намеревался создать ненавязчивое сообщение о статусе страницы в стиле Gmail, очень похожее на то, что показано на снимке экрана:

[Img_assist | NID = тысяча четыреста восемьдесят восемь | название = | убывание = | ссылка = нет | ALIGN = не определено | ширина = 501 | Высота = 79]

Мои требования были просты:

  1. Должен выглядеть так, как в Gmail
  2. Должен быть в состоянии просто включить исходный файл JavaScript без дальнейшей настройки
  3. Должно позволять пользователю указывать пользовательское сообщение о статусе, которое будет отображаться
  4. Должен допускать использование пользовательских стилей, но ни один не требуется
  5. Интегрируется с Ajax-запросами Prototype.js

Единственным условием является Prototype.js v1.6

Давайте начнем. Если все, что вас волнует, это конечный результат. Вот как это сделать на своей странице:

<!-- Include the Prototype library -->
<script type="text/javascript" src="prototype.js" src="prototype.js">
</script>

<!-- Include the ajax status display script -->
<script type="text/javascript" src="ajaxStatusDisplay.js" src="ajaxStatusDisplay.js">
</script>

Это оно! Теперь, когда вы делаете запрос Ajax с Prototype, вы увидите всплывающее сообщение с текстом «Загрузка …». Вы можете проверить конечные результаты на http://blog.tech-cats.net/examples/ajax/ajaxStatusDisplay-Simple.html

Теперь к расширенным возможностям.

Как указано выше № 3 и № 4, два из наших требований — разрешить пользователю указывать пользовательское сообщение о статусе и пользовательские стили CSS для отображаемого сообщения. Удовлетворение первого из этих требований достигается тем, что пользователь создает элемент на странице с пользовательским сообщением, например так:

<div id="ajaxStatusDisplay_userMessage">
Loading...Wait a Minute!
</div>

Этот элемент не должен быть div. Это может быть любой текстовый контейнер, например, span или input (текстовый или скрытый). Что важно, так это идентификатор элемента, он должен быть установлен в «ajaxStatusDisplay_userMessage» для получения настраиваемого сообщения.

Следующее требование работает так же. Пользовательские стили можно указать, создав два класса CSS с определенными именами: «ajaxStatusDisplay_userStyle» и «ajaxStatusDisplay_userMessageStyle». Вот пример, который будет производить вид по умолчанию:

<style type="text/css">
.ajaxStatusDisplay_userStyle {position:absolute;left:45%;top:2px;height:10px;}
.ajaxStatusDisplay_userMessageStyle {
	background:#FFF1A8 none repeat scroll 0%;color:#000;padding: 0pt 5px;
	font-family:Arial, Helvetica, sans-serif;font-size:14px;font-weight: bold;
	text-align:center;width:100%
}
</style>

А вот еще один пример, который создаст белый текст на черном фоне в правом верхнем углу:
 

<style type="text/css">
.ajaxStatusDisplay_userStyle {position:absolute;left:94%;top:0px;height:10px;}
.ajaxStatusDisplay_userMessageStyle {
	background-color:#000;
	color:#fff;
	font-family:Arial, Helvetica, sans-serif;
	padding:2px;
	width:100%;
}
</style>

Чтобы использовать свои собственные стили CSS, вам не нужно ничего делать, кроме как определить их, как показано выше (по сравнению с первоначальной версией, где вам нужно было отредактировать файл «ajaxStatusDisplay.js» и установить переменную «useUserCssStyles» в «true»). «).

Небольшой дополнительной функцией является возможность изменения сообщения о состоянии во время выполнения. Это делается с помощью (как вы уже догадались) функции setStatusMessage следующим образом:

// Set the status message based on the value in the "userMessage" input field
ajaxStatusDisplay.setStatusMessage($F('userMessage'));

Чтобы увидеть настройку сообщения о статусе в действии наряду с использованием собственного стиля CSS, посмотрите http://blog.tech-cats.net/examples/ajax/ajaxStatusDisplay-Advanced.html.

Вы можете просмотреть все источники по адресу:

JavaScript Источник: ajaxStatusDisplay.txt
Простой пример Источник: ajaxStatusDisplay-Simple.txt
Расширенный пример Источник: ajaxStatusDisplay-Advanced.txt

Вы можете скачать исходный код JavaScript по адресу:

http://blog.tech-cats.net/examples/ajax/ajaxStatusDisplay.js

34
Share: