На этом шаге мы рассмотрим один из виджетов.

    В дополнение к готовым компонентам библиотека jQuery UI включает в себя набор надежных виджетов пользовательского интерфейса, которые не требуют дополнительной настройки и выглядят, как привычные элементы интерфейса обычных приложений. Например, виджет Dialog, использующий компоненты draggable и resizable, может применяться для воспроизведения диалогового окна, благодаря чему у нас отпадает необходимость создавать собственные диалоги.

    Как и другие виджеты пользовательского интерфейса, виджет Dialog может принимать огромное число параметров. Его подходящим образом названный метод .dialog() может также принимать строковые аргументы, которые оказывают влияние на поведение диалога. В самом простом случае метод .dialog() преобразует существующий элемент в диалог и отображает его вместе с элементами, содержащимися в нем. Например, для начала возьмем элемент <div> с простейшей структурой.

<div id="dlg">Мой Диалог</div>

    Неудивительно, что этот элемент <div> имеет вид простого текстового блока, как показано на рисунке 1.

Рис.1. Простой элемент <div> выглядит как обычный текстовый блок

    Как только браузер создаст дерево DOM, мы можем вызвать простой диалог:

$(document).ready(function() {
   $('#do-dialog').click(function() {
     $('#dlg').dialog();
   });
});

    Теперь текст отображается в окне диалога, как показано на рисунке 2.

Рис.2. Вид диалога после применения темы по умолчанию (шелкните по кнопке)

    Изменить размеры диалогового окна можно, ухватив и переместив какой-либо его край указателем мыши. Переместить это окно можно, ухватив мышью в пределах верхней области чуть ниже верхней границы. А закрыть - щелкнув на ссылке с изображением крестика в правом верхнем углу.

    Однако мы можем улучшить вид диалога, используя стили CSS. Библиотека jQuery UI предоставляет лишь минимальный набор стилей, необходимых для обеспечения функциональности виджетов, и оставляет реализацию внешнего вида за нами. На рисунке 2 показано, как выглядит диалог после применения темы по умолчанию.

    Теперь более ясно обозначены различные области диалога, и при наведении на них указатель мыши изменяется, обеспечивая визуальную обратную связь, позволяющую опознать элементы диалога, которые могут использоваться для его перемещения и изменения его размеров.

    Как и другие методы библиотеки jQuery UI, метод .dialog() может принимать различные параметры. Некоторые параметры определяют внешний вид диалога, другие позволяют возбуждать события. Ниже приводится пример использования некоторых из этих параметров:

$(document).ready(function() {

  var $dlg = $('#dlg');
  var dlgText = $dlg.text();
  $dlg.dialog({
    autoOpen: false,
    title: dlgText,
    open: function() {
        $dlg.empty();
    },
    buttons: {
      'add message': function() {
        $dlg.append('<p>Добавленное сообщение</p>');
      },
      'erase messages': function() {
        $('p', $dlg).remove();
      }
    }
  });
  $('#do-dialog').click(function() {
    $dlg.dialog('open');    
  });

});

    Мы указали, что изначально диалог должен быть скрыт, но должен открываться, когда пользователь щелкнет на кнопке с атрибутом id="do-dialog". Кроме того, мы перенесли исходное текстовое содержимое диалога в область заголовка и добавили две кнопки, одна из них добавляет текст сообщения, а другая стирает сообщения. Для каждой кнопки определена своя функция, определяющая реакцию на щелчок мышью, одна из них добавляет параграф, а другая удаляет параграфы. Внешний вид диалога приведен на рисунке 3.

Рис.3. Вид диалога (шелкните по кнопке)

    Описание других параметров, позволяющих определять внешний вид и поведение диалогов, можно найти по адресу: http://docs.jquery.com/UI/Dialog/dialog#options.

    На следующем шаге мы рассмотрим jQuery Ul ThemeRoller.

Предыдущий шаг Содержание Следующий шаг