682
 

Диалог alert на YUI

Стандартный диалог alert не больно уж симпатично выглядит, да и изменить его вид не представляет возможности. Так что если вы захотите заменить его на что-нибудь более приглядное, то при помощи YUI и диалога SimpleDialog это сделать очень просто. Вот как это будет выглядеть:

Стилизованый alert

Идею я позаимствовал у Asvin Baloo и несколько переделал реализацию. Суть метода заключается в том, что стандартная функция alert переопределяется с использованием диалога SimpleDialog из состава YUI:

window.alert = function(text) {
	var dialog = new YAHOO.widget.SimpleDialog("simpledialog1",
			{ 	width: "300px",
				fixedcenter: true,
				visible: false,
				draggable: false,
				zIndex: 9999,
				icon: YAHOO.widget.SimpleDialog.ICON_INFO,
				close: true,
				modal: true,
				constraintoviewport: true,
				buttons: [{ text:"Закрыть", handler: function(){this.hide()}, isDefault:true }]
			});
	dialog.setBody(text);
	dialog.setHeader('Информация');
	dialog.render(document.body);
	dialog.show();
}

В результате такого переопределения, при вызове функции alert будет вызываться диалоговое окно, показанное выше, с заголовком, иконкой и кнопкой “закрыть”. Все это естественно настраивается. При создании окна указываем параметр modal равным true для того, чтобы диалог был модальным, как и стандартный alert.

Дабы далее расширить функциональность, можно помимо функции alert() создать функции success() и warning(), которые выводили бы сообщения об успехе или предупреждение. Реализация всех фунций показана в следующем блоке:

window.alert = function(text){
	popUpDialog(text);
};

window.success = function(text){
	popUpDialog(text, 2);
}

window.warning = function(text){
	popUpDialog(text, 1);
}

function popUpDialog(text, type){
	var sIcon = YAHOO.widget.SimpleDialog.ICON_BLOCK;
	var title = 'Ошибка';
	switch (type){
		case 1:
			sIcon = YAHOO.widget.SimpleDialog.ICON_WARN;
			title = 'Предупреждение';
			break;
		case 2:
			sIcon = YAHOO.widget.SimpleDialog.ICON_INFO;
			title = 'Информация';
	}
	var dialog = new YAHOO.widget.SimpleDialog("simpledialog1",
			{ 	width: "300px",
				fixedcenter: true,
				visible: false,
				draggable: false,
				zIndex: 9999,
				icon:sIcon,
				close: true,
				modal: true,
				constraintoviewport: true,
				buttons: [{ text:"Закрыть", handler: function(){this.hide()}, isDefault:true }]
			});
	dialog.setBody(text);
	dialog.setHeader(title);
	dialog.render(document.body);
	dialog.show();
}

Здесь, создание диалогового окна вынесено в отдельную функцию popUpDialog(), где первым параметром передается строка сообщения, а вторым его тип. В зависимости от типа окна, устанавливаются два параметра – иконка и текст заголовка, которые после используются для создания диалогового окна. Далее создаются три функции alert(), success() и warning(), которые просто вызывают popUpDialog() с нужными параметрами.

смотреть демоСкачать пример

Добавить в закладки:
Maklay.com - Большой каталог товаров для спорта и активного отдыха

Комментарии на “Диалог alert на YUI”

  1. А тред яваскриптовый будет остановлен, пока алерт не закроют?

  2. @zw0rk
    Тред яваскриптовый остановлен не будет. Действия пользователя будут блокироваться пока окно не закроешь.

  3. Забавно. Для полной коллекции confirm(’Удалить ?’) не хватает :)

  4. @maximus
    Это тоже можно сделать. Тут просто указана одна кнопка в объекте buttons:
    buttons: [{ text:"Закрыть", handler: function(){this.hide()}, isDefault:true }]

    но можно и добавить кнопки “Да”,”Нет” по желанию. И соответственно возвращать true, false в зависимости от того, какая кнопка нажата.

  5. Давно работаю с YUI, очень мощна библиотека. SimleDialog – очень полезная вещь.

  6. [...] время назад я писал о том, как создать диалоговые окна для замены [...]

  7. а можно вызвать это окно допустим при входе на страницу а не при нажатии ссылки?

  8. @Дмитрий
    Конечно можно:
    window.load = function () { alert(’test’); }

  9. хотелось бы повесить запуск окна на ссылку

  10. А разве нельзя так? Получить экземпляр ссылки и назначить ему обработчик который показывает алерт и возвращает false.

  11. разобрался, и вот такой вопрос а что если реализовать динамическое окно содержимое которого будет формироваться из отдельного файла с помощью asyncRequest? в YAHOO.widget.Dialog я это реализовал с применением дополнительного div id=’bod’

    var callback = { success: function(o) { document.getElementById(’bod’).innerHTML = o.responseText;}}
    YAHOO.util.Connect.asyncRequest(’POST’, ‘html.php’, callback);

    в SimleDialog диалог интересно это реализовать причем при вызове функции показа можно передавать (text, url)

  12. В SimpleDialog можно делать точно также, только использовать dialog.setBody(text); А этот самый text получать через AJAX.
    Что касается параметров (text, url) то, если подгружать текст из файла, то можно обойтись и одним параметром (url). Текст ведь все равно будет получаться на сервере.

  13. text в качестве заголовка окна dialog.setHeader(text)

  14. делаю var callback = { success: function(o) { var text2 = o.responseText;}}
    ничего не выводит
    Помогите пожалуйста правильно организовать подгрузку с данных

  15. У вас callback ничего не делает, он просто получает текст, назначает его локальной переменной и все.
    Примерно так надо:
    window.alert = function(text){
    var callback = {success: function(o) { var text = o.responseText; popUpDialog(text); }}
    YAHOO.util.Connect.asyncRequest(’GET’, ’some_url_here’, callback);
    };

  16. Неуродливый алерт это конечно круто, но основная функция всех этих алертов, конфирмов – остановка яваскриптового треда до действия (нажатия кнопки) пользователя. Например, я хочу сделать не уродливый конфирм для подверждения закрытия окна через YAHOO.util.Event.addListener(window, ‘beforeunload’, function(e) {… но ничего без остановки треда не получается. Жаль.

  17. здраствуйте !
    помогите вычислить размеры окна,панели или еще лучше фреймов
    например устанавливаю фрейм
    layout = new YAHOO.widget.Layout(’layout_usergroup’, {
    height: 350,
    units: [
    { position: 'top', height: 25, body: '', gutter: '2' },
    { position: 'center', body: '', gutter: '0 2 0 0' }
    ]
    });
    layout.render();
    как получить размеры(height, weidht) фреймов ‘top’ и ‘center’?

  18. Размеры окна можно получить при помощи YAHOO.util.Dom.getDocumentWidth. Но насколько я знаю LayoutManager создает лейаут при помощи div-ов. Т.е. просто получаете ссылку на нужный элемент и получаете размер через offsetWidth, offsetHeight.

Оставить комментарий

JSToolbox создан на основе WordPress