Инструменты пользователя

Инструменты сайта


jquery_ui

jQuery Ui

Homepage: 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 задает перекрытие страницы, которое закрывает доступ к сайту, пока не будет закрыто диалоговое окно.

jquery_ui.txt · Последние изменения: 2015/11/28 17:40 (внешнее изменение)

Яндекс.Метрика