- PVSM.RU - https://www.pvsm.ru -
Первая часть [1].
Стоит еще раз уточнить, что статья рассчитана на пользователей только начинающих своё знакомство с библиотекой интерфейсов jQuery UI и показывает общие принципы работы с ней, а не задаёт постоянный порядок действий для каждого, а тем более, масштабного веб-проекта. Из известных проблем описываемого интерфейса – вёрстка оставляет желать лучшего.
В этой части будет показано, как назначить действия кнопкам окна и сделать окно сворачиваемым/разворачиваемым.
Результат [2], который должен получиться после изучения двух частей.
Первая часть была окончена на четвертом этапе, поэтому продолжим принятую ранее нумерацию.
Сейчас диалоговое окно может открываться, однако, его кнопки пока не имеют за собой закрепленных действий. jQuery UI позволяет с легкостью исправить это “недоразумение”:
$('#dialog_window_1').dialog({
width: 'auto',
height: 'auto',
autoOpen : false,
buttons: [
{
text: 'Создать',
click: function() {
alert('Ку! Кнопка была нажата!');
}
}
]
});
Как видно из примера, к кнопке “Создать” были добавлены свойства “buttons” отвечающие за инициализацию кода, который затем будет выполнен, в данном случае по действию “click” (нажатие).
Теперь, если запустить index.html, открыть окно и нажать на кнопку “Создать”, мы увидим стандартное предупреждение (alert):
Усложним функционал, вместо надписи alert('Yay, clicked the button!'); добавим такой код:
// получаем общее количество существующих окон плюс один (1)
var div_count = $('.dialog_window').length + 1;// генерируем уникальный id отталкиваясь от общего количества окон
var div_id = 'dialog_window_' + div_count;// получаем заголовок нового окна из формы, представляем его как контент
var div_title = $('#new_window_title').val();
var div_content = $('#new_window_content').val();// генерируем массив функционала кнопок в зависимости от того, какая кнопка (чекбокс) выбрана в первом окне
var buttons = new Array();
if( $('#alertbutton').is(':checked') ) {
buttons.push({
text: 'Предупреждение',
click: function() {
alert('Предупреждение из окна : ' + div_title);
}
});
}if( $('#closebutton').is(':checked') ) {
buttons.push({
text: 'Закрыть',
click: function() {
$('#' + div_id).dialog('close');
}
});
}// Встроить HTML-код окна в страницу
$('body').append('<div class="dialog_window" id="' + div_id + '">' + div_content + '</div>');//Инициализировать новый диалог
var dialog = $('#' + div_id).dialog({
width: 'auto',
height: 'auto',
title : div_title,
autoOpen : true,
buttons: buttons
});
Результат в браузере может быть таким (если вручную расположить окна и назвать их соответствующим образом):
К сожалению, jQuery UI не имеет встроенных методов minimize, maximize, но их легко можно добавить, немного изменив процесс инициализации в прототипе jQuery UI Dialog. Для этого в процесс инициализации окон добавляется код автоматически создающий “статус минимизации “ и добавляющий нужные иконки для определенных действий. Сначала внесем добавления в стили окон:
#dialog_window_minimized_container {
position: fixed;
bottom: 0px;
left: 0px;
}.dialog_window_minimized {
float: left;
padding: 5px 10px;
font-size: 12px;
cursor: pointer;
margin-right: 2px;
display: none;
}.dialog_window_minimized .ui-icon {
display: inline-block !important;
position: relative;
top: 3px;
cursor: pointer;
}.ui-dialog .ui-dialog-titlebar-minimize {
height: 18px;
width: 19px;
padding: 1px;
position: absolute;
right: 23px;
top: 9px;
}.ui-dialog .ui-dialog-titlebar-minimize .ui-icon {
display: block;
margin: 1px;
}.ui-dialog .ui-dialog-titlebar-minimize:hover, .ui-dialog .ui-dialog-titlebar-minimize:focus {
padding: 0;
}
Не забываем добавить в тег body (можно перед его закрытием) отдельный div, что будет содержать все свернутые окна.
<div id="dialog_window_minimized_container"></div>
Добавляем (после того как jQuery UI библиотека будет подключена) такой код:
<script>
var _init = $.ui.dialog.prototype._init;
$.ui.dialog.prototype._init = function() {
// Выполняем оригинальный код инициализации библиотеки
_init.apply(this, arguments);// устанавливаем некоторые переменные заранее
var dialog_element = this;
var dialog_id = this.uiDialogTitlebar.next().attr('id');//добавляем иконку сворачивания окна
this.uiDialogTitlebar.append('<a href="#" id="' + dialog_id +
'-minbutton" class="ui-dialog-titlebar-minimize ui-corner-all">'+
'<span class="ui-icon ui-icon-minusthick"></span></a>');//добавляем состояние свернутых окон
$('#dialog_window_minimized_container').append(
'<div class="dialog_window_minimized ui-widget ui-state-default ui-corner-all" id="' +
dialog_id + '_minimized">' + this.uiDialogTitlebar.find('.ui-dialog-title').text() +
'<span class="ui-icon ui-icon-newwin"></div>');// создаем событие наведения для кнопок сворачивания
$('#' + dialog_id + '-minbutton').hover(function() {
$(this).addClass('ui-state-hover');
}, function() {
$(this).removeClass('ui-state-hover');
}).click(function() {
//добавляем событие по нажатию, минимизируем окно
dialog_element.close();
$('#' + dialog_id + '_minimized').show();
});// создаем другое событие по клику, которое разворачивает свернутое окно
$('#' + dialog_id + '_minimized').click(function() {
$(this).hide();
dialog_element.open();
});
};
</script>* This source code was highlighted with Source Code Highlighter [3].
Наблюдаем результат в браузере:
Лицензия — Creative Commons Attribution-Share Alike 3.0 Unported.
Автор: denldv
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/interfejsy/4142
Ссылки в тексте:
[1] Первая часть : http://habrahabr.ru/post/140522/
[2] Результат: http://jsfiddle.net/JhtHn/
[3] Source Code Highlighter: http://virtser.net/blog/post/source-code-highlighter.aspx
Нажмите здесь для печати.