Параметры Dojo для вкладок

Я не эксперт в виджетах Dojo, но вот что я знаю:

1. Все конструкторы виджетов Dojo имеют подпись:

   var widget = новый виджет (параметры, узел);

2. Лучший способ узнать параметры - это посмотреть исходный код - не пугайтесь, это будут задокументированные переменные в начале соответствующего класса.

3. Соответствующий файл обычно легко найти, используя имя виджета, потому что они названы по их пути.

4. Лучший способ найти этот материал - использовать оформление Dojo с вашим любимым текстовым редактором. Но ночная проверка тоже работает (если следовать стволу). Или исходный браузер Trac.

5. Не стоит недооценивать силу просмотра тестов и демонстраций.

Пример: dijit.layout.TabContainer ⇒ dijit / layout / TabContainer.js. Если файл отсутствует, загляните в каталоги иерархии для _base.js или в некоторые файлы с похожим звуком - последние могут объединять связанные классы вместе. Но в большинстве случаев (например, с TabContainer) вы его сразу найдете. Пойдем посмотрим.

В верхней части класса есть два публично задокументированных параметра:

• tabPosition - Строка. Определяет расположение вкладок относительно содержимого вкладок. "верх", "низ", "левый-h", "правый-h". По умолчанию: «верх».
• tabStrip - bool. Определяет, получает ли список вкладок дополнительный класс для компоновки. По умолчанию: false.
• _controllerWidget - просто игнорируйте его, никакие общедоступные параметры не начинаются с подчеркивания - это обычное соглашение JavaScript для обозначения защищенных членов.

Но это еще не все. TabContainer основан на dijit.layout.StackContainer (достаточно взглянуть на заголовок dojo.declare ()). Мы также можем использовать общедоступные параметры StackContainer:

• doLayout - логическое значение. Если это правда, измените размер моего текущего отображаемого дочернего элемента, чтобы он соответствовал моему размеру. По умолчанию: true.
• persist - логический. Запоминает выбранного ребенка через сеансы. По умолчанию: false.

Как видите, код и параметры хорошо документированы, но не всегда отражаются в инструменте API. Теперь мы можем с уверенностью создать контейнер вкладок.

Но сначала давайте посмотрим на это в действии. Все тесты Dijit всегда находятся в диджит / тесты. Любой виджет dijit.layout. * Будет протестирован в dijit / тесты / макет. Соответствующий тестовый файл будет называться что-то вроде test_TabContainer.html, и на самом деле я вижу для этого 5 файлов:

• test_TabContainer.html.
• test_TabContainer_noLayout.html.
• test_TabContainer_prog.html.
• test_TabContainer_remote.html.
• test_TabContainerTitlePane.html.

Например, давайте воссоздадим первый TabContainer test_TabContainer.html:

var tc = new dijit.layout.TabContainer(
  {persist: true, tabStrip: true}, "mainTabContainer");

Или мы можем сделать это как в встроенном тесте:

<div id = "mainTabContainer" dojoType = "dijit.layout.TabContainer"
    persist = "true" tabStrip = "true" style = "width: 100%; height: 20em;">
  ...
</div>

Возвращаясь к исходному вопросу: теперь вы можете видеть, что ширина и высота указаны просто как стили, без специальных атрибутов, ничего необычного, просто какой-то интуитивно понятный CSS. Поэтому, если вы хотите сделать это программно, просто установите их на узле перед созданием нового экземпляра TabContainer.

Да, я бы хотел, чтобы в документации по API были все эти мелкие детали, но вся настройка интуитивно понятна, а соответствующие части задокументированы прямо в файле. Мы обратились к исходному коду, но мы не пытались расшифровать исходный код, а просто читали удобочитаемые комментарии в верхней части класса.