jQuery UI: FullScreen button for Dialog

Сегодня небольшой энчант для диалога — добавление кнопки развернуть на весь экран, хотя конечно не на весь экран а только на весь вьюпорт.

Вот такой небольшой код добавляет новую кнопку в заголовок диалога. При первом нажатии на кнопку диалог разворачивается, при втором — сворачивается до первоначального размера. Ручной ресайз на кнопку никак не влияет.


.ui-dialog .ui-dialog-titlebar-fullscreen {
	position: absolute;
	right: 2em;
	top: 50%;
	width: 20px;
	margin: -10px 0 0 0;
	padding: 1px;
	height: 20px;
}

(function ($) {

	$.ui.dialog.prototype.fullscreen = false;

	var old = $.ui.dialog.prototype._createTitlebar;
	$.ui.dialog.prototype._createTitlebar = function () {
		old.call(this);
		var oldHeight = this.options.height,
			oldWidth = this.options.width;

		this.uiDialogTitlebarFullScreen = $("<button type='button'></button>")
			.button({
				label: this.options.fullScreenText,
				icons: {
					primary: "ui-icon-newwin"
				},
				text: false
			})
			.addClass("ui-dialog-titlebar-fullscreen")
			.appendTo(this.uiDialogTitlebar);

		this._on(this.uiDialogTitlebarFullScreen, {
			click: function (event) {
				event.preventDefault();
				if (this.fullscreen) {
					this._setOptions({
						height: oldHeight,
						width: oldWidth
					});
				} else {
					this._setOptions({
						height: window.innerHeight - 30,
						width: window.innerWidth - 30
					});
				}
				this.fullscreen = !this.fullscreen;
				this._position("center");
			}
		});

	};

})(jQuery);

Диалог принимает новую опцию options.fullText с текстом кнопки.

Комментарий “jQuery UI: FullScreen button for Dialog

Комментарии закрыты