Примеры использования jQuery UI

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

Классы jQuery UI

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

  • класс 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" — присваивается элементу, с помощью которого выполняется скругление всех углов.

Виджет Menu

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

Виджет Datepicker

  • Пример. Применим к 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 - пример использования

Виджет 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>
PQ VPS сервера в 28+ странах.