Форма авторизации jQuery UI на виджете Dialog

Категория:

jQuery UI является надстройкой JavaScript-библиотеки jQuery. Она поможет создавать по настоящему интерактивные веб-приложения. В данной статье будет расмотрено создание формы авторизации с помощью виджета Dialog. Форма авторизации jQuery UI на виджете Dialog

Виджет Dialog является плавающим окном, которое содержит область заголовка и область контента. Над окном диалога можно производить различные действия: перемещать, изменять размеры, открывать, закрывать и т.д.

Чтобы начать использовать данное диалоговое окно выполняем следующие шаги:

  • Скачиваем последнюю версию библиотеки jQuery [скачать].
  • Скачиваем компаненты jQuery UI для создания диалога [скачать]. На сайте нажимаем ссылку Deselect all component, чтобы не закачивать все имеющиеся компоненты, а затем выбираем следующее: Dialog (автоматически также отметится UI Core, так как он необходим для функционирования виджета Dialog). Чтобы диалоговое окно можно было перемещать по странице и изменять его размеры, то отметьте Draggable и Resizable.
  • Распаковываем полученный архив и подключаем необходмые файлы.
    Подключение css и библиотек jQuery
  • Далее пишем обработчик диалога в блоке .
    Обработчик jQuery
  • В данном обработчике с помощью jQuery выбирается форма диалога по идентификатору dialog_auth. Также выполнены дополнительные настройки, которые будут описаны в статье «Свойства виджета Dialog». Здесь важно отметить реакцию на кнопку «Вход», именно здесь необходимо вставить код для отправки формы на сервер.
  • Создаем ссылку, при нажатии на которую будет откываться диалоговое окно jQuery UI Dialog. Ссылка авторизации Самое главное здесь идентификатор ссылки, в данном случае user_auth. При нажатии на неё происходит запуск обработчика и будет запущен jQuery UI Dialog.
  • Создаем диалоговое окно с формой авторизации. Диалоговое окноЗдесь главное указать идентификатор диалога (то есть необходимо, чтобы было согласовано с обработчиком на jQuery).