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

Question

У меня проблемы с документацией по Dojo (как обычно).
В своем API TabContainer они перечисляют второй аргумент как объект, называемый «params», но они никогда не говорят, что вы действительно можете поместить в этот объект params. Могу ли я указать ширину? Высота? Нужно ли указывать идентификаторы div, которые я хочу использовать для вкладок внутри контейнера?

Также нет спецификации того, какие атрибуты я бы поместил в HTML, если бы я хотел указать контейнеры вкладок, которые будут анализироваться парсером Dojo. Я нашел следующий пример, который позволяет поставить заголовок, выбранные и закрываемые параметры. Есть что-нибудь еще?

<div id="tabA1" dojoType="dijit.layout.ContentPane" title="First Tab"  selected="true" closable="true">
        First Tab
    </div>
    <div id="tabA2" dojoType="dijit.layout.ContentPane" title="Second Tab" closable="true">
        Second Tab
    </div>
    <div id="tabA3" dojoType="dijit.layout.ContentPane" title="Third Tab" closable="true">
        Third Tab
    </div>
</div>

Answer 1

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

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

   var widget = new Widget (params, node);

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

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

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

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

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

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

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

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

• doLayout & mdash; Boolean. Если это правда, измените размер моего текущего отображаемого ребенка, чтобы он соответствовал моему размеру. По умолчанию: true.
• сохраняться & mdash; Boolean. Помнит выбранного ребенка через сеансы. По умолчанию: false.

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

Но давайте сначала посмотрим на это в действии. Все тесты Dijit всегда находятся в dijit / tests . Любой виджет dijit.layout. * Будет протестирован в dijit / tests / layout . Соответствующий тестовый файл будет иметь имя что-то вроде 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");

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

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

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

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