» » » Создание оконного интерфейса при помощи jQuery UI. Часть 2

 

Создание оконного интерфейса при помощи jQuery UI. Часть 2

Автор: admin от 24-03-2012, 15:03, посмотрело: 2426

Первая часть .
Стоит еще раз уточнить, что статья рассчитана на пользователей только начинающих своё знакомство с библиотекой интерфейсов jQuery UI и показывает общие принципы работы с ней, а не задаёт постоянный порядок действий для каждого, а тем более, масштабного веб-проекта. Из известных проблем описываемого интерфейса — вёрстка оставляет желать лучшего.
В этой части будет показано, как назначить действия кнопкам окна и сделать окно сворачиваемым/разворачиваемым.
Результат, который должен получиться после изучения двух частей.


Первая часть была окончена на четвертом этапе, поэтому продолжим принятую ранее нумерацию.

Этап 5. — Добавление функциональности к диалоговому окну.

Сейчас диалоговое окно может открываться, однако, его кнопки пока не имеют за собой закрепленных действий. jQuery UI позволяет с легкостью исправить это в“недоразумение”:

$('#dialog_window_1').dialog({
  width: 'auto',
  height: 'auto',
  autoOpen : false,
  buttons: [
     {
         text: 'Создать',
         click: function() {
            alert('Ку! Кнопка была нажата!');
         }
     }
  ]
});



Как видно из примера, к кнопке в“Создать” были добавлены свойства в“buttons” отвечающие за инициализацию кода, который затем будет выполнен, в данном случае по действию в“click” (нажатие).

Теперь, если запустить index.html, открыть окно и нажать на кнопку в“Создать”, мы увидим стандартное предупреждение (alert):

Создание оконного интерфейса при помощи jQuery UI. Часть 2

Усложним функционал, вместо надписи 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_content + '');

//Инициализировать новый диалог
var dialog = $('#' + div_id).dialog({
  width: 'auto',
  height: 'auto',
  title : div_title,
  autoOpen : true,
  buttons: buttons
});




Результат в браузере может быть таким (если вручную расположить окна и назвать их соответствующим образом):

Создание оконного интерфейса при помощи jQuery UI. Часть 2

Этап 6. — Сворачиваемость окон (свойства в“Minimizable” and в“Maximizable”)


К сожалению, 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 библиотека будет подключена) такой код:



* This source code was highlighted with Source Code Highlighter.


Наблюдаем результат в браузере:

Создание оконного интерфейса при помощи jQuery UI. Часть 2

Лицензия — Creative Commons Attribution-Share Alike 3.0 Unported.



Источник: Linux

Категория: Операционные системы » Linux

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Добавление комментария

Имя:*
E-Mail:
Комментарий:
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Введите два слова, показанных на изображении: *