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

Question

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

Также нет спецификации того, какие атрибуты я бы поместил в 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 виджет конструкторы подпись:

   вар виджет = Новый виджет (Params, узел);

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

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

4. Лучшим способом поиска этого материала является использование Dojo checkout с вашим любимым текстовым редактором. Но также работает the nightly checkout (если вы следуете за багажником). Или the Trac source browser.

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

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

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

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

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

• doLayout — Boolean. Если true, измените размер моего текущего отображаемого дочернего элемента в соответствии с моим размером. По умолчанию: true.
• persist — 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"); 

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

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

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

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