Коллекция материалов и статей для веб разработчиков


Всплывающие диалоговые окна с использованием jQuery UI

Иногда на сайте необходимо использовать всплывающие диалоговые окна, просто информативные или подтверждающие или отклюняющие какие-либо действия и даже выполнение определенных действий. В большинтве случаев для такие целей подойдет плагин из библиотеки jQuery UI - Dialog. Он довольно прост в использовании и имеет множество настроек, обработчикой событий и действий. Я лишь покажу как подключить Dialog и основные манипуляции с ним. Остальное читайте на официальном сайте.

Для начало необходимо создать контейнет который будет содержать заголовок диалога и его содержимое.

Тут любой текст или html который будет отобразаться в диалоговом окне

Затем подключаем наже диалоговое окно к нашему контейнеру и описываем нужные свойства.

$('#dialog').dialog({
	autoOpen: false,
	height: 500,
	width: 600,
	modal: true,
	resizable: false,
	open: function() {
		//какие-либо действия при открытии окна
	},
	close: function() {
		//какие-либо действия при закрытии окна
	},
	buttons: {
		"Save": function() {
			//действия при нажатии кнопки Save
			$(this).dialog('close');
		},
		"Close": {
			click: function() {
				//действия при нажатии кнопки Close
				$(this).dialog('close');
			},
			id: 'button-close',
			text: 'Close'
		}
    }
});

Сейчас опишу поподробнее каждое свойство.
autoOpen: true или false, отображать ли диалоговое окно при загрузке страницы, обычно ставим false т. к. нам надо открывать при определенном действии
height, width: думаю тут все понятно, высота или ширина в пикселях
modal: модельное окно или нет, т е можно ли не закрывая его выполнять какие-либо дейтсвия на страницы, обычно true
resizable: возможно ли изменять размеры окна
open: функция которая срабатывает при открытии окна
close: функция которая срабатывает при закрытии окна
buttons: кнопки, Save, Close имена и по умолчанию отображаемый текст, можно писать по русски, я специально сделал 2 варианта описания кнопок, первый (Save), обычный вариант указывает надпись кнопки и функцию при нажатии на кнопку, второй (Close) описывает действия и свойства, text - текст кнопки, т е имя может быть любым; click - функция при нажатии на кнопку, id - ид кнопки.

существует еще много свойств и обработчиков, которые можно найти на официальном сайте. Еще хочу отменить что все свойства описывать не обязательно, только те которые мы хотим задать явно.

Ну и теперь нам осталось написать обработчик на ссылку, кнопку или что-то еще при нажатии на который появится наше диалоговое окно.

$('#show-message-button').click(function() {
	var html = 'Другой текст во всплывающем окне';
	$('#dialog').html(html).dialog('open');
	return false;
});

Хочу отметить еще то, что мы можем менять сожержимое нашего блока, если текст сообщений нужен разные при нажатии на разные кнопки, поэтому в коде выше перед вызовом окна мы меняем его html. Если это делать не надо, это вызов можно опустить. Результат ниже на рисунке, стили окна можно подредактирововать самому, или скачать на оффициальном сайте, там много разных тем.
dialogbox.jpg

Tags: 

Добавить комментарий

Filtered HTML

  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешённые HTML-теги: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Строки и параграфы переносятся автоматически.

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.
CAPTCHA