Neurons to bytes

По работе понадобился скрипт, открывающий popup-окна. Написал свой, достаточно универсальный и удобный в использовании.  В этой заметке я покажу, как правильно открывать popup-окна на странице. Фреймворки не используются.

/*
	Useful tools.
	Author: venom
	Date: 22.01.2009
*/

// Merging two objects
Object.prototype.extend = function(extended) {
	for (var key in (extended || {})) this[key] = extended[key];
	return this;
}

// Utilities object
var Utils = {

	// Show popup window
	popup: function(options) {
		var options = {
			url        : '/',
			width      : 800,
			height     : 600,
			name       : 'popup',
			location   : 1,
			status     : 0,
			scrollbars : 0,
		}.extend(options);

		options.x = (screen.width/2)-(options.width/2);
		options.y = (screen.height/2)-(options.height/2);

		var w = window.open(options.url, options.name,
			"location="+options.location+
			",status="+options.status+
			",scrollbars="+options.scrollbars+
			",width="+options.width+
			",height="+options.height+
			",top="+options.y+
			",left="+options.x);

		w.focus();
		return w;
	}
}

В HTML это выглядит так, но лучше обращаться по идентификатору (id) ссылки (Unobtrusive Javascript), а не как здесь:

<script type="text/javascript" src="scripts/utils.js"></script>
<a href="/visit_shop.html" onclick="Utils.popup({ url : this.href }); return false;">Заглянуть в магазин</a>

Как видно, здесь в качестве аргумента функции мы передаем объект, а не уродливую строку параметров, как обычно делают всякие деятели. Кроме того, есть настройки по-умолчанию, что видно из скрипта. И, кстати, обратите внимание на стиль кодирования - именно так пишутся скрипты под Javascript, а не глобальными функциями (методами объекта window), как многие привыкли делать.

Апдейт:

Если у кого не работает этот код, то скорее всего вы используете какой-то JS фреймворк и он конфликтует с Object.prototype.extend. Значит, удалите прототип Object.prototype.extend

Also interesting

• No Related Post

This entry was posted on Четверг, Январь 22nd, 2009 at 11:38 and is filed under программерское. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.