vakorovin
@vakorovin
Разработчик

Jquery ui dialog — Кто как использует?

В проекте используется достаточно много диалоговых окон, и везде представляю окно как div, скрытый изначально, который при определенном событии становится диалогом. А сейчас смотрю на шаблоны страниц (использую Smarty) и все больше подумываю о том, что размер страницы можно уменьшить вдвое, убрав скрытые диалоги и перенеся их создание в js. Гуру, подскажите, как более грамотно создавать диалоговые окна?
  • Вопрос задан
  • 9752 просмотра
Пригласить эксперта
Ответы на вопрос 5
dudeonthehorse
@dudeonthehorse
Email Developer
$(document)
.on("click", "#openModal", function() {
     $("body").append('<div id="shadow" style="position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.5;"></div>').append('<div id="modal"><button id="closeModal">Close Modal</button></div>');
     $("#modal").load("file.html");
})
.on("click", "#closeModal", function() {
     $("#modal").remove(); 
     $("#shadow").remove();
})


Для #modal указать необходимые стили и абсолютное позиционирование.
Ответ написан
UZER2006
@UZER2006
По-моему, вопрос немного бессмысленный. На том же JS создать любой DIV, и на него навесить диалог.
Я в своё время обернул это в удобную функцию, которая решила большинство задач с диалогами в проекте. А позже эта функция была обёрнута в другую, для визуальных AJAX-запросов к серверу, в т.ч. на два шага (редактирование, например).
newDialog
var globalDialogs = {};
/*
	buttons
	icontent
	height
	width
	title
	onclose
*/
function newDialog(options){
	options['buttons'] = options.buttons || {'OK':'OK'};
	options['icontent'] = options.icontent || 'load';
	options['height'] = options.height || 'auto';
	options['width'] = options.width || 'auto';
	options['position'] = options.position || {my:"center",at:"center",of:window};
	options['title'] = options.title || 'Request...';
	options['onclose'] = options.onclose || function(){};
	var shows = ['blind', 'clip', 'drop', 'fold', 'scale', 'slide'];
	var hides = ['blind', 'clip', 'drop', 'explode', 'fold', 'hidhlight', 'puff', 'scale', 'slide'];
	var ndd = document.createElement('div');
	ndd.title = options.title;
	ndd.id = 'dialog_'+dialogC;
	if (options.icontent == 'load'){
		$(ndd).html('<img src="img/load.gif" />');
		$(ndd).attr('align','center');
	}
	else{
		ndd.innerHTML = options.icontent;
	}
	if ($('#_title',ndd).get(0)){
		ndd.title = $('#_title',ndd).val();
		$('#_title',ndd).remove();
	}
	var butts = [];
	for (var name in options.buttons){
		butts[butts.length] = {text:name,click:options.buttons[name]};
		if ((name == 'OK' || name == 'Cancel' || name == 'Close' || name == 'No') && !$.isFunction(options.buttons[name])){
			butts[butts.length-1]['click'] = function(){$(this).dialog('close');};
			butts[butts.length-1]['id'] = 'dialog_close_btn';
		}
	}
	$(ndd).dialog({
		autoOpen: false,
		width: options.width,
		height: options.height,
		position: options.position,
		//show: shows[Math.floor(Math.random()*shows.length)],
		//hide: hides[Math.floor(Math.random()*hides.length)],
		beforeClose : function(){$.fx.speeds._default = 1000;},
		close : function(){$(this).html('');$.fx.speeds._default = 400;options.onclose.call(this);},
		buttons: butts,
	});
	var icon = '';
	for (var name in options.buttons){
		icon = '';
		if (name == 'OK'){
			icon = 'ui-icon-check';
		}
		if (name == 'Cancel' || name == 'No' || name == 'Close'){
			icon = 'ui-icon-closethick';
		}
		if (name == 'Update' || name == 'Save' || name == 'Process'){
			icon = 'ui-icon-disk';
		}
		$('#dialog_'+dialogC).parent().find('button:contains("'+name+'")')
			.button('option','icons',{primary:icon});
			//.addClass('ui-button-text-icon-primary')
			//.removeClass('ui-button-text-only')
			//.prepend('<span class="ui-button-icon-primary ui-icon '+icon+'"></span>');
	}
	$(ndd).dialog('open');
	dialogC++;
	return dialogC-1;
}
Ответ написан
Если содержимое диалога довольно динамично и его структура не очень сложна — лучше генерить через js, если он неодноразовый и статичный — можно и скрытым сделать. Тут надо в каждом конкретном случае смотреть.
Ответ написан
Комментировать
IonDen
@IonDen
JavaScript developer. IonDen.com
Можно делать даже лучше. Например генерировать на JS при первом обращении, в дальнейшем скрывать/проявлять по мере необходимости. Это исключит постоянные манипуляции с DOM и код страницы останется чистым.
Либо для еще большего ускорения генерировать контейнер модального окна заранее, скажем в момент DOM-ready. А потом уже использовать, пряча контейнер либо в display:none, либо в координаты -9999px.
Ответ написан
Комментировать
Moor
@Moor
Взгляните на alertify.js
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы