Заметки за январь 2010 года

Навигация с помощью клавиатуры

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

Любой элемент в документе может получить фокус, если у него указан атрибут tabindex . Он не является частью спецификации HTML 4.01, но фактически реализован во всех современных браузерах.

Значение атрибута tabindex

Атрибут может принимать любые числовые значения. Явное указание атрибута позволяет получить фокус с помощью указателя мыши или программно через метод focus(). Отсутствие атрибута устанавливает обычную реакцию элемента. В этом случае фокус могут получить только элементы формы, ссылки и некоторые другие.

Поведение при навигации с помощью клавиши «Tab»

  • Отрицательное

    Элемент игнорируется

  • Нулевое

    Последовательность задается положением элемента в документе

  • Положительное

    Значение явно задает порядок элементов при перемещении фокуса

Отслеживание сфокусированного элемента

События focus и blur могут быть использованы для любого элемента. Но так как нет стандартного интерфейса, для определения получил элемент фокус или нет, то нужно будет самостоятельно обрабатывать и запоминать это состояние.

Не следует предполагать, что фокус может меняться только с помощью клавиатуры или мышки, потому что вспомогательные технологии, такие как «чтение с экрана» могут самостоятельно устанавливать фокус на элементы.

Динамическое изменение атрибута tabIndex

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

Отслеживание фокуса у элемента document

Что касается событий focus и blur , то их может генерировать не только конкретный элемент, но и весь документ в целом. В jQuery 1.4 разработчики добавили синтетические события focusin и focusout для корректной делегации родительским элементам DOM-событий focus и blur соответственно. Прикрепив обработчик этих событий к документу, можно отслеживать активность окна браузера.

Оставте свой комментарий

Инфраструктура виджетов в YUI3

Интересную инфраструктуру для создания виджетов предоставляет фреймворк YUI3 . В заметке я хочу кратко описать шаблон для создания и назначение методов жизненного цикла.

Пример минимального виджета:


YUI.add("mywidget", function (Y) {

    var App = Y.namespace("App");

    /* MyWidget конструктор */
    function MyWidget(config) {
        MyWidget.superclass.constructor.apply(this, arguments);
    }

    /* Имя виджета, которое будет использоваться для генерации названий классов и т.п. */
    MyWidget.NAME = "mywidget";

    Y.extend(MyWidget, Y.Widget, {
        initializer: function (config) {},
        destructor: function () {},
        renderUI: function () {},
        bindUI: function () {},
        syncUI: function () {}
    });

    App.MyWidget = Y.Base.build(MyWidget.NAME, MyWidget, []);

}, "0.1", {use: ["widget"]});

Важными методами жизненного цикла виджета являются:

  • initializer

    Метод автоматически вызывается конструктором и может быть использован для настойки экземпляра. Параметры, с которыми был вызван конструктор, передаются без изменений. Зачастую метод может оставаться пустым.

  • destructor

    Метод вызывается во время удаления виджета и используется для очистки экземпляра от созданных DOM-элементов и обработчиков событий. Если все DOM-элементы создавались внутри «bounding box», то нужно будет только «занулить» ссылки на них. Сами элементы и обработчики событий будут удалены автоматически.

  • renderUI

    Часть реализации «renderer», ответственная за создание представления виджета. Метод добавляет DOM-элементы, которые необходимы виджету, или изменяет существующие.

  • bindUI

    Часть реализации «renderer», ответственная за подключение обработчиков событий изменения атрибутов или DOM-событий.

  • syncUI

    Часть реализации «renderer», ответственная за обновление интерфейса виджета на основании его текущего состояния.

Получение данных о состоянии виджета в методах renderUI, bindUI, syncUI выполняется с помощью метода get, наследованного у класса Attribute . Следует отметить, что если используется статическое поле ATTRS у виджета, которое определяет начальное состояние, то в нем следует описать все используемые атрибуты. Если какой-то из них не будет описан, то получить доступ к нему не будет возможности.

Наиболее часто используемыми атрибутами, пожалуй, являются boundingBox и contentBox . Первый содержит ссылку на объект типа Node, который служит контейнером для виджета, а второй — ссылку на контейнер содержимого. Задать разметку для этих контейнеров можно через конфигурационные свойства BOUNDING_TEMPLATE и CONTENT_TEMPLATE соответственно. По умолчанию для них используется просто элемент DIV.

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


YUI().use("mywidget", function (Y) {
    var widget = new Y.App.MyWidget({
        a: 10,
        title: "Sample widget"
    });
    widget.render();
});

В конструкторе указываются, если это необходимо, конфигурационные параметры виджета. Метод render может быть вызван с параметром, определяющий DOM-элемент, где будет отображен виджет. Если он вызван без параметров, как в примере, то виджет отображается в элементе BODY.

Оставте свой комментарий