jQuery Ui - библиотека для создания пользовательского интерфейса в Веб- приложениях. jQuery Ui является надстройкой над библиотекой jQuery и предоставляет разработчику упрощенный доступ к её функциям взаимодействия, анимации и эффектов, а также набор виджетов.

• jQuery UI классы оформления
• jQuery UI CSS Framework Русский
• jQuery UI CSS Framework

Глобальные классы:

• класс class="ui-widget" стандартизирует внешний вид страницы (и/или элемента страницы), он устанавливает одинаковый шрифт всем вложенным элементам;
• class="ui-widget-header" подключают для стандартизации заголовков;
• class="ui-widget-content" для содержимого.

Предопределенные классы:

• ui-helper-hidden Применяет display:none к элементу.
• ui-helper-reset Сбрасывает значения таких свойства как margin, padding, text-decoration и list-style.
• ui-state-default Данный класс применяется к кнопкам, на которые не был наведен курсор мыши.
• ui-state-hover Данный класс применяется к кнопкам, на которые был наведен курсор мыши.
• ui-state-active Данный класс применяется к кнопкам во время щелчка мыши.
• ui-state-highlight Данный класс применяется к элементам, на которые необходимо обратить внимание.
• ui-state-error Данный класс применяется к элементам содержащим сообщения об ошибках.
• ui-state-disabled Данный класс применяется к недоступным для использования элементам.
• ui-priority-primary С помощью данного класса Вы можете выделить кнопку из группы кнопок как наиболее важную.
• ui-priority-secondary С помощью данного класса Вы можете выделить кнопку из группы кнопок как наименее важную.
• class="ui-corner-all" — присваивается элементу, с помощью которого выполняется скругление всех углов.

С версии jQuery Ui 1.9 появился новый виджет Menu.

• Документация Menu Widget
• Демо Menu Widget

• Пример. Применим к div- элементу и получим календарь, который будет постоянно присутствовать на странице. Создадим событие onChangeMonthYear, при возникновении которого будет произведен переадресация(redirect) на текущую страницу с дополнительными параметрами.

  <div id="datepicker_lx" style="width:200px; float:left;"></div>
  <script type="text/javascript">
      $("#datepicker_lx").datepicker({showButtonPanel: true, changeMonth: true, 
          dateFormat:"yy-mm-dd", defaultDate: new Date ("2013-08"),
          changeYear: true, firstDay: 1,
          onChangeMonthYear: function(year, month, inst) {
              location.href = location.href + '&year=' + year + '&month=' + month;
          }
      });
  </script>

• Пример. Подключение Datepicker. Установка в input текущего времени в формате "yy-mm-dd"

        <script type="text/javascript">
              $(function(){
                  var dates = $( "#datepicker_1, #datepicker_2" ).datepicker({
                      defaultDate: new Date(),
                      dateFormat:"yy-mm-dd",
                      changeMonth: true,
                      numberOfMonths: 3,
                      showButtonPanel:true,
                      onSelect: function( selectedDate ) {
                              
                          var option = this.id == "datepicker_1" ? "minDate" : "maxDate",
                          instance = $( this ).data( "datepicker" ),
                          date = $.datepicker.parseDate(
                          instance.settings.dateFormat ||
                              $.datepicker._defaults.dateFormat,
                          selectedDate, instance.settings );
                          dates.not( this ).datepicker( "option", option, date );
                      }
                  });
                  //                .val(new Date());
  
                  var dn = new Date();
                  var m= dn.getUTCMonth() + 1;
                  var m10 = (m>1 && m<10) ? '0'+m : m;
                  var d= dn.getUTCDate();
                  var d10 = (d>1 && d<10) ? '0'+d : d;
                  var d1now = dn.getUTCFullYear() + '-' + m10 + '-' + d10;
                  $('#datepicker_1').datepicker().val(d1now);
                  $('#datepicker_2').datepicker().val(d1now);
              });
          </script>
  
      </head>
      <body>
              
  <label for="datepicker_1">Period from</label>
  <input name="startdate" id="datepicker_1" style="min-width:100px;" title="" type="text" />
  <label for="datepicker_2">to</label>
  <input name="enddate" id="datepicker_2" style="min-width:100px;" title="" type="text" />        

Виджет Dialog превращать блочные элементы (обычно div'ы) в всплывающие в центре экрана диалоговые окна. Их можно перетаскивать и растягивать или закрыть нажатием на иконку "x" в заголовке. Свойство modal задает перекрытие страницы, которое закрывает доступ к сайту, пока не будет закрыто диалоговое окно.

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta name="keywords" content="HTML,CSS,XML,JavaScript" />
        <meta name="author" content="darkfire" />
        <meta charset="UTF-8" />
        <title>jQuery UI Виджет Dialog</title>
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
    </head>
    <body>
        <div>
            <h1>Использование jQuery UI Виджет Dialog</h1>
        </div>
        <div>
            <!-- Появляется скрытый div. Применяется визуальный эффект slideDown.           -->
            <script type="text/javascript">
                $(document).ready(function(){
                    $("#button").click(function(){
                        $( "#dialog" ).dialog();
                    });
 
                });
            </script>
        </div>
        <a href="#" id="button">Отобразить панель</a>
    </div>
<div id="dialog" title="Basic dialog" style="display:none; width:1500px; height:100px; background:pink;">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the &apos;x&>
</div>
</body>
</html>