Свойства виджета Dialog

Категория:

Ранее описанный пример, в статье «Форма авторизации jQuery UI на виджете Dialog», использовался обработчик диалога, в котором использовано 6 различных свойств: resizable, autoOpen, modal, width, position и buttons. Обработчик jQuery

  • Свойство resizable по умолчанию установлено в значение true, что позволяет изменить размеры диалогового окна. При установке данного значения в состояние false изменить размеры окна станет невозможным.
  • Свойство autoOpen отвечает за автоматическое отображение диалогового окна при вызове метода dialog. По умолчанию true, а чтобы вручную запустить окно нужно установить данное свойство в false. В таком случае, чтобы отобразить диалоговое окно нужно использовать метод dialog('open'), а для скрытия вместо open передать методу close.
  • Свойсто modal отвечает за модальность относительно других элементов страниц. В состоянии true нельзя будет работать с другими элементами (такой эффект достигается за счет создания дополнительного слоя между диалогом и остальными элементами страницы). При состоянии false соответственно можно продолжать работать с другими элементами на странице.
  • Свойство width отвечает за ширину диалога в пикселах (По умолчанию 300).
  • Свойство position отвечает за позицию, в которой будет отображено диалоговое окно. Возможны следующие значения: 'center', 'left', 'right', 'top', 'bottom'. Также можно использовать в массиве, к примеру ['center', 'center'], заставляющий отобразить окно в центре.
  • В свойство buttons передается объект, в котором нужно опредалять необходимые кнопки связанные с callback-функциями (функции обработчики).

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

  • bgiframe используется для исправления проблемы в IE6, в котором элементы select помещаются поверх других элементов независимо от значения свойства z-index. Для этого данное свойство нужно установить в true и дополнительно подключить плагин bgIframe (скачать его можно здесь). По умолчанию false.
  • closeOnEscape влияет на закрытие окна с помощью клавиши «Esc». По умолчанию установлено свойство true. Для запрета данного действия необходимо установить свойству значение false.
  • dialogClass устанавливает имя класса (или классов), которые будет использованы для оформления.
  • draggable со значением true дает возможность перемещения диалогового окна (по умолчанию). Значение false отключает данную возможность.
  • height отвечает за высоту диалогового окна в пикселах. По умолчанию данное свойство принимает значение auto, определяя высоту окна по имеющемуся содержимому. Если содержимое больше высоты окна, то появится вертикальная полоса прокрутки.
  • hide определяет эффект, который будет использоваться при закрытии окна. Например: hide: 'slide'. По умолчанию используется значение null, то есть без эффектов.
  • maxHeight и maxWidth отвечают за максимальную высоту и ширину соответственно, а свойства minHeight и minWidth отвечают за минимальную высоту и ширину соответственно. (Все значения в пикселах).
  • show тоже самое что и свойство hide, только используется при открытии диалогового окна.
  • title позволяет переопределить заголовок окна.
  • zIndex указывает на уровень расположения слоя с окном. По умолчанию используется значение 1000.
  • stack позволяет отобразить окно поверх всех других (актуально при использовании нескольких диалоговых окон на одной странице) при получении фокуса. По умолчанию true, для отмены такого свойства необходимо установить в false.